不严格的同源策略—跨文档消息

不严格的同源策略—跨文档消息

前言

以前在 同源策略中提过3种不严格的同源策略，今天就来细说其中的一种—跨文档消息。

跨文档消息

浏览器允许不同文档之间传递消息，而不管其源是否相同。假如现在这里有两个窗口，窗口a和窗口b，它们现在是不同源的。此时a可以调用postMessage方法传递消息时间，b可以调用onmessage方法来接收，虽然此时a和b还是不能互相访问，但是也可以实现安全的消息通讯了。

步骤

1.首先打开一个窗口(https://www.bilibili.com/)要注意这里的url别被代理了，比如打开http://baidu.com,会被代理到https://baidu.com,这个时候协议和端口都改变了，到后面的步骤源肯定就不一样。

2.使用window.open打开一个新窗口(https://www.baidu.com),并加上onmessage的监听方法。

let URL = 'https://www.baidu.com';
let target = window.open(URL);
window.onmessage = (e)=>{
    if(null != e){
        if(null != e.origin && e.origin == 'https://www.baidu.com'){
            let data = e.data;
            alert(data);
        }
    }
}

3.在打开的新窗口加上onmessage的监听方法并判断消息的来源，发现消息来源正确后再发送收到消息的指令。

window.addEventListener('message',(e)=>{
    if(null != e){
        if(null != e.origin && e.origin == 'https://www.bilibili.com'){
            let source = e.source;
            let data = e.data;
            source.postMessage('收到信息，内容是：'+data,e.origin);
        }
    }
})

4.在第一个窗口(https://www.bilibili.com/)发送消息。

target.postMessage('这是发送的信息',URL);

5.如果到此时步骤全部正确，第一个窗口(https://www.bilibili.com/)会出现弹框。

按照1~5的步骤，最终的流程图应该是这样的：

窗口A打开了窗口B,窗口B调用了onmessage监听了origin，如果来源正确就会调用postMessage发送消息给发消息给自己的这条消息的来源(也就是窗口A),窗口A也调用了onmessage监听了origin，如果正确就弹框(这一步在流程图中没表现出来)，所以窗口A调用了postMessage方法向窗口B发送消息的时候就产生了链式反应。