How to Prevent the Display of “Getting Framed” in HTML ?

When you create a website, you want to ensure that your content is displayed in a safe and secure manner. One potential security vulnerability that you may face is the risk of your website being embedded in an iframe, also known as “getting framed”. 

An iframe is an HTML element that allows you to embed another website within your own page. While iframes can be useful for displaying external content within your website, they can also be used maliciously to display your website within a fake page or steal information from your website’s visitors.

Syntax:

X-Frame-Options: DENY

The X-Frame-Options header is used to control whether a website can be embedded in an iframe. It has 3 possible values.

• DENY: Prevents the website from being embedded in any iframe, regardless of domain.
• SAMEORIGIN: Allows the website to be embedded in iframes that are hosted on the same domain.
• ALLOW-FROM uri: Allows the website to be embedded in an iframe that is hosted on a specified URI.

The X-Frame-Options header can be set in the HTTP response of a website.

Steps for preventing the display of “Getting framed in HTML”:

Step 1: Determine the web server you are using. The steps to set the X-Frame-Options header will depend on the web server you are using.

Step 2: Set the X-Frame-Options header in the HTTP response of your website. This can be done in a few different ways.

• Apache: Add the following line to your .htaccess file or to your Apache virtual host configuration,

Header always set X-Frame-Options "DENY"

• Nginx: Add the following line to your server configuration.

add_header X-Frame-Options "DENY";

• IIS: Follow these steps to set the X-Frame-Options header using IIS Manager:
  • Open IIS Manager and navigate to the website you want to configure.
  • Click on “HTTP Response Headers” in the “IIS” section.
  • Click “Add” in the right-hand menu and select “X-Frame-Options” from the dropdown menu.
  • Set the value to “DENY” and click “OK”.

Step 3: Test that framing has been prevented. You can use a browser developer tool to check if the X-Frame-Options header is being set correctly.

Need for the website to be placed in a frame: The need for a website to be placed in the frame may arise when a website wants to display content from another website within its own website. This is commonly done for embedding videos, displaying ads, or showing content from third-party services.

The Backward-compatible method that prevents the website to place in the iframe: One backward-compatible method to prevent a website from being placed in an iframe is to use the X-Frame-Options header. This header can be set to one of three values:

• DENY: This prevents the website from being placed in a frame under any circumstances.
• SAMEORIGIN: To allow the website to be placed in a frame only if the frame is on the same domain as the website.
• ALLOW-FROM URI: To allow the website to be placed in a frame only if the frame is on a specified URI.

This header can be added to the server’s response for all pages using the following code in the server-side language like PHP.

header("X-Frame-Options: SAMEORIGIN");

The modern strategies with the help of the Content Security Policy

The more modern and flexible strategy for preventing a website from being placed in an iframe is to use Content-Security-Policy (CSP) header. This header allows the website to specify a policy that controls which sources of content can be loaded on the page, including frames.

To prevent the website from being placed in an iframe, the frame-ancestors directive can be used to restrict the domains that are allowed to embed the website. For example, the following directive only allows the website to be embedded on pages from the same domain.

Content-Security-Policy: frame-ancestors 'self';

X-FRAME-OPTIONS and Content-Security-Policy headers: The combining of both the X-Frame-Options and Content-Security-Policy headers can provide additional security against clickjacking attacks. For example, the following code sets the X-Frame-Options header to SAMEORIGIN and the Content-Security-Policy header to only allow the website to be embedded on pages from the same domain.

header("X-Frame-Options: SAMEORIGIN");
header("Content-Security-Policy: frame-ancestors 'self';");

Example 1: The following code demonstrates the prevention of the display of “Getting framed” in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Prevent Framing Example</title>
    <meta http-equiv="X-Frame-Options"
          content="DENY">
</head>

<body>
    <h1 style="color:green">
          GeeksforGeeks
      </h1>
    <h3>
          Prevent the Display of "Getting Framed" in HTML?
      </h3>
    <h1>
          Hello World
      </h1>
    <p>
          This page cannot be displayed within an iframe.
      </p>
</body>

</html>

Output:

Example 2: This is another example that demonstrates the prevention of the display of “Getting framed in HTML” with the help of PHP.

PHP

<?php
    header('X-Frame-Options: DENY');
?>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>GeeksforGeeks</title>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Prevent the display of "Getting framed" in HTML?</h3>
    <p>This page cannot be displayed within an iframe.</p>
</body>

</html>

Output: