iframe跨域通信方案

Posted 2023-03-09

参考技术A 概述

javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

对于主域相同子域不同的通信方法这里不一一列举了，这里主要讲解一下跨主域的通信问题。

postMessage方法

window.postMessage 是一个用于安全的使用跨源通信的方法。通常，不同页面上的脚本只在这种情况下被允许互相访问，当且仅当执行它们的页面所处的位置使用相同的协议（通常都是 http）、相同的端口（http默认使用80端口）和相同的主机（两个页面的 document.domain 的值相同）。 在正确使用的情况下，window.postMessage 提供了一个受控的机制来安全地绕过这一限制。

兼容性

http://caniuse.com/#search=postMessage

具体用法

发送消息：destination.postMessage(message, targetOrigin);

destination: 目标窗口

message:发送的消息

targetOrigin: 定义发送消息的范围

监听接受消息：window.addEventListener(‘message’,callback,false);

已知问题

部分版本IE8/9浏览器只支持iframe通信，不支持tabs之间通信。

IE8/9不能传输对象，只能传输string。

参考资料

mozlia官方文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Window.postMessage

IE官方文档: https://status.modern.ie/postmessage

webplatform文档: https://docs.webplatform.org/wiki/apis/web-messaging/MessagePort/postMessage

html5官方文档: https://html.spec.whatwg.org/multipage/comms.html#web-messaging

window.navigator(适用于ie6/7)

ie6/7有个漏洞,父窗口与所有的iframe共享window.navigator对象，可以利用这个漏洞，由于ie6/7不支持postMessage,所以可以利用这个漏洞对ie6/7做兼容跨域通信支持。

具体用法

途中A过程和B过程都是初始化监听事件，类似于onmessage事件。只不过实现方法不一样而已。

按执行顺序来描述的话，如下：

B: 父窗口向window.navigator添加一个监听函数，并打上父窗口的戳。

A: 子窗口向window.navigator添加一个监听函数，并打上子窗口的戳。

C: 父窗口执行post的时候，调用原先子窗口添加在navigator里的监听函数，并将要传输的数据作为函数参数传入。

D: 子窗口执行post的时候，调用原先父窗口添加在navigator里的监听函数，并将要传输的数据作为函数参数传入。

注意：子窗口和父窗口要找到对方的监听函数必须得事先知道对方在添加监听函数的时候打上的戳

跨域解决方案

什么是跨域

js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

由于浏览器的同源策略

浏览器的同源策略会导致跨域，这里同源策略又分为以下两种

1. DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
2. XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求

为什么要有跨域限制

了解完跨域之后，想必大家都会有这么一个思考，为什么要有跨域的限制，浏览器这么做是出于何种原因呢。其实仔细想一想就会明白，跨域限制主要是为了安全考虑。

AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击：

1. 用户登录了自己的银行页面 http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。
2. 用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
3. http://evil.com向http://mybank.com发起AJAX HTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。
4. 银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
5. 而且由于Ajax在后台执行，用户无法感知这一过程。

DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击：

1. 做一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com。
2. 把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
3. 这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。

所以说有了跨域跨域限制之后，我们才能更安全的上网了。

实现跨域请求的常用三种方式

• JSONP
• Nginx作反向代理
• CORS策略

1、JSONP（JSON with padding）

原理 ：

? 我们知道，在页面上有三种资源是可以与页面本身不同源的。它们是：js脚本，css样式文件，图片，像淘宝等大型网站，肯定会将这些静态资源放入cdn中，然后在页面上连

接，如下所示，所以它们是可以链接访问到不同源的资源的。

1）<script type="text/javascript" src="某某cdn地址" ></script>

2）<link type="text/css" rel="stylesheet" href="某个cdn地址" />

3）<img src="某个cdn地址" alt=""/>

　　而jsonp就是利用了script标签的src属性是没有跨域的限制的，从而达到跨域访问的目的。因此它的最基本原理就是：动态添加一个<script>标签来实现。

实现方法：

? 这里是使用ajax来请求的，看起来和ajax没啥区别，其实还是有区别的。

? ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加