使用HTTP 响应头信息中的 X-Frame-Options 属性防止网页被Frame

10年服务1亿前端开发工程师

防止网页被Frame,方法有很多种;

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

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

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

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

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

注:此方式破解对IE6,IE7,IE9+、Chrome、firefox无效; 感谢@genify@_Franky?补充斧正。

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

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

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

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

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

绝大部分浏览器支持:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.1.249.1042 3.6.9 (1.9.2.9) 8.0 10.5 4.0

具体的设置方法:

Apache配置:

Header always append X-Frame-Options SAMEORIGIN

nginx配置:

add_header X-Frame-Options SAMEORIGIN;

IIS配置:

<system.webServer>
 ...

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

 ...
</system.webServer>

具体可以查看:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options?redirectlocale=en-US&redirectslug=The_X-FRAME-OPTIONS_response_header

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 使用HTTP 响应头信息中的 X-Frame-Options 属性防止网页被Frame

评论 7

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    var location = document.location;
    // 或者 var location = “”;

    此方式破解对IE9+、Chrome、firefox无效

    genify4年前 (2014-09-19)回复
    • @genify 对ie6,ie7也无效

      4年前 (2014-09-19)回复
  2. #-48

    mark

    webx324年前 (2014-09-23)回复
  3. #-47

    这个看起来不错啊

    bukas4年前 (2014-10-04)回复
  4. #-46

    这个Nginx默认是开启的 Deny 么?

    actanble1年前 (2017-11-23)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏