前言
所述X-Frame-OptionsHTTP
响应报头可以被用来指示一个浏览器是否应该被允许在一个以呈现页面<frame>
,<iframe>
或<object>
。通过确保其内容未嵌入其他网站,网站可以使用此功能来避免 点击劫持 攻击。
点击劫持(ClickJacking)是一种视觉上的欺骗手段。攻击者使用一个透明的iframe,覆盖在一个网页上,然后诱使用户在网页上进行操作,此时用户将在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置,可以诱使用户恰好点击在iframe页面的一些功能性按钮上。
X-Frame-Options
有三种可能的指示:
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM https://example.com/
作用:
DENY
,从其他站点加载时,不仅尝试在框架中加载页面失败,从同一站点加载时尝试这样做将失败。SAMEORIGIN
,只要包含在框架中的站点与为页面提供服务的站点相同,仍然可以在框架中使用该页面。ALLOW-FROM
页面只能显示在指定网址的框架中。ALLOWALL
表示该页面允许全部来源域名的frame展示。
ALLOW-FROM uri
Deprecated**
这是一个被弃用的指令,不再适用于现代浏览器,请不要使用它。在支持旧版浏览器时,页面可以在指定来源的 frame 中展示。请注意,在旧版 Firefox 上,它会遇到与 SAMEORIGIN
相同的问题——它不会检查 frame 所有的祖先页面来确定他们是否是同一来源。
HTTP 响应头Content-Security-Policy 有一个 frame-ancestors 指令,你可以使用这一指令来代替。
代码语言:javascript复制Content-Security-Policy: frame-ancestors <source>;
Content-Security-Policy: frame-ancestors <source> <source>;
配置
配置 Apache
要配置 Apache X-Frame-Options
为所有页面发送响应头,请将其添加到您网站的配置中:
Header always set X-Frame-Options "SAMEORIGIN"
要配置 Apache 来设置X-Frame-Options
拒绝,请将其添加到您网站的配置中:
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;
如果允许多个网址 使用空格隔开就好了!
代码语言:javascript复制add_header X-Frame-Options 'ALLOW-FROM https://a.psvmc.cn https://b.psvmc.cn';
允许所有
代码语言:javascript复制add_header X-Frame-Options ALLOWALL;
配置 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
标题,请将其添加到前端,监听或后端配置中:
rspadd X-Frame-Options: SAMEORIGIN
在较新的版本中:
代码语言:javascript复制http-response set-header X-Frame-Options SAMEORIGIN
配置 Express
要配置 Express 以发送 X-Frame-Options
响应头,你可以使用借助了 frameguard 的 helmet 来设置首部。在你的服务器配置里面添加:
const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: 'SAMEORIGIN' }));
或者,你也可以直接用 frameguard:
代码语言:javascript复制const frameguard = require('frameguard')
app.use(frameguard({ action: 'SAMEORIGIN' }))
测试
测试网站是否设置了X-Frame-Options
将如下的代码中iframe
中的链接换成待测网站的,保存为.html
文件,本地打开。
如果打不开待测的网站,则说明配置成功了。
代码语言:javascript复制<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" >
<title>点击劫持测试</title>
</head>
<body>
<iframe src="http://www.psvmc.cn/" width="600" height="600" frameborder="10"> </iframe>
</body>
</html>
访问的时候会显示
控制台中报错
代码语言:javascript复制Refused to display 'https://www.psvmc.cn/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.