解决iframe跨域传参（Blocked a frame with origin）

一.问题描述

使用iframe通过iframe子页面调用父页面或父页面调用iframe子页面时，因为违反了浏览器安全策略，无法跨iframe获取到另一页面的数据，在控制台中可以看到如下报错

Blocked a frame with origin “http://localhost:****” from accessing a cross-origin frame.

二.解决方案

以上问题可通过postMessage方法安全地跨iframe进行通信。

1.iframe子页面调用父页面

• 子页面数据发送

// data为子页面发送的数据（可以是一个js对象，会被自动序列化处理）
window.parent.postMessage(data, '*')

• 父页面数据监听

addEventListener('message', e => {
    // e.data为子页面发送的数据
    console.log(e.data)
})

2.父页面调用iframe子页面

• 父页面数据发送

document.getElementById('iframe').contentWindow.postMessage(data,'*')

• 子页面接收数据

addEventListener('message', e => {
    // e.data为父页面发送的数据
    console.log(e.data)
})

3.安全性优化- 发送数据限制接收源

在上边的代码中postMessage的第二个参数被设置为’*’，意为任意源，这里可以指定接收源，示例代码如下

 window.parent.postMessage('exit','http://example.org');

• 监听到数据检测发送来源

addEventListener('message', e => {
    if(e.origin === 'http://example.org') {
        // 仅在数据发送来源自受信任的地址才执行对应操作
    }
})

END