使用 X-Frame-Options 防止被iframe 造成跨域iframe 提交挂掉
触发原因:页面的返回头被设置 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
- IE8+
- Opera 10.50+
- Safari 4+
- Chrome 4.1.249.1042+ (Allow-From not yet supported)
- Firefox 3.6.9 (or earlier with NoScript)
无法通过 <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 提交挂掉的更多相关文章
- 跨域iframe的高度自适应
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...
- 使用postMesssage()实现跨域iframe页面间的信息传递----转载
由于web同源策略的限制,当页面使用跨域iframe链接时,主页面与子页面是无法交互的,这对页面间的信息传递造成了不小的麻烦,经过一系列的尝试,最后我发现有以下方法可以实现: 1. 子页面url传参 ...
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...
- javascript跨域通信(一):利用location.hash实现跨域iframe自适应
页面域关系: a.html所属域A:www.A.comb.html所属域B:www.B.com 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读 ...
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
- 跨域iframe高度计算
一.同域获取iframe内容 这里有两个细节: 1. 取iframe内的文档对象,标准浏览器使用contentDocument属性,IE低版本(IE6,7,8)使用document属性. 2. cal ...
- 关于父窗口获取跨域iframe子窗口中的元素
这几天在项目中遇到,一个难点, 就是需要异步加载一个pdf插件, 同时又需要获取这个插件中的点击事件来生成用户的下载记录. 刚开始也是想了很多方法,网上搜的 格式1:$("#iframe的I ...
- iframe操作(跨域解决等)
note:当页面内嵌入一个iframe实际上是在dom上新建了一个新的完整的window对象 iframe中取得主窗体 window.top (顶级窗口的window对象) window.parent ...
- IE下IFrame引用跨域站点页面时,Session失效问题解决
问题场景:在一个应用(集团门户)的某个page中, 通过IFrame的方式嵌入另一个应用(集团实时监管系统)的某个页面. 当两个应用的domain 不一样时, 在被嵌入的页面中Session失效.(s ...
随机推荐
- 1.Two Sum (Array; HashTable)
Given an array of integers, find two numbers such that they add up to a specific target number. The ...
- asp.net回发页面被刷新后悔重新执行回发事件的解决方法
做项目,进行数据修改操作后,重新加载数据,本来是没问题的.但是在这个时候刷新下页面,发现修改操作又重新执行了一次,并弹出“修改成功”的提示框. 百度了下,找到以下解决方法,解决了问题: Page.Cl ...
- runloop - 介绍
1. 简介 没有的话 有的话
- springmvc使用数组接收页面商品列表批量删除传过来的参数,并完成批量删除的操作。
1.1 需求 在商品列表页面选中多个商品,然后删除. 1.2 需求分析 此功能要求商品列表页面中的每个商品前有一个checkbox,选中多个商品后点击删除按钮把商品id传给controller,根据商 ...
- OCI 编程
一.环境的配置 1.系统环境:要想使用OCI编程需要安装Oracle的客户端,而这个普通的客户端比较大,方便起见,可以安装即时客户端(Instantclient)作为Oracle的访问客户端. 具体 ...
- code1213 解的个数 扩展欧几里得
很不错的题,加深了我对exgcd的理解 (以前我认为做题就是搜索.dp...原来数学也很重要) 理解了几个小时,终于明白了.但我什么都不打算写. 看代码吧: #include<iostream& ...
- 数学整合 新(LUOGU)
1.卡特兰数(P2532) 递推式:h(n)=C(2n,n)/(n+1) (n=0,1,2,...) 前十项(从零开始):1, 1, 2, 5, 14, 42, 132, 429, 1430, 486 ...
- 老板说你的UI设计的不高级?你肯定没用这7个技巧...
对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候.也许你的公司并没有全职设计师,而需求上则要求设计出全新的UI:又或者你正在制作一个你自己的个人项目,而你希望它比 Bootstrap ...
- sql转化为时间戳
1.转化为时间戳 UNIX_TIMESTAMP():执行使用时间格式如:2009-08-06 10:10:40 .2009-08-06
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...