X-Frame-Options安全警告处理

发表于 | 分类于
X-Frame-Options安全警告处理

前言

所述X-Frame-OptionsHTTP 响应报头可以被用来指示一个浏览器是否应该被允许在一个以呈现页面<frame>，<iframe>或<object>。通过确保其内容未嵌入其他网站，网站可以使用此功能来避免 点击劫持 攻击。

点击劫持（ClickJacking）是一种视觉上的欺骗手段。攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在网页上进行操作，此时用户将在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置，可以诱使用户恰好点击在iframe页面的一些功能性按钮上。

X-Frame-Options有三种可能的指示：

1
2
3
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 指令，你可以使用这一指令来代替。

1
2
Content-Security-Policy: frame-ancestors <source>;
Content-Security-Policy: frame-ancestors <source> <source>;

配置

配置 Apache

要配置 Apache X-Frame-Options为所有页面发送响应头，请将其添加到您网站的配置中：

1
Header always set X-Frame-Options "SAMEORIGIN"

要配置 Apache 来设置X-Frame-Options拒绝，请将其添加到您网站的配置中：

1
Header set X-Frame-Options "DENY"

要配置 Apache 以将其设置X-Frame-Options为ALLOW-FROM特定主机，请将其添加到您网站的配置中：

1
Header set X-Frame-Options "ALLOW-FROM https://example.com/"

配置 Nginx

要配置 nginx 发送X-Frame-Options头文件，请将其添加到您的 http，server 或者 location 的配置中：

1
add_header X-Frame-Options SAMEORIGIN;

如果允许多个网址 使用空格隔开就好了！

1
add_header X-Frame-Options 'ALLOW-FROM  https://a.psvmc.cn  https://b.psvmc.cn';

允许所有

1
add_header X-Frame-Options ALLOWALL;

配置 IIS

要配置 IIS 发送X-Frame-Options标题，请添加此站点的Web.config文件：

1
2
3
4
5
6
7
8
9
<system.webServer>

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

</system.webServer>

配置 HAProxy

要配置 HAProxy 发送X-Frame-Options标题，请将其添加到前端，监听或后端配置中：

1
rspadd X-Frame-Options:\ SAMEORIGIN

在较新的版本中：

1
http-response set-header X-Frame-Options SAMEORIGIN

配置 Express

要配置 Express 以发送 X-Frame-Options 响应头，你可以使用借助了 frameguard 的 helmet 来设置首部。在你的服务器配置里面添加：

1
2
3
const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: 'SAMEORIGIN' }));

或者，你也可以直接用 frameguard：

1
2
const frameguard = require('frameguard')
app.use(frameguard({ action: 'SAMEORIGIN' }))

测试

测试网站是否设置了X-Frame-Options
将如下的代码中iframe中的链接换成待测网站的，保存为.html文件，本地打开。

如果打不开待测的网站，则说明配置成功了。

1
2
3
4
5
6
7
8
9
10
<!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>

访问的时候会显示

image-20220819174353008

控制台中报错

1
Refused to display 'https://www.psvmc.cn/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.