在iframe中使用postMessage解决跨域问题

我们在前端页面开发中，常常会用到iframe。
而且我们在使用iframe的时候，大多数情况下不单单只是为了显示页面，还要与父窗口进行交互，这时候就出现了跨域问题，iframe页面并不能直接操作父窗口的元素。
我们可以使用html5的postMessage()解决这个问题。

一、什么是跨域

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域。
举几个例子：

http://a.123.com/index.html和http://a.123.com/index.js非跨域，它们有相同的域名，协议和端口。
http://a.123.com/index.html和http://b.123.com/index.js跨域，相同的端口、协议，但是域名不同（a.123.com和b.123.com）。
http://a.123.com:8080/index.html和http://a.123.com:8081/index.js跨域，相同的域名、协议，但是端口不同（8080和8081）。
http://a.123.com/index.html和https://a.123.com/index.js跨域跨域，相同的域名、端口，但是协议不同（http和https）。

二、postMessage()基本用法

【发送消息】

otherWindow.postMessage(message, targetOrigin, [transfer])

otherWindow
其他窗口的一个引用，写的是你要通信的window对象。
例如在iframe中向父窗口传递数据时，可以写成window.parent.postMessage()，window.parent表示父窗口。
message
需要传递的数据，字符串或者对象都可以。
targetOrigin
表示目标窗口的源，协议+域名+端口号，如果设置为“*”，则表示可以传递给任意窗口。在发送消息的时候，如果目标窗口的协议、域名或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。例如：

window.parent.postMessage('hello world','http://a.123.com:8080/index.html')

只有父窗口是http://a.123.com:8080时才会接受到传递的消息。

[transfer]
可选参数。是一串和message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。我们一般很少用到。

【接收消息】

window.addEventListener('message', function (e) {
    console.log(e.data)  //e.data为传递过来的数据
    console.log(e.origin)  //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
    console.log(e.source)  //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
})

三、iframe与父窗口交互数据例子

iframe传递关闭命令

父窗口接收到命令将iframe关闭

四、安全问题

如果你不希望从其他网站接收message，请不要为message事件添加任何事件监听。
如果你确实希望从其他网站接收message，请始终使用origin和source属性验证发件人的身份。任何窗口都可以向任何其他窗口发送消息，并且你不能保证未知发件人不会发送恶意消息。而且在验证身份后，你仍然应该验证接收到的消息的语法，防止非法攻击（例如SQL注入）。
使用postMessage将数据发送到其他窗口时，应该指定精确的目标origin，而不是*。恶意网站可以在你不知情的情况下更改窗口的位置，因此它可以拦截使用postMessage发送的数据。

五、兼容性

IE6，IE7不支持。
IE8+虽然支持postMessage，但只支持iframe的方式，window.open打开的新窗口之间，没法用。直到IE10才有相关改进。

————
前端·小w
纸上学来终觉浅，绝知此事要躬行

最后编辑于：2018.04.08 18:36:51