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