How to prevent your website from being embedded in Iframes
In this article, we will cover what an iFrame is, how it works, why you should prevent your website from being embedded by other websites, and how to do it.
What is an iFrame?
An iFrame (in full Inline Frame) is an HTML element used inside a webpage to load/embed another HTML document(webpage) inside the current page.
Iframes are commonly used when embedding external content from other sources into a website such as Google map, Youtube videos, Social Media plugins, etc.
An iframe can be placed at any place on a web page.
It is specified using the HTML tag <iframe>.
Syntax
<iframe src="URL"></iframe>
Example
<iframe src="https://www.webdevsplanet.com"></iframe>
The above embed the whole website into an iFrame, but you have to specify the height and width that specify the amount of space that the iframe should occupy eg. in the example below:
<iframe src="https://www.webdevsplanet.com" width="100%" height="550" ></iframe>
Iframe tag supports a variety of attributes that allow styling among other specifications. You can also style the iframe with CSS or javascript.
The code below loads this website in an iframe.
<!DOCTYPE html>
<html>
<head>
<title>Web Devs Planet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<iframe src="https://www.webdevsplanet.com"></iframe>
<script>
$(function(){
var height = $(window).height();
var width = $(window).width();
$("iframe").css({"height":height,"width":width,"margin":"-10px","border":"none"});
});
</script>
</body>
</html>
The above code is a simple HTML code with iFrame as the only element. I have embedded this website and used CSS in jQuery to style it and make it fit in the browser window just the same way as the original domain(https://www.webdevsplanet.com). You can replace the src with your website or any other website to test.
As you can see in the above image, you cannot easily tell that the website is loaded in the iFrame.
What can go wrong when your website gets framed?
Clickjacking - An attacker loads your website in an iFrame and tricks the visitors into thinking they are on your website. He/she overlay transparent links and buttons on top of your website links/buttons.
Users will click on them thinking they are clicking on the real links. This can cause the users to unwillingly visit malicious web pages, download malware, provide sensitive information such as credentials, or transfer money.
Unauthorized republishing of content - Other website owners may load your unique website content on their web pages in iframes instead of asking you for permission to display it on their websites, or linking to your page.
How to prevent your website from being loaded in iFrames
There are 2 different ways to do that:
- Using
X-Frame-OptionsHTTP response header - Using JavaScript
Using X-Frame-Options HTTP response header
Sending an X-Frame-Options HTTP response header tells the browser how to react when your website is being loaded.
Adding an X-Frame-Options options header via the .htaccess file:
Header set X-Frame-Options SAMEORIGIN
Adding an X-Frame-Options options header in your PHP code
<?php
header('X-Frame-Options: SAMEORIGIN');
?>
The above header prevents your website from being loaded in iframes on other websites but can be loaded in other pages within the same domains.
The SAMEORIGIN option allows the page to be embedded in an iframe only if the parent page is from the same domain, which presumably is also your code.
SAMEORIGIN option can be replaced with DENY, which prevents browsers from loading the page in an iframe regardless of the domain name of the parent page.
When you try to load a page with X-Frame-Options header set as SAMEORIGIN or DENY in an iframe, the browser will display an error that looks as below:
Using JavaScript
You can write JavaScript code that checks whether your web page is loaded as the top-level window. If it is not in the top-level window, then it assumes the page has been embedded in an iframe and redirects to the real original page.
The code below will do exactly that:
<script>
if(window.top != window.self){
top.location.href = document.location.href;
}
</script>
