A customer to my web site as soon as knowledgeable me when he clicked on one in every of 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 performing some testing. There was nothing incorrect with my web site – the issue was the hyperlink.
The hyperlink on one other web site produced a toolbar up prime that inspired folks to click on on a malicious hyperlink whereas loading my web site in an iframe beneath. To most people, my web site might look like spreading malicious code. I wouldn’t say I like several web site that masses my web site inside an iframe, so I did what any cheap geek would do… I loaded up a body breaker.
Iframing your web site will not be all the time malicious, although. We not too long ago shared a software, Sniply, so as to add a call-to-action (CTA) to any web site hyperlink you share. It does this by embedding your complete 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 hassle I’ve put into Martech Zone, so I don’t need anybody to iframe my content material, even with a link-share platform. In performing some analysis, there are fairly a couple of methods to deal with this.
How To Cease Iframing Your Content material With JavaScript
This JavaScript code checks if the present window (self) will not be the top-most window (prime). If it’s not, this implies the web page is in a body, iframe, or comparable, and the script redirects the topmost window to the URL of the present window. This successfully breaks out of the iframe.
<script kind='textual content/javascript'>
if (prime !== self) prime.location.href = self.location.href;
</script>There are a number of downsides to this method:
- Reliance on JavaScript: If the consumer has JavaScript disabled, this methodology gained’t work.
- Delays: There generally is 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 stop this script from working as supposed. If the mum or dad doc is on a distinct area, it won’t have the ability to entry
prime.location.href. - Potential for Body-Busting-Busters: There are additionally scripts (referred to as frame-busting-busters) that may stop frame-busting scripts from working.
The higher method 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 a web 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 making an attempt 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.
Nevertheless, X-Body-Choices is restricted in that it may possibly’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, alternatively, is a way more versatile and highly effective HTTP header. Whereas it may possibly do every part X-Body-Choices can do and rather more, its main function 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, types, pictures, and many others.).
For controlling frames, CSP makes use of the frame-ancestors directive. You may 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 permit the web page to be framed by itself web site ('self'), on yourdomain.com, and on any subdomain of domain2.com.
CSP is being really useful as a substitute for X-Body-Choices, since it may possibly deal with every part X-Body-Choices can do, and rather more. Whereas most fashionable browsers assist CSP, there would possibly nonetheless be some previous or much less frequent 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 flexibility 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 methodology ought to solely be used as a final resort in case you don’t have management over the server to set HTTP headers. For every instance, substitute yourdomain.com together with your precise area.
Apache – Modify your .htaccess file as follows:
Header all the time set X-Body-Choices SAMEORIGIN
Header all the time 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 internet.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 features.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 permit your web page to be embedded inside iframes on the precise area you specify, not on any area subdomains. If you wish to permit sure subdomains, you’ll need to record them explicitly, like subdomain1.yourdomain.com subdomain2.yourdomain.com, and so forth.
Permit Iframing Your Content material From A number of Domains
You may 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 all the time set X-Body-Choices SAMEORIGINHeader all the time 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 internet.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>Permit Iframing Your Content material From A Wildcard Area
You may also specify a wildcard for all subdomains with the Content material-Safety-Coverage HTTP response header and the frame-ancestors directive. Listed here 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 all the time 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 internet.config file:
<system.webServer>
<httpProtocol>
<customHeaders>
<add title="Content material-Safety-Coverage" worth="frame-ancestors 'self' *.yourdomain.com" />
</customHeaders>
</httpProtocol>
</system.webServer>
