How to configure frames with X-Frame-Options header

This article describes how to configure access to frame content using the X-Frame-Options header.

Loading frame content

When you try to view a web page that includes one or more frames, you may experience an issue where the frame content does not load.

For example, in the Mozilla Firefox web browser, you see only a blank area where the frame content should appear on the page. Additionally, the Developer Tools console displays an error message that resembles the following:

Load denied by X-Frame-Options: "sameorigin" from "https://example.com/", site does not permit cross-origin framing from "https://example.com/test.html"

In the Google Chrome browser, you see the following content:

Additionally, the Developer Tools console displays an error message that resembles the following:

Refused to display 'https://example.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

These types of problems occur when a web server sends an X-Frame-Options HTTP header whose value is one of the following:

• sameorigin: When the X-Frame-Options header is set to sameorigin, content can only be loaded in a frame that has the same origin as the page itself. For example, if the server at example-1.com sends the X-Frame-Options header set to sameorigin, then a page at example-2.com cannot load content from example-1.com in a frame.
• deny: When the X-Frame-Options header is set to deny, content cannot be loaded in a frame at all.

Configuring the X-Frame-Options header

The X-Frame-Options header is sent by default with the value sameorigin. Therefore, if you want to share content between multiple sites that you control, you must disable the X-Frame-Options header. To do this, add the following line to the .htaccess file in the directory where you want to allow remote access:

Header always unset X-Frame-Options

To verify that the server is not sending the X-Frame-Options header, you can use the curl command. Type the following command at the command line, replacing example.com with your own domain name:

curl -I http://example.com

More Information

For more information about the X-Frame-Options header, please visit https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options.