前端学习（八十一） DOM-Web通信（Dom）

在跨域技术中，有一个使用iframe解决跨域问题，其中有一个关键的技术点，叫做web Message，也就是将获取到的数据传递给原站，这边的web message也就是web通信

Web Message

在跨域中，Web Message的角色就是将目标站点的资源传递给原站的，这是一种文档中独立的浏览上下文间的数据分享方式，且不会有DOM被暴露给恶意的跨站脚本的危险

浏览上下文，解释：就是将document对象呈现给用户的环境（所谓的环境就是例如标签页，窗口，iframe等）

实际上所谓的Web通信是有两种方式的：跨文档通信和通道通信，但是这两种通信都是基于messageEvent事件的

message事件对象

属性（只读）	定义
data	message的数据
origin	message的源，包含协议，域名和端口
lastEventld	当前消息事件的唯一标识符
source	原始文档窗口的引用，windowProxy对象
prots	MessageProt对象的数据

跨文档通信

文档智件的相互通信

示例

A页面

    <iframe src="webAb.html"></iframe>
    <body>
        <input class="j-ipt" />
        <button class="j-btn">发送</button>
        <script>
            var a= window.frames[0],
                btn = document.querySelector('.j-btn'),
                ipt = document.querySelector('.j-ipt');
            btn.addEventListener('click',function (params) {
                window.frames[0].postMessage(ipt.value,'*')
            })
        </script>
    </body>

B页面

        <div class="j-message"></div>
        <script>
            window.addEventListener('message',function (params) {
                document.querySelector('.j-message').innerHTML=params.data;
            })
        </script>

这个示例就是将A页面中在input的输入，显示在B页面的DIV上，这就是文档之间的相互通信

跨文档通信使用的API就是postMessage方法

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

otherwindow：窗口的引用
message：将要被发送到其他window的数据
targetOrigin：定义哪些窗口可以接收消息
transfer：与message同时发送，这些对象的所有权移交给target，这个不常用

执行后会抛出message事件，因此在目标页面中，只需要监听message事件就可以获取到发送信息

安全性

跨文档通信是存在安全性问题的，因为发送来的消息可能是恶意的，因此注意点

没有必要性的话，不要去监听message
使用origin和source属性校验发送方的身份
在发送方使用postMessage时，始终要指定精确的target

通道通信

这种方式不常用，大概就是：利用消息通道，直接进行双向浏览上下文之间的通信手段

这种技术，使用的是MessageChannel对象

构造函数MessageChannel()

返回一个带有两个MessagePort属性的MessageChannel新对象
这种实际上是创建了两个相互关联的端口，一个是发送端，一个是接收端

属性

MessageChannel.port1
MessageChannel.port2

MessagePort方法

MessagePort.postMessage：发送消息

MessagePort.start：开始在端口上分派消息

MessagePort.close：关闭端口

MessagePort.onmessage（这个是接收端的）：event handle，监听消息事件

前端学习（八十一） DOM-Web通信（Dom）

猜你喜欢