The X-Frame-Options
HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}} . Sites can use this to avoid {{interwiki("wikipedia", "clickjacking")}} attacks, by ensuring that their content is not embedded into other sites.
Header type | {{Glossary("Response header")}} |
---|---|
{{Glossary("Forbidden header name")}} | no |
Syntax
There are three possible directives for X-Frame-Options
:
X-Frame-Options: DENY X-Frame-Options: SAMEORIGIN X-Frame-Options: ALLOW-FROM https://example.com/
Directives
If you specify DENY
, not only will attempts to load the page in a frame fail when loaded from other sites, attempts to do so will fail when loaded from the same site. On the other hand, if you specify SAMEORIGIN
, you can still use the page in a frame as long as the site including it in a frame is the same as the one serving the page.
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 as the page itself.
ALLOW-FROM uri
- The page can only be displayed in a frame on the specified origin.
Examples
Note: Setting the meta tag is useless! For instance, <meta http-equiv="X-Frame-Options" content="deny">
has no effect. Do not use it! Only by setting through the HTTP header like the examples below, X-Frame-Options
will work.
Configuring Apache
To configure Apache to send the X-Frame-Options
header for all pages, add this to your site's configuration:
Header always append X-Frame-Options SAMEORIGIN
Configuring nginx
To configure nginx to send the X-Frame-Options
header, add this either to your http, server or location configuration:
add_header X-Frame-Options SAMEORIGIN;
Configuring IIS
To configure IIS to send the X-Frame-Options
header, add this your site's Web.config file:
<system.webServer> ... <httpProtocol> <customHeaders> <add name="X-Frame-Options" value="SAMEORIGIN" /> </customHeaders> </httpProtocol> ... </system.webServer>
Configuring HAProxy
To configure HAProxy to send the X-Frame-Options
header, add this to your front-end, listen, or backend configuration:
rspadd X-Frame-Options:\ SAMEORIGIN
Specifications
Specification | Title |
---|---|
{{RFC("7034")}} | HTTP Header Field X-Frame-Options |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatChrome("4.0")}} | {{CompatGeckoDesktop("1.9.2")}} | {{CompatIE(8.0)}} | {{CompatOpera(10.5)}} | {{CompatSafari(4.0)}} |
ALLOW-FROM support | {{CompatNo}} | {{CompatGeckoDesktop("18.0")}}[1] | {{CompatIE("8.0?")}} | {{CompatUnknown}} | {{CompatNo}}[2] |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
ALLOW-FROM support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] See {{bug(690168)}}.
[2] See {{webkitbug(94836)}}.