MENU

HTML实践-X-Frame-Option

December 9, 2019 • doIt

在使用<iframe>时,可能会遇到“单击劫持”等不安全的问题。虽然<iframe>有很多安全性的问题,但只需要谨慎一点,没有必要害怕和不使用<iframe>元素。

最近在研究<iframe>时,发现一个配置,他提供一组HTTP header,旨在提高HTML的安全性。在使用<iframe>等嵌入元素时,可以配置CSP的X-Frame-Optionheader来提高安全性。

单击劫持是一种常见的iframe攻击,黑客将隐藏的iframe嵌入到您的文档中(或将您的文档嵌入到他们自己的恶意网站),并使用它来捕获用户的交互。这是误导用户或窃取敏感数据的常见方式。

X-Frame-Options

X-Frame-Options是用来给浏览器指示是否允许一个页面能否嵌入<iframe>等嵌入元素的header。这样可以确保当前站点没有被嵌入到他人的或未允许的站点内。是个很简单,但能有效提高安全性的header标识。

早在2009年,IE8引入了一个新的http header:X-Frame-Options。并且其他浏览器也随后引入了该header。目前的浏览器应该不会出现不支持X-Frame-Options情况。

X-Frame-Options目前被公开为RFC 7034,但还不是一个互联网标准,仅供参考。w3c的CSP (Content Security Policy) 也提供了一个frame-ancestors,旨在为了淘汰X-Frame-Options

语法

有三个语法选项:

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

如果设置为 deny,不光在别人的网站 frame 嵌入时会无法加载,在同域名页面中同样会无法加载。另一方面,如果设置为sameorigin,那么页面就可以在同域名页面的 frame 中嵌套。而配置为allow-from uri则允许在指定的域名中显示。

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

配置

Apache2

apache的配置首先需要启用header模块 (Model) 才能使用X-Frame-Options

a2enmod headers

启用了模组之后,可以针对站点的配置文件中添加X-Frame-Options的语句。三个语法分别看起来应该是这样的:

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

例如我自己的站点只希望我自己的域名能够进行嵌入:

Header set X-Frame-Options "ALLOW-FROM https://www.defectink.com/"

需要值得注意的是,在Apache配置虚拟主机的配置文件中。如果80和443端口分别使用了两个配置文件,推荐两个配置文件都添加上X-Frame-Options的配置。或者将其添加到正在使用的端口上,例如开启了302跳转80端口到443端口。

Nginx

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

add_header X-Frame-Options sameorigin always;

更多http Server的配置可以在MDN找到。

此外,虽然可以通过<meta>元素来设置 X-Frame-Options,但是不推荐。

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

效果

在启用后,就可以在浏览器中看到对应配置的header头了。

image-20191209113343335.png

嵌入实例:

参考

Copyright❤:
Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
HTML实践-X-Frame-Option:https://www.defectink.com/defect/HTML-practice-x-frame-option.html

Last Modified: January 15, 2020
Leave a Comment

已有 1 条评论
  1. 背景很炫酷