HTTP Headers

X Frame Options

HTTP Header

Note:
For more comprehensive options than offered by this header, see the frame-ancestors directive in a Content-Security-Policy header.

The HTTP X-Frame-Options response header can be used to indicate whether a browser should be allowed to render a page in a <frame>, <embed>, <object>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

The added security is provided only if the user accessing the document is using a browser that supports X-Frame-Options.

Syntax

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

Directives

DENY

If you specify DENY, the browser will block loading the page in a frame when accessed from other sites. Additionally, attempts to load the page in a frame from the same site will also be prevented.

SAMEORIGIN

If you specify SAMEORIGIN, the page can be embedded in a frame only if the parent page is from the same origin as the page itself.

Example

Warning:

Setting X-Frame-Options inside the <meta> element (e.g., <meta http-equiv="X-Frame-Options" content="deny">) has no effect. X-Frame-Options is only enforced via HTTP headers, as shown in the examples below.

To configure your web server to send the X-Frame-Options header for all pages, follow the instructions below based on your server type.

In Apache, add the following to your site’s configuration:

Set X-Frame-Options to SAMEORIGIN to allow pages only from the same origin:

Set X-Frame-Options to DENY to prevent your pages from being embedded in frames:

In Nginx, add the following to your http, server, or location configuration to send the X-Frame-Options header:

To set the header to DENY:

For IIS, include the following in your Web.config file:

For HAProxy, add this to your front-end, listen, or backend configuration:

To specify SAMEORIGIN:

In newer versions of HAProxy, use:

If you’re using Node.js with Express, you can set X-Frame-Options to SAMEORIGIN with Helmet middleware as shown below:

<code>const helmet = require("helmet"); const app = express(); app.use( helmet({ xFrameOptions: { action: "sameorigin" }, }), );</code>

How to Modify Header using Requestly

Requestly is a handy Chrome extension that helps you change HTTP headers, including the X-Frame-Options header. Adjusting this header can be important when you want to test or fix how your web pages are displayed inside frames or iframes. Steps to Modify the X-Frame-Options Header:

Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
Add a new header modification:
- Under “Action”, select “Add” or “Override”.
- In the “Header Name” field, enter X-Frame-Options.
- In the “Header Value” field, enter your preferred option like DENY, SAMEORIGIN, or ALLOW-FROM uri.
Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-site.com/*).
Save the rule.

After setting this up, Requestly will apply the new X-Frame-Options header to all matching requests, enabling you to test how your site behaves when embedded in frames or prevent clickjacking attacks by controlling framing permissions.