A customer to my web site as soon as knowledgeable me when he clicked on considered one of my hyperlinks on Twitter; he was delivered to my web site with an enormous 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 folk, my web site might seem 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 shouldn’t be at all times malicious, although. We lately 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 explicit 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 performing some 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 (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 strategy:
- Reliance on JavaScript: If the consumer has JavaScript disabled, this technique received’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 Identical Origin Coverage might forestall this script from working as supposed. If the father or mother doc is on a unique 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 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 totally different functions and have totally 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 proscribed in that it will possibly’t deal with extra advanced situations, like permitting framing from a number of totally different origins or utilizing wildcards for subdomains. Not all browsers help the ALLOW-FROM directive.
Content material-Safety-Coverage, alternatively, is a way more versatile and highly effective HTTP header. Whereas it will possibly do every part X-Body-Choices can do and rather more, its major 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, types, photographs, and many others.).
For controlling frames, CSP makes use of the frame-ancestors directive. You possibly can 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 may 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 will possibly deal with every part X-Body-Choices can do, and rather more. Whereas most trendy browsers help CSP, there may nonetheless be some previous or much less widespread browsers that don’t absolutely help 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 proscribed 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 in case you don’t have management over the server to set HTTP headers. For every instance, change yourdomain.com along 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 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 capabilities.php file:
perform 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.
Permit Iframing Your Content material From A number of Domains
You possibly can 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 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
It’s also possible to 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 internet.config file:
<system.webServer>
<httpProtocol>
<customHeaders>
<add title="Content material-Safety-Coverage" worth="frame-ancestors 'self' *.yourdomain.com" />
</customHeaders>
</httpProtocol>
</system.webServer>
