zoukankan      html  css  js  c++  java
  • 使用 X-Frame-Options 防止被iframe 造成跨域iframe 提交挂掉

     

    Refused to display 'http://www.***.com/login/doLogin.html' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. 

     

    触发原因:页面的返回头被设置 X-Frame-Options SAMEORIGIN ,只能被同源的iframe 引用。跨域名的iframe 没法显示了。

    解决办法:
    第一步 把 服务器上的 X-Frame-Options header 去掉

     

    第二步 添加 如下代码到 不想被iframe 的页面header 里去。
    <style id="antiClickjack">body{display:none !important;}</style>
    <script>
    if (self === top) {
    var antiClickjack = document.getElementById("antiClickjack");
    antiClickjack.parentNode.removeChild(antiClickjack);
    } else {
    top.location = self.location;
    }
    </script>

     

    其他:

    X-Frame-Options ALLOW-FROM 只支持单一域名 想支持多个二级域名的这个无解

     

    并不是所有的浏览器都支持  这个header 所以,低版本的浏览器仍然会被iframe 成功

    参考:http://www.css88.com/archives/5141

     

    Browsers Supporting X-Frame-Options  
    http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx

     

     

     

    无法通过 <meta http-equiv=”X-FRAME-OPTIONS” content=”SAMEORIGIN”> 这种形式在document 的 header 里面设置,只能通过 http header 设置。

     

    Browsers ignore the header if speicified in the META tag. So the following META will be ignored:

     

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

     

    防止被IFRAME :把这些代码放到你的 header 里

     

    <style id="antiClickjack">body{display:none !important;}</style>
    <script>
    if (self === top) {
    var antiClickjack = document.getElementById("antiClickjack");
    antiClickjack.parentNode.removeChild(antiClickjack);
    } else {
    top.location = self.location;
    }
    </script>
    参考这个帖子
    https://www.codemagi.com/blog/post/194

     

     

    关于点击劫持 和 被iframe 的其他参考:

     

    http://javascript.info/tutorial/clickjacking

    http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx

     

    https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

     

    带中文请求的URL 可能会返回400 需要 encodeURIComponent 处理.尤其是使用IE 的时候。

    转自:http://www.cnblogs.com/trance/p/4645486.html

     更多参考:http://www.cnblogs.com/xuanhun/p/3610981.html

  • 相关阅读:
    webpack进阶(二)
    webpack的loader和plugin的区别
    接口和面向接口编程
    设计原则与编程技巧汇总
    W3C的盒子模型和IE的盒子模型
    React的组件
    React的路由react-router
    三种编程命名规则:驼峰命名法,帕斯卡命名法,匈牙利命名法
    gulp 构建 demo
    antd 表单的两种校验方式
  • 原文地址:https://www.cnblogs.com/shikyoh/p/4958143.html
Copyright © 2011-2022 走看看