How to prevent a website from being loaded in an iframe

Today we will show you how to prevent a website from being loaded in an iframe. The `X-Frame-Options` HTTP response header can be used to block a website from loading in iframe.

Checkout more articles on JavaScript|PHP/ReactJS

• Get the day name of date using JavaScript
• Remove all whitespace from a string in JavaScript
• Upload image using PHP
• Pass webpack environment variables in HTML
• Test an input field using the React Testing Library

There are three different possible values for `X-Frame-Options`:

• `DENY` - The page cannot be displayed in a frame, regardless of the site attempting to do so.
• `SAMEORIGIN` - The page can only be displayed in a frame on the same origin.
• `ALLOW-FROM uri` - The page can only be displayed in a frame on the specified origin.

Multiple ways to prevent a website from being loaded in an iframe

1. Using `meta` tag
2. Configuring Apache
3. Configuring nginx
4. Configuring IIS
5. Configuring HAProxy
6. Configuring Express
7. Configuring .htaccess

1. Using `meta` tag

Use the following meta tags to prevent the access.

Deny access from an iframe for all

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

Deny access from other websites

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

Note: Setting X-Frame-Options inside the `<meta>` element is useless! For instance, `<meta http-equiv="X-Frame-Options" content="deny">` has no effect. Do not use it! `X-Frame-Options` works only by setting through the HTTP header, as in the examples below.

2. Configuring Apache

To configure Apache to send the `X-Frame-Options` header for all pages, add the following code to your site's configuration.

Header always set X-Frame-Options "SAMEORIGIN"

Use the following code to configure Apache to set the `X-Frame-Options` DENY.

Header set X-Frame-Options "DENY"

3. Configuring nginx

Similarly use the following code for the nginx configuration.

add_header X-Frame-Options SAMEORIGIN always;

4. Configuring IIS

Use the following code to update the configuration for IIS server.

<system class="webserver">
  ...
  ...
  <httpprotocol>
    <customheaders>
      <add name="X-Frame-Options" value="SAMEORIGIN">
    </add></customheaders>
  </httpprotocol>
  ...
  ...
</system>

5. Configuring HAProxy

Let’s use the following code to configure HAProxy.

rspadd X-Frame-Options:\ SAMEORIGIN

For newer versions

http-response set-header X-Frame-Options SAMEORIGIN

6. Configuring Express

We need to use the helmet to update configuration in the express server.

const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: 'SAMEORIGIN' }));

7. Configuring .htaccess

To manage the same type of configuration in PHP, you can also use the .htaccess file. Add the following code in your file.

<ifmodule mod_headers.c="">
   Header always set X-Frame-Options "SAMEORIGIN"
</ifmodule>

After successful configuration, when you load the website into the iframe, you will see the X-Frame-Options as shown in the image below.

Output - How to prevent a website from being loaded in an iframe - Clue Mediator

Check this link for more information about the X-Frame-Options.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂