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

摘要:
Iframe的子操作父窗口,父操作子窗口:testphp:测试警报;//通过父级向上跳转警报级别//直接跳转到最顶层的窗口子级操作父级窗口:父级操作子级:以上操作在同一域中执行,可以读取和写入不同的页面。如果将iframe的srcs更改为将报告以下错误:因此我们可以得出以下结论:iframe可以从其他域导入内容。1.Header;//只要是iframe,它将为空。

iframe的子操作父窗口,父操作子窗口:

test.php:

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

子操作父窗口:

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

父操作子:

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

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

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

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

所以可以得到如下结论:

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的内容,被拒绝。

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

测试2、加载同源的可以

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

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

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

测试四:

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

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

免责声明:文章转载自《x-frame-options、iframe与iframe的一些操作》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ios基础笔记(一)机器学习与R语言下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Js 跨域之李代桃僵

1. 跨域的方法大致有七计 javascript的同源策略 同源策略是指协议,主机和端口 相同,就是为同源,不管后面在跟什么参数,否则都是跨域 个人觉得服务器上设置代理页面 或者设置跨域头cros最方便 锦囊一 在服务器上设置代理页面 ,如果是有类似nginx 服务的话,可以配置nginx 反向代理,因为跨域只针对浏览器. 比如nginx.conf ser...

VSCode插件开发全攻略(七)WebView

更多文章请戳VSCode插件开发全攻略系列目录导航。 什么是Webview 大家都知道,整个VSCode编辑器就是一张大的网页,其实,我们还可以在Visual Studio Code中创建完全自定义的、可以间接和nodejs通信的特殊网页(通过一个acquireVsCodeApi特殊方法),这个网页就叫WebView。内置的Markdown的预览就是使用W...

iframe+postMessage不同源页面通信

父页面 父页面运行在8080端口,通过iframe标签引用子页面,通过postMessage发送消息给iframe中的子页面。 <template> <div class="hello"> <iframe src="http://10.10.30.5:8081" height="100%"><...

js(javascript)与ios(Objective-C)相互通信交互

随着苹果SDK的不断升级,越来越多的新特性增加了进来,本文主要讲述从iOS6至今,Native与JavaScript的交互方法 一、UIWebview && iframe && JavaScript  <=iOS6 iOS6原生没有提供js直接调用Objective-C的方式,只能通过UIWebView的UIWebVi...

前端打印之路(直接打印)

先贴一下代码 <div id=‘print’ style={{ fontFamily: "Microsoft YaHei" }}> <div className="print_container" style={{ padding: "0px", margin...

前端大文件上传解决方案支持分片断点上传

最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请...