postMessage处置惩罚iframe 跨域题目

2019年8月30日 190次阅读 来源: 崔小拽

背景：因为同源战略存在，javascript的跨域一向都是一个辣手的题目。父页面没法直接猎取iframe内部的跨域资本；同时，iframe内部的跨域资本也没法将信息直接通报给父页面。

一：传统的处置惩罚体式格局。

传统的iframe资本处置惩罚体式格局：主要经由过程经由过程中心页面代办，此处不再赘述，参考中心页猎取跨域iframe

二：html5 postMessage的发生

跟着HTML5的生长，html5工作组供应了两个主要的接口：postMessage(send) 和 onmessage。这两个接口有点类似于websocket，能够完成两个跨域站点页面之间的数据通报。

postMessage API

下面是实践过程当中两个小栗子：离别父页面通报信息给iframe，iframe通报信息给父页面。

三：iframe猎取父页面信息

话不多说，直接上码：
参考demo：父页面传给子页面demo

父页面代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>崔涣 iframe postmessage 父页面</title>
    <script type="text/JavaScript">
        function sendIt() {
            // 经由过程 postMessage 向子窗口发送数据
            document.getElementById("otherPage").contentWindow
                    .postMessage(
                    document.getElementById("message").value,
                    "http://cuihuan.net:8003"
            );
        }
    </script>
</head>
<body>
<!-- 经由过程 iframe 嵌入子页面 -->
<iframe src="http://cuihuan.net:8003/test.html" id="otherPage"></iframe>
<br/>
<br/>
<input type="text" id="message"/>
<input type="button" value="Send to child.com" onclick="sendIt()"/>
</body>
</html>

子页面代码

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>崔涣测试子页面信息</title> 
 <script type="text/JavaScript"> 
     //event 参数中有 data 属性，就是父窗口发送过来的数据
     window.addEventListener("message", function( event ) { 
         // 把父窗口发送过来的数据显现在子窗口中
       document.getElementById("content").innerHTML+=event.data+"<br/>"; 
     }, false ); 

 </script> 
 </head> 
 <body> 
     this is the 8003 port for cuixiaozhuai 
     <div id="content"></div> 
 </body> 
 </html>

demo 结果以下图：两个跨域页面之间，父页面给子页面通报数据。
《postMessage处置惩罚iframe 跨域题目》

四：iframe通报信息给父页面

参考demo：跨域子页面传给父页面demo

父页面代码

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>崔涣测试父页面</title>
 <script type="text/JavaScript">
     //event 参数中有 data 属性，就是父窗口发送过来的数据
     window.addEventListener("message", function( event ) {
         // 把父窗口发送过来的数据显现在子窗口中
       document.getElementById("content").innerHTML+=event.data+"<br/>";
     }, false );

 </script>
 </head>
 <body>
     <iframe src="http://cuihuan.net:8003/iframeSon.html" id="otherPage"></iframe>
     <br/>
     this is the 1015 port for cuixiaozhuai。
     <div id="content"></div>
 </body>
 </html>

子页面代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>崔小涣iframe postmessage 测试页面</title>
    <script type="text/JavaScript">
        function sendIt() {
            // 子页面给父页面传输信息 
            parent.postMessage(
                document.getElementById("message").value,
                "http://cuihuan.net:1015"
            );
        }
    </script>
</head>
<body>
<br/>
this is the  port for cuixiaozhuai
<input type="text" id="message"/>
<input type="button" value="Send to child.com" onclick="sendIt()"/>
</body>
</html>

demo 结果以下图：两个跨域页面之间，子页面通报数据给父页面通报数据。
《postMessage处置惩罚iframe 跨域题目》

五：postmessage简朴剖析和平安题目

postmessage 传送过来的信息以下图，
《postMessage处置惩罚iframe 跨域题目》

险些包括了一切应当有的信息。以至data中能够包括object，出于平安斟酌能够域的校验，数据划定规矩的校验平安校验，以下代码


 window.addEventListener('message', function (event) {
        
        //校验函数是不是正当
        var checkMessage = function () {
            // 只猎取须要的域，并不是一切都能够跨域
            if (event.origin != "need domain") {
                return false;
            }

            
            var message = event.data;
            // 传输数据类型校验
            if (typeof(message) !== 'object') {
                return false;
            }

            // message 的rule中包括xxx则为xxx须要字段。
            return message.rule === "xxx";
        };

        if (checkMessage()) {
            // 经由过程校验举行相干操纵
            addDetailFunc(event);
        }
    });

【转载请说明：postMessage处置惩罚iframe 跨域题目 | 靠谱崔小拽 】

    原文作者：崔小拽
    原文地址: https://segmentfault.com/a/1190000004512967
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞