Iframe跨窗口通信原理详解

目录
  • 同源
  • iframe
    • window：document.domain
    • iframe：错误文档陷阱
    • window.frames
    • “sandbox” iframe 特性
    • iframe 通信：postMessage onmessage
    • 1 postMessage
    • 2 onmessage
    • 跨窗口的 cookie

同源

同源策略会限制 窗口(window) 和 frame 之间的通信，因此首先要知道同源策略。

同源策略目的是保护用户信息免遭信息盗窃：加入小王有两个打开的页面：一个是 shop.com，一个是 email.com。小王不希望 shop.com 的脚本可以读取 mail 的邮件，这时同源策略就起作用了。

如果两个 URL 具有相同的协议，域，和端口，则称它们是同源的。

以下几个URL是同源的：

以下是不同源的：

  • https://site.com
  • http://bbs.site.com
  • site.com:8080
  • http://site.org

同源策略规定：

  • 如果我们有对另一个窗口的引用（window.open || iframe），并且该窗口是同源的，那么我们就具有对该窗口的全部访问权限。见代码：2-1 、2-2
  • 如果不是同源的，我们就不能访问窗口中的内容：变量，文档，任何东西。唯一例外是location：我们可以修改它，使用它进行重定向。但是我们无法读取 location 。因此，我们无法看到用户当前所处的位置，也就不会泄露任何信息。

iframe

iframe 标签承载了一个单独的嵌入的窗口，它有自己的 document 和 window

iframe.contentWindow 来获取 中的 window

iframe.contentDocument 来获取 中的 document ， 是 iframe.contentWindow.document 的简写。

当我们访问嵌入的窗口中的东西时，浏览器会检查 iframe 是否具有相同的源。如果不是，则会拒绝访问（对 location 进行写入是一个例外，它是会被允许的）。

代码 2-1 : （在 同源 情况下）

 <!-- 1.html 内容 -->
 <!-- http://127.0.0.1:8000/1.html -->
 <body>
     我是 1.html, 下面嵌套 2.html
     <iframe src="http://127.0.0.1:8000/2.html" ></iframe>
     <script>
         function hello () { console.log('this is 1.html') }
         var iframe = document.getElementsByTagName('iframe')[0];
         console.log('contentWindow
赞 (0)

相关推荐

  • JS解决iframe之间通信和自适应高度的问题

    JS解决iframe之间通信和自适应高度的问题

    首先说明下,iframe通信 分为:同域通信 和 跨域通信. 一. 同域通信 所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe 比如: <iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA">的B.html页面,这两个页面数据进行通信

  • 如何实现iframe父子传参通信

    在最近的项目里面,用到了不少关于iframe父子传参通信的相关操作,记录一下,虽然很简单,但是确实十分有用的; iframe通信可以分为2种,跨域和非跨域两种.分别说明; 有一点很重要,iframe是可以给name 属性的;给上name 属性可以省下一些代码; 非跨域 父调子 //父页面 <button class="b" id="b">点击</button> <iframe src="a.html" name='c

  • 嵌入式iframe子页面与父页面js通信的方法

    本文实例讲述了嵌入式iframe子页面与父页面js通信的方法.分享给大家供大家参考.具体分析如下: iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信. 一.同域下父子页面的通信 父页面 parent.html: 复制代码 代码如下: <html> <head> <script type="text/javascr

  • iframe跨域通信封装详解

    iframe跨域通信 查看演示        源码下载 众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容. 用法举例: 需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法. 1. 在top页面中建立方法供内部页面使用 复制代码 代码如下: func

  • 通过伪协议解决父页面与iframe页面通信的问题

    我们经常会有父页面与iframe页面的操作,比如 <iframe id = "iframe"></iframe> 这个iframe里面的内容是js写的.如以下代码 var iframe = document.getElementById("iframe"), doc = iframe.contentWindow.document; doc.open(); doc.write("---------something------&quo

  • Iframe跨窗口通信原理详解

    目录 同源 iframe window:document.domain iframe:错误文档陷阱 window.frames “sandbox” iframe 特性 iframe 通信:postMessage onmessage 1 postMessage 2 onmessage 跨窗口的 cookie 同源 同源策略会限制 窗口(window) 和 frame 之间的通信,因此首先要知道同源策略. 同源策略目的是保护用户信息免遭信息盗窃:加入小王有两个打开的页面:一个是 shop.com,一

  • 浅谈js中几种实用的跨域方法原理详解

    浅谈js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同

  • 前端跨域问题解决及七大跨域原理详解

    目录 为什么跨域? 跨域的时机? 同域情况 && 跨域情况? 解决跨域的方案 JSONP WebSocket Cors Node接口代理 Nginx postMessage document.domain && iframe 咱们做前端的,平时跟后端对接接口那是必须的事情,但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域,那跨域到底是啥呢?为什么会跨域呢?又怎么才能解决呢? 为什么跨域? 为什么会出现跨域问题呢?那就不得不讲浏览器的同源策略了,它规定了协议号-域

  • JS JSOP跨域请求实例详解

    在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu

  • java进行远程部署与调试及原理详解

    这篇文章主要介绍了java进行远程部署与调试及原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 远程调试,特别是当你在本地开发的时候,你需要调试服务器上的程序时,远程调试就显得非常有用. JAVA 支持调试功能,本身提供了一个简单的调试工具JDB,支持设置断点及线程级的调试同时,不同的JVM通过接口的协议联系,本地的Java文件在远程JVM建立联系和通信.此篇是Intellij IDEA远程调试的教程汇总和原理解释,知其然而又知其所以然.

  • 关于python 跨域处理方式详解

    因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送http请求 浏览器的同源策略(SOP/same origin policy)是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS(跨站脚本攻击 cross site scripting)和CSRF(跨站请求伪造cross-site request forgery)等攻击. (同

  • Vue面试中observable原理详解

    目录 一.Observable 是什么 二.使用场景 三.原理分析 一.Observable 是什么 Observable 翻译过来我们可以理解成可观察的 我们先来看一下其在Vue中的定义 Vue.observable,让一个对象变成响应式数据.Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新.也可以作为最小化的跨组件状态存储器 Vue.observable({ count : 1}) 其作用等同于 new vue(

  • JSONP跨域请求实例详解

    JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON

  • Spring实现处理跨域请求代码详解

    一次正常的请求 最近别人需要调用我们系统的某一个功能,对方希望提供一个api让其能够更新数据.由于该同学是客户端开发,于是有了类似以下代码. @RequestMapping(method = RequestMethod.POST, value = "/update.json", produces = MediaType.APPLICATION_JSON_VALUE) public @ResponseBody Contacter update(@RequestBody Contacter

随机推荐