A customer to my web site as soon as knowledgeable me when he clicked on one in all my hyperlinks on Twitter; he was dropped at my web site with a giant popup and a malicious code warning. That’s sufficient to scare the heck out of somebody, so I began doing a little testing. There was nothing mistaken with my web site – the issue was the hyperlink.
The hyperlink on one other web site produced a toolbar up high that inspired individuals to click on on a malicious hyperlink whereas loading my web site in an iframe beneath. To most folk, my web site might seem like spreading malicious code. I wouldn’t say I like several web site that hundreds my web site inside an iframe, so I did what any affordable geek would do… I loaded up a body breaker.
Iframing your web site shouldn’t be at all times malicious, although. We lately shared a device, Sniply, so as to add a call-to-action (CTA) to any web site hyperlink you share. It does this by embedding your total web site in an iframe and making use of div over your content material with the call-to-action.
However I’m fairly specific about my content material and the trouble I’ve put into Martech Zone, so I don’t need anybody to iframe my content material, even with a link-share platform. In doing a little analysis, there are fairly a number of methods to deal with this.
How To Cease Iframing Your Content material With JavaScript
This JavaScript code checks if the present window (self) shouldn’t be the top-most window (high). If it’s not, this implies the web page is in a body, iframe, or related, and the script redirects the topmost window to the URL of the present window. This successfully breaks out of the iframe.
<script sort='textual content/javascript'>
if (high !== self) high.location.href = self.location.href;
</script>There are a number of downsides to this strategy:
- Reliance on JavaScript: If the person has JavaScript disabled, this technique gained’t work.
- Delays: There is usually a slight delay earlier than the JavaScript executes, throughout which the framed model of your web site might nonetheless be seen.
- Cross-Origin Restrictions: In some conditions, the Similar Origin Coverage might forestall this script from working as meant. If the mum or dad doc is on a special area, it may not have the ability to entry
high.location.href. - Potential for Body-Busting-Busters: There are additionally scripts (referred to as frame-busting-busters) that may forestall frame-busting scripts from working.
The higher strategy is to make the most of HTTP response headers.
X-Body-Choices and Content material-Safety-Coverage
Each X-Body-Choices and Content material-Safety-Coverage (CSP) are HTTP response headers used to boost the safety of an internet site. They every serve barely completely different functions and have completely different ranges of flexibility.
X-Body-Choices is an older HTTP header particularly designed to regulate whether or not your web site might be embedded in a <body>, <iframe>, <embed>, or <object> on one other web site. It has three doable directives:
DENY– The web page can’t be displayed in a body, whatever the web site trying to take action.SAMEORIGIN– The web page can solely be displayed in a body on the identical origin because the web page itself.ALLOW-FROM uri– The web page can solely be displayed in a body on the required origin.
Nonetheless, X-Body-Choices is restricted in that it could actually’t deal with extra complicated situations, like permitting framing from a number of completely different origins or utilizing wildcards for subdomains. Not all browsers assist the ALLOW-FROM directive.
Content material-Safety-Coverage, however, is a way more versatile and highly effective HTTP header. Whereas it could actually do every part X-Body-Choices can do and rather more, its main objective is to forestall a variety of code injection assaults, together with cross-site scripting (XSS) and clickjacking. It really works by specifying a whitelist of trusted sources of content material (scripts, kinds, photographs, and many others.).
For controlling frames, CSP makes use of the frame-ancestors directive. You’ll be able to specify a number of sources, together with a number of domains and wildcard subdomains. Right here’s an instance:
cssCopy codeContent material-Safety-Coverage: frame-ancestors 'self' yourdomain.com *.domain2.com;
This could enable the web page to be framed by itself web site ('self'), on yourdomain.com, and on any subdomain of domain2.com.
CSP is being advisable as a alternative for X-Body-Choices, since it could actually deal with every part X-Body-Choices can do, and rather more. Whereas most fashionable browsers assist CSP, there may nonetheless be some outdated or much less widespread browsers that don’t absolutely assist it.
How To Cease Iframing Your Content material With HTML
There’s now a Content material-Safety-Coverage meta tag that may be deployed that disables the power to iframe your content material:
<meta http-equiv="Content material-Safety-Coverage" content material="frame-ancestors 'self' yourdomain.com">
The effectiveness of the HTML meta tag is restricted as a result of not all browsers respect the Content material-Safety-Coverage when set utilizing a meta tag.
How To Cease Iframing Your Content material With HTTP Headers
It’s higher to make use of the HTTP headers X-Body-Choices or Content material-Safety-Coverage to regulate framing. These choices are extra dependable, and safe, and work even when JavaScript is disabled. The JavaScript technique ought to solely be used as a final resort if you happen to don’t have management over the server to set HTTP headers. For every instance, exchange yourdomain.com together with your precise area.
Apache – Modify your .htaccess file as follows:
Header at all times set X-Body-Choices SAMEORIGIN
Header at all times set Content material-Safety-Coverage "frame-ancestors 'self' yourdomain.com"
Nginx – Modify your server block as follows:
add_header X-Body-Choices SAMEORIGIN;
add_header Content material-Safety-Coverage "frame-ancestors 'self' yourdomain.com";
IIS – do that by including the next to your net.config file:
<system.webServer>
<httpProtocol>
<customHeaders>
<add title="Content material-Safety-Coverage" worth="frame-ancestors 'self' yourdomain.com" />
</customHeaders>
</httpProtocol>
</system.webServer>WordPress – do that by including this code to your capabilities.php file:
operate add_security_headers() {
header('X-Body-Choices: SAMEORIGIN');
header("Content material-Safety-Coverage: frame-ancestors 'self' yourdomain.com");
}
add_action('send_headers', 'add_security_headers');These configurations will solely enable your web page to be embedded inside iframes on the precise area you specify, not on any area subdomains. If you wish to enable sure subdomains, you’ll need to record them explicitly, like subdomain1.yourdomain.com subdomain2.yourdomain.com, and so forth.
Enable Iframing Your Content material From A number of Domains
You’ll be able to specify a number of domains with the Content material-Safety-Coverage HTTP response header and the frame-ancestors directive. An area ought to separate every area. Right here’s an instance:
Content material-Safety-Coverage: frame-ancestors 'self' domain1.com domain2.com domain3.com;Apache – Modify your .htaccess file as follows:
Header at all times set X-Body-Choices SAMEORIGINHeader at all times set Content material-Safety-Coverage "frame-ancestors 'self' domain1.com domain2.com domain3.com"Nginx – Modify your server block as follows:
add_header X-Body-Choices SAMEORIGIN;add_header Content material-Safety-Coverage "frame-ancestors 'self' domain1.com domain2.com domain3.com";IIS – do that by including the next to your net.config file:
<system.webServer>
<httpProtocol>
<customHeaders>
<add title="X-Body-Choices" worth="SAMEORIGIN" />
<add title="Content material-Safety-Coverage" worth="frame-ancestors 'self' domain1.com domain2.com domain3.com" />
</customHeaders>
</httpProtocol>
</system.webServer>Enable Iframing Your Content material From A Wildcard Area
You can even specify a wildcard for all subdomains with the Content material-Safety-Coverage HTTP response header and the frame-ancestors directive. Listed below are examples of the Content material-Safety-Coverage code that must be up to date:
Content material-Safety-Coverage: frame-ancestors 'self' *.yourdomain.com;Apache – Modify your .htaccess file as follows:
Header at all times set Content material-Safety-Coverage "frame-ancestors 'self' *.yourdomain.com"
Nginx – Modify your server block as follows:
add_header Content material-Safety-Coverage "frame-ancestors 'self' *.domain1.com *.domain2.com *.domain3.com";IIS – do that by including the next to your net.config file:
<system.webServer>
<httpProtocol>
<customHeaders>
<add title="Content material-Safety-Coverage" worth="frame-ancestors 'self' *.yourdomain.com" />
</customHeaders>
</httpProtocol>
</system.webServer>
