X-Frame-Options

The X-Frame-Options HTTP 响应头是用来给浏览器 指示允许一个页面 可否在 <frame>, <iframe>, <embed> 或者 <object> 中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面,从而避免 clickjacking 攻击。

The added security is only provided if the user accessing the document is using a browser supporting X-Frame-Options. Content-Security-Policy HTTP 头中的 frame-ancestors 指令会替代这个非标准的 header。CSP 的 frame-ancestors 会在 Gecko 4.0 中支持,但是并不会被所有浏览器支持。然而 X-Frame-Options 是个已广泛支持的非官方标准,可以和 CSP 结合使用。

Header type Response header
Forbidden header name no

语法

X-Frame-Options 有三个可能的值:

X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/

指南

换一句话说,如果设置为 deny,不光在别人的网站 frame 嵌入时会无法加载,在同域名页面中同样会无法加载。另一方面,如果设置为sameorigin,那么页面就可以在同域名页面的 frame 中嵌套。

deny
表示该页面不允许在 frame 中展示,即便是在相同域名的页面中嵌套也不允许。
sameorigin
表示该页面可以在相同域名页面的 frame 中展示。
allow-from uri
表示该页面可以在指定来源的 frame 中展示。

例子

Note: 设置 meta 标签是无效的!例如 <meta http-equiv="X-Frame-Options" content="deny"> 没有任何效果。不要这样用!只有当像下面示例那样设置 HTTP 头 X-Frame-Options 才会生效。

配置 Apache

配置 Apache 在所有页面上发送 X-Frame-Options 响应头,需要把下面这行添加到 'site' 的配置中:

Header always set X-Frame-Options "sameorigin"

要将 Apache 的配置 X-Frame-Options 设置成 deny , 按如下配置去设置你的站点:

Header set X-Frame-Options "deny"

要将 Apache 的配置 X-Frame-Options 设置成 allow-from,在配置里添加:

Header set X-Frame-Options "allow-from https://example.com/"

配置 nginx

配置 nginx 发送 X-Frame-Options 响应头,把下面这行添加到 'http', 'server' 或者 'location' 的配置中:

add_header X-Frame-Options sameorigin always;

配置 IIS

配置 IIS 发送 X-Frame-Options 响应头,添加下面的配置到 Web.config 文件中:

<system.webServer>
  ...

  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="sameorigin" />
    </customHeaders>
  </httpProtocol>

  ...
</system.webServer>

配置 HAProxy

配置 HAProxy 发送 X-Frame-Options 头,添加这些到你的前端、监听 listen,或者后端的配置里面:

rspadd X-Frame-Options:\ sameorigin

或者,在更加新的版本中:

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

配置 Express

要配置 Express 可以发送 X-Frame-Options header,你可以用借助了 frameguard 来设置头部的 helmet。在你的服务器配置里面添加:

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

或者,你也可以直接用 frameguard

const frameguard = require('frameguard')
app.use(frameguard({ action: 'sameorigin' }))

结果

在 Firefox 尝试加载 frame 的内容时,如果 X-Frame-Options 响应头设置为禁止访问了,那么 Firefox 会用 about:blank 展现到 frame 中。也许从某种方面来讲的话,展示为错误消息会更好一点。

规范

规范 标题
RFC 7034 HTTP Header Field X-Frame-Options

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
X-Frame-OptionsChrome Full support 4Edge Full support YesFirefox Full support 3.6.9IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
ALLOW-FROMChrome No support NoEdge Full support YesFirefox No support 18 — 70IE Full support 8Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 18Opera Android ? Safari iOS No support NoSamsung Internet Android No support No
SAMEORIGINChrome Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Chrome 61, this applies to all of a frame's ancestors.
Edge ? Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Firefox 59, this applies to all of a frame's ancestors.
IE Full support 8Opera Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Opera 48, this applies to all of a frame's ancestors.
Safari Full support YesWebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Chrome 61, this applies to all of a frame's ancestors.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Chrome 61, this applies to all of a frame's ancestors.
Firefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Firefox 59, this applies to all of a frame's ancestors.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Opera 48, this applies to all of a frame's ancestors.
Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

参见