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

x-frame-options、iframe与iframe的一些操作的更多相关文章

  1. 使用iframe的优缺点，为什么少用iframe以及iframe和frame的区别。

    注:HTML5不再支持使用frame,iframe只有src 属性一.使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点:1.iframe有不好之处:样式/脚本需要额 ...

  2. frameset、frame、noframes和iframe的区别

    原网站地址:http://nmyun.blog.51cto.com/448726/155268 ■ 框架概念 :所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只需要 <frameset ...

  3. flex集成IFrame，IFrame集成UnityWebPlayer直接通讯调用解决方式

    做Web开发一般是flex与JS交互,UnityWebPlayer与JS交互. 它们之间相互调用比較常见. /** * Flex调用Javascript函数 * @params functionNam ...

  4. iframe通信相关：父操作子，子操作父，兄弟通信

    这里写window和document是认为代表了BOM和DOM(个人理解不一定对) 拿到了window就能操作全局变量和函数 拿到了document就能获取dom,操作节点 父操作子 window:选 ...

  5. Ajax：HyperText/URI, HTML, Javascript, frame, frameset, DHTML/DOM, iframe, XMLHttp, XMLHttpRequest

    本文内容 Ajax 诞生 促使 Ajax 产生的 Web 技术演化 真正 Ajax Ajax 与 Web 2.0 Ajax 背后的技术 2008 年毕业,2011 年看了<Ajax 高级程序设计 ...

  6. frameset、frame和div 、iframe

    框架一般应用于首页的界面排版工作.把一个网页切割成多个页面管理.frame文件一般只包含框架的布局信息,不会包含其他内容,所有的页面效果都是在各个frameset页面内显示.他们都从属于frame文件 ...

  7. cordova iOS blank iframe iphone iframe 白屏 ios iframe 白屏

    (1)解决方案 http://stackoverflow.com/questions/36572537/cordova-ios-blank-iframe/36587026 在 index.html中配 ...

  8. 获取iframe的元素并进行操作

    获取iframe中的document元素有一下集中方法: 1.getElementById()方法和contentWindow属性: window.onload=function(){ /*必须等待页 ...

  9. [Flex] IFrame系列 —— IFrame嵌入html后Alert弹出窗口被IFrame遮挡问题

    <?xml version="1.0" encoding="utf-8"?> <!--- - - - - - - - - - - - - - ...

随机推荐

  1. vertical-align属性baseline（转）

    图7-34 文字和图片内容默认垂直对齐方式为基线对齐 上一小节讲解了行高与单行纯文字的垂直居中,而如果行内含有图片和文字,在浏览器内浏览时,读者可以发现文字和图片在垂直方向并不是沿中线居中,而是沿基线 ...

  2. spring中AOP的AspectJ的Execution表达式

    AspectJ的Execution表达式: 使用springAOP定义pointcut里面的execution表达式: execution()函数是常用的切点函数 "execution(* ...

  3. 【SSH网上商城项目实战14】商城首页UI的设计

    转自:https://blog.csdn.net/eson_15/article/details/51373403 前面我们利用EasyUI和SSH搭建好了后台的基本框架,做好了后台的基本功能,包括对 ...

  4. apache-kylin 权威指南—读书笔记

    1. 概述 kylin 是 OLAP 引擎,采用多维立方体预计算技术,可将大数据的 SQL 查询速度提升到亚秒级别. 需求: 虽然像 spark,hive 等使用 MPP 大规模并行处理和列式存储的方 ...

  5. linux端口开放

      netstat 查看端口开放情况: netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 ...

  6. C++ STL：lower_bound与upper_bound实现

    lower_bound lower_bound(begin, end, target)用来查找一个已排序的序列中[begin, end)第一个大于等于target的元素index.数组A如下: val ...

  7. 洛谷P4716 【模板】最小树形图(朱刘算法)

    题意 题目链接 Sol 朱刘算法?感觉又是一种神仙贪心算法 大概就是每次贪心的用每个点边权最小的入边更新答案,如果不行的话就缩起来找其他的边 不详细说了,丢链接走人.. #include<bit ...

  8. Java设计模式—享元模式

    享元模式:是池技术的重要实现方式. 定义如下: 使用共享对象可有效地支持大量的细粒度的对象. 个人理解:享元模式利用共享对象的技术,解决了Java中内存溢出的问题. 享元模式的定义为我们提出了两个要求 ...

  9. 移动目标在三维GIS中的实现方法

    对于基于ArcGIS Runtime的应用程序,其实现方法比较简单,可以直接更新图形的Geometry属性,即可实现位置的移动: private void AddGraphics() { var gl ...

  10. Android MVC模式和MVP模式的区别

    MVC模式: 1. MVC的所有通信都是单向的. 2. view传送指令到controller(用户也可以直接将指令传到controller). 3. controller完成业务逻辑后要求model ...