X-Frame-Options

一、问题引入

场景：用iframe嵌入网页内容时，打开页面无内容展示(排除网络不通原因)。打开chrome 调试，发现里面输出一个错误提示：Refused to display 'xxxxxxx' in a frame because it set 'X-Frame-Options' to 'deny'

二、X-Frame-Options是什么

　X-Frame-Options是一个HTTP标头（header），用来告诉浏览器这个网页是否可以放在iFrame内。

　　例如：

　　1.X-Frame-Options: DENY

　　2.X-Frame-Options: SAMEORIGIN

　　3.X-Frame-Options: ALLOW-FROM http://caibaojian.com/

　　补充：ALLOW-FROM已废弃，IE可用，其他浏览器会报错

Invalid 'X-Frame-Options' header encountered when loading 'http://www.a.com':
 'ALLOW-FROM http://www.a.com' is not a recognized directive.
 The header will be ignored.

　　可以改用 配置 Content-Security-Policy

Content-Security-Policy: frame-ancestors <source> <source>;
或
Content-Security-Policy: frame-ancestors 'none';//相当于DENY

 

        第一个例子告诉浏览器不要（DENY）把这个网页放在iFrame内，通常的目的就是要帮助用户对抗点击劫持。 第二个例子告诉浏览器只有当架设iFrame的网站与发出X-Frame-Options的网站相同，才能显示发出X-Frame-Options网页的内容。 第三个例子告诉浏览器这个网页只能放在http://caibaojian.com//网页架设的iFrame内。 不指定X-Frame-Options的网页等同表示它可以放在任何iFrame内。 X-Frame-Options可以保障你的网页不会被放在恶意网站设定的iFrame内，令用户成为点击劫持的受害人。

　　另外查了最新的资料，还可以直接通过meta标签来设置，不需要放在http头部请求中了。 

　<meta http-equiv="X-Frame-Options" content="deny"> 

　　两个参数：（作用与上面一致）

1. SAMEORIGIN
2. DENY

三、X-Frame-Options与前端安全

X-Frame-Options HTTP响应头是用来确认是否浏览器可以在frame或iframe标签中渲染一个页面，网站可以用这个头来保证他们的内容不会被嵌入到其它网站中，以来避免点击劫持。

危害： 攻击者可以使用一个透明的、不可见的iframe，覆盖在目标网页上，然后诱使用户在该网页上进行操作，此时用户将在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置，可以诱使用户恰好点击iframe页面的一些功能性按钮上，导致被劫持。

解决方案：

修改web服务器配置，添加X-frame-options响应头。赋值有如下三种：

（1）DENY：不能被嵌入到任何iframe或frame中。
（2）SAMEORIGIN：页面只能被本站页面嵌入到iframe或者frame中。
（3）ALLOW-FROM uri：只能被嵌入到指定域名的框架中。

也可在代码中加入，在PHP中加入：

header('X-Frame-Options: deny');

四、防止网页被Frame方法

方法一： 常见的比如使用js，判断顶层窗口跳转：

(function () {
if (window != window.top) {
window.top.location.replace(window.location); //或者干别的事情
}
})();

一般这样够用了，但是有一次发现失效了，看了一下人家网站就是顶层窗口中的代码，发现这段代码：

var location = document.location;
// 或者 var location = "";

轻轻松松被破解了，悲剧。

方法二： meta 标签：基本没什么效果，所以也放弃了：

<meta http-equiv="Windows-Target" contect="_top">

方法三：使用HTTP 响应头信息中的 X-Frame-Options属性

使用 X-Frame-Options 有三个可选的值：

DENY：浏览器拒绝当前页面加载任何Frame页面
SAMEORIGIN：frame页面的地址只能为同源域名下的页面
ALLOW-FROM：origin为允许frame加载的页面地址

绝大部分浏览器支持

配置 Apache

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

Header always append X-Frame-Options SAMEORIGIN

配置 nginx

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

add_header X-Frame-Options SAMEORIGIN;

更多相关内容本博客另外一篇：【前端安全】JavaScript防http劫持与XSS - 盼星星盼太阳 - 博客园 (cnblogs.com)

来源：https://www.jb51.net/article/109436.htm