x-frame-options、iframe与iframe的一些操作

iframe的子操作父窗口，父操作子窗口：

test.php:

<!DOCTYPE html>
<html>
<head><title>test</title>
</head>
<body>
<input type="text" name="csrf" id="csrf" value="parent">
<iframe src="http://127.0.0.1/csp/a.html" id="iframe"></iframe>
<script type="text/javascript">window.onload=function(){var ifr = document.getElementsByTagName('iframe')[0];alert(ifr.contentWindow.document.getElementById("csrf").value); //通过contentWindow获取子窗口中的csrf属性alert(ifr.contentDocument.getElementById('csrf').value);        //通过contentDocument 操作子窗口csrf的属性}</script>
<!-- <script type="text/javascript" src="data:,alert(document.cookie)"></script> --> //src后面可以写js语句
</body>
</html>

a.html

<!DOCTYPE html>
<html>
<head><title>test</title>
</head>
<body>
<input type="hidden" name="csrf" id="csrf" value="child">
<input type="text" name="csrf" id="csrf" value="1234312321">
<script type="text/javascript">alert(parent.document.getElementById('csrf').value); //通过parent向上跳一级alert(top.document.getElementById('csrf').value);     //直接跳到最顶层窗口</script>
</body>
</html>

子操作父窗口：

父操作子：

以上是在同域下操作的，可对不同页面读写操作，

如果将iframe的srcs修改为<iframe src="http://www.123.com/csp/a.html" id="iframe"></iframe>就会有如下报错：

所以可以得到如下结论:

iframe可以引入其他域的内容（只是可读的），引入本域的内容（可读可写）

1、header("X-Frame-Options:DENY"); //只要被iframe，就显示空白。

2、header("X-Frame-Options:SAMEORIGIN"); //只允许同源加载

3、header("X-Frame-Options: ALLOW-FROM https://newsn.net/"); //表示该页面可以在指定来源的 frame 中展示。

4、header("Content-Security-Policy: frame-ancestors yourdomain.com"); //chrome不支持3选项，用这个指令来设置。

在互联网发展历史上，iframe和被iframe是个永远的斗争话题，早已经从最开始的目的跑偏，已经发展为非法套别人页面，

甚至黑客技术中的点击劫持。因为，已经上升到内容和安全的高度，所以，这个iframe的问题，正日益被大家所重视。

测试1.加载test.php的内容，被拒绝。

测试2、加载同源的可以

测试三：加载外域的被拒绝。

测试四：

当测试下面的时候，发现不能如我们所愿。这个问题可能是浏览器不兼容，以后在测试

header("X-Frame-Options: ALLOW-FROM http://www.123.com/");
header("Content-Security-Policy: frame-ancestors http://www.123.com/");

参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options

https://newsn.net/say/x-frame-options-and-iframe.html

转载于:https://www.cnblogs.com/afanti/p/9299357.html

x-frame-options、iframe与iframe的一些操作相关推荐

使用iframe的优缺点，为什么少用iframe以及iframe和frame的区别。
出处:http://gongxquan.blog.163.com/blog/static/2108462532012111643039216 使用iframe的优缺点,为什么少用iframe以及ifr ...
网页设计与布局（frame、frameset和iframe的区别
我今天在做一个项目时忽然想起了局部刷新的效果,开始想的是用AJAX的UpdatePanel来实现这种效果,但是UupdatePanel频繁刷新,会给服务器带来很大的负荷,大大降低了效率,达不到很好的效 ...
帆软iframe 嵌套页面，dom操作
// 显示帆软的查询组件的时候,动态控制是否显示this.$nextTick(() => {const iframe = window.frames.iFrameconst handleLoad ...
html frame滚动条,如何修改 iframe 滚动条样式
项目中用到了 iframe,由于显示效果,想要修改一下滚动条样式,通过修改 css 样式在 chrome 下无效,而在 safari 中显示正常,不知道什么原因,求大佬们指点写了个测试代码: ind ...
html frame 的src属性,iframe标签的src属性
jQuery怎么给iframe的src赋值给iframe src赋值,代码如下: 特别注意: 1.上述jquery代码不能缺少 $(document).ready(); ,否则iframe src赋 ...
iframe加载完成后操作contentDocument
如何实现在iFrame加载相应的aspx 完成后再操作contentDocument中的元素? 思路: 先判断iframe的readyState是不是完成状态,如果是就进行相应的操作,否则延迟一定的时 ...
iframe和iframe实现页面内嵌套一个页面（jsp）
相信刚学习javaweb的同学都十分好奇页面上点击一个按钮下面就显示一个页面,点击不同的导航栏按钮,下方就会显示不同内容,这就用到了iframe标签的src属性.下面就给大家介绍一下iframe的使用 ...
js控制Iframe 和 iframe与主页的交互，传值 (转载)
HTML框架IFrame下利用JS在主页面和子页面间传值今天写的程序涉及到JS框架传值的问题,这些是我找到的一些资料下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数仅 ...
jsp iframe嵌入php,jsp嵌套iframe从iframe中表单提交并传值到外层_html/css_WEB-ITnose
今天因需求迭代更改元来代码遇到了这么个问题就是想在 iframe中提交后进行整个页面的跳转并把iframe中的值传到外层jsp 大概就是这个样子外层 a.jsp 内层 b.jsp 于是想当然 ...

x-frame-options、iframe与iframe的一些操作

x-frame-options、iframe与iframe的一些操作相关推荐

最新文章

热门文章