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 的时候。

使用 X-Frame-Options 防止被iframe 造成跨域iframe 提交挂掉的更多相关文章

  1. 跨域iframe的高度自适应

    If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...

  2. 使用postMesssage()实现跨域iframe页面间的信息传递----转载

    由于web同源策略的限制,当页面使用跨域iframe链接时,主页面与子页面是无法交互的,这对页面间的信息传递造成了不小的麻烦,经过一系列的尝试,最后我发现有以下方法可以实现: 1. 子页面url传参 ...

  3. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  4. javascript跨域通信(一):利用location.hash实现跨域iframe自适应

    页面域关系: a.html所属域A:www.A.comb.html所属域B:www.B.com 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读 ...

  5. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  6. 跨域iframe高度计算

    一.同域获取iframe内容 这里有两个细节: 1. 取iframe内的文档对象,标准浏览器使用contentDocument属性,IE低版本(IE6,7,8)使用document属性. 2. cal ...

  7. 关于父窗口获取跨域iframe子窗口中的元素

    这几天在项目中遇到,一个难点, 就是需要异步加载一个pdf插件, 同时又需要获取这个插件中的点击事件来生成用户的下载记录. 刚开始也是想了很多方法,网上搜的 格式1:$("#iframe的I ...

  8. iframe操作(跨域解决等)

    note:当页面内嵌入一个iframe实际上是在dom上新建了一个新的完整的window对象 iframe中取得主窗体 window.top (顶级窗口的window对象) window.parent ...

  9. IE下IFrame引用跨域站点页面时,Session失效问题解决

    问题场景:在一个应用(集团门户)的某个page中, 通过IFrame的方式嵌入另一个应用(集团实时监管系统)的某个页面. 当两个应用的domain 不一样时, 在被嵌入的页面中Session失效.(s ...

随机推荐

  1. 1.Two Sum (Array; HashTable)

    Given an array of integers, find two numbers such that they add up to a specific target number. The ...

  2. asp.net回发页面被刷新后悔重新执行回发事件的解决方法

    做项目,进行数据修改操作后,重新加载数据,本来是没问题的.但是在这个时候刷新下页面,发现修改操作又重新执行了一次,并弹出“修改成功”的提示框. 百度了下,找到以下解决方法,解决了问题: Page.Cl ...

  3. runloop - 介绍

    1. 简介 没有的话 有的话

  4. springmvc使用数组接收页面商品列表批量删除传过来的参数,并完成批量删除的操作。

    1.1 需求 在商品列表页面选中多个商品,然后删除. 1.2 需求分析 此功能要求商品列表页面中的每个商品前有一个checkbox,选中多个商品后点击删除按钮把商品id传给controller,根据商 ...

  5. OCI 编程

    一.环境的配置 1.系统环境:要想使用OCI编程需要安装Oracle的客户端,而这个普通的客户端比较大,方便起见,可以安装即时客户端(Instantclient)作为Oracle的访问客户端.  具体 ...

  6. code1213 解的个数 扩展欧几里得

    很不错的题,加深了我对exgcd的理解 (以前我认为做题就是搜索.dp...原来数学也很重要) 理解了几个小时,终于明白了.但我什么都不打算写. 看代码吧: #include<iostream& ...

  7. 数学整合 新(LUOGU)

    1.卡特兰数(P2532) 递推式:h(n)=C(2n,n)/(n+1) (n=0,1,2,...) 前十项(从零开始):1, 1, 2, 5, 14, 42, 132, 429, 1430, 486 ...

  8. 老板说你的UI设计的不高级?你肯定没用这7个技巧...

    对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候.也许你的公司并没有全职设计师,而需求上则要求设计出全新的UI:又或者你正在制作一个你自己的个人项目,而你希望它比 Bootstrap ...

  9. sql转化为时间戳

    1.转化为时间戳 UNIX_TIMESTAMP():执行使用时间格式如:2009-08-06 10:10:40 .2009-08-06

  10. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...