A few days ago, I discovered that someone had been embedding one of my websites in iframes on their website.
Of course, they hadn’t asked for my permission prior to doing so. And they didn’t respond to my email after I wrote to them. So I decided to look for a technical solution to solve this problem once and for all.
That technical solution, since my website was hosted on an Apache server, was to add a few lines of code to the .htaccess file in the root directory of my website.
How to Prevent Others From iFraming Your Website
If you want to stop others from iframing your website and your website is hosted on an Apache server, you can do this by setting the X-Frame-Options HTTP response header to DENY or SAMEORIGIN inside the .htaccess file.
According to MDN Web Docs, the X-Frame-Options HTTP response header tells the user’s browser whether or not it is allowed to render a specific page in a <frame>, <iframe>, <embed>, or <object> DOM element.
Setting it to DENY means that your website can’t be embedded anywhere, including inside your own website. (This is probably the solution that nine people out of ten who read this article will want to go for.)
Setting it to SAMEORIGIN means that your website can only be embedded inside your own website.
These two options allow you to protect your website from copyright infringement as well as clickjacking attacks.
How to set X-Frame-Options to DENY:
To set the X-Frame-Options HTTP response header to DENY for all pages on your website, add the following code to the .htaccess file in its root directory:
<IfModule mod_headers.c>
Header set X-Frame-Options "DENY"
</IfModule>How to set X-Frame-Options to SAMEORIGIN:
To set the X-Frame-Options HTTP response header to SAMEORIGIN for all pages on your website, add the following code to the .htaccess file in its root directory:
<IfModule mod_headers.c>
Header always set X-Frame-Options "SAMEORIGIN"
</IfModule>In both of the code snippets I’ve shared with you, you will notice that there’s a conditional statement that checks whether or not the mod_headers.c Apache module is enabled.
That’s because, for this solution to work, you need to have the mod_headers.c Apache module enabled on your server. If you’re on a shared hosting service, this is probably already the case. And if you’re on a VPS, you may need to enable it manually if it isn’t.
The conditional statements are not mandatory, and you can just copy/paste line 2 of both solutions instead. However, this will throw an error if the Apache module in question is not active for some reason.
In terms of browser compatibility, the X-Frame-Options HTTP response header is supported by all modern browsers, as well as Internet Explorer version 8 and higher. (For complete information about browser compatibility, refer to CanIUse.com).
Alternative Solutions
Content-Security-Policy (CSP)
The frame-ancestors directive of the Content-Security-Policy HTTP response header is a more modern directive that does the same as X-Frame-Options. However, it is supported by fewer (and newer) browsers.
301 Redirect Based on Referrer
One Stack Overflow user suggested using RewriteEngine to 301-redirect users from a specific referrer to a specific page on your website.
The Bottom Line
If you need to protect your website from content theft or a clickjacking attack, the X-Frame-Options HTTP response header is a clean and simple technical solution that prevents the user’s (or the search engine crawler’s) browser from rendering your site inside an iframe in the first place.