How to Prevent Web Page from Being Loaded in Iframe

Iframes are widely used to host other website’s contents on your site, such as social media streams. But sometimes people try to host your web pages on their domains within an iframe and pass it as their own website. This is known as unauthorized publishing. On the other hand, people may also display your web pages on their domains using an iframe and prompt people to click on a link or button overlaid on top of your website’s content, which takes them to another website. Such malicious practices are known as clickjacking or UI redress. Obviously, you need to block such attempts from your website. In this article, we will learn how to prevent web page from being loaded in iframe. If your website does not require other websites to be able to display your content on their sites, it is advisable to follow the steps mentioned below.

How to Prevent Web Page from Being Loaded in Iframe

There are several ways to prevent web page from being loaded in iframe.

1. Using header tags

If you add header tag X-Frame-Options on your web page and set it to SAMEORIGIN, then browser will check the domain of website calling your web page and display it only when your domain loads it. In other words, it will completely disable loading of your web page in iframe. You will need to add this tag on all pages which you want to prevent from being loaded in iframe. Here is a sample PHP code for it.

<?PHP header('X-Frame-Options: SAMEORIGIN'); ?>

You can also add this in meta tags on your website’s html page/template.

<meta http-equiv="X-Frame-Options" content="deny">

Some older browsers do not support X-Frame-Option. In such cases, you can try the following option. It works on all browsers where JS is enabled.

2. Using JavaScript & CSS

You can also use a combination of CSS and JavaScript to disable pages from being loaded in iframes. Here is a sample CSS style tag+JS code for the same.

<style id="antiClickjack">body{display:none !important;}</style>
<br>
<script type="text/javascript"> if (self === top) { var antiClickjack = document.getElementById("antiClickjack"); antiClickjack.parentNode.removeChild(antiClickjack); } else { top.location = self.location; } </script>

In the above code, we define a style tag where we set the body’s display attribute to none, basically hiding it.

In our JavaScript code, we check that the web page loaded is indeed the top level window and not inside an iframe. Otherwise, it will simply redirect the user.

In this article, we have learnt couple of simple yet effective ways to prevent web pages from being loaded in iframe.

Also read:

How to Replace Values in Pandas Dataframe
How to Add New Column to Existing DataFrame
How to Change Element Class Property Using JavaScript
How to Get Value of Data Attribute in JavaScript
How to Shuffle Array in JavaScript