PostMessage は iframe クロスドメインの問題を処理します_html/css

PostMessage は iframe クロスドメインの問題を処理します_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:25:38

オリジナル

1502 人が閲覧しました

背景: 同一生成元ポリシーの存在により、クロスドメイン JavaScript は常に厄介な問題でした。親ページは iframe 内のクロスドメインリソースを直接取得できません。同時に、iframe 内のクロスドメインリソースは親ページに情報を直接渡すこともできません。

1: 従来のソリューション。

従来の iframe リソースソリューション: 主に中間ページを介したプロキシを通じて、クロスドメイン iframe を取得するための中間ページを参照してください

2 つ: HTML5 postMessage の生成

HTML5、html5 ワーキンググループは、postMessage(send) と onmessage という 2 つの重要なインターフェイスを提供しました。これら 2 つのインターフェイスは WebSocket に似ており、2 つのクロスドメインサイトページ間のデータ転送を実現できます。

postMessage API

以下は実際の 2 つの小さな栗です: 親ページは iframe に情報を渡し、iframe は親ページに情報を渡します。

3: iframe は親ページの情報を取得します

あまり言うことはなく、直接コーディングするだけです:

参考デモ: 親ページを子ページに渡すデモ

親ページのコード

<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>

ログイン後にコピー

デモ効果は次のとおりです。2 つのクロスドメインページ間で、親ページが子ページにデータを渡します。

4: iframe は親ページに情報を渡します

参考デモ: クロスドメイン子ページが親ページに渡されるデモ

親ページコード

<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 効果は次のとおりです2 つのクロスドメインページ間で、子ページが親ページにデータを渡します。

5: postmessage の簡単な分析とセキュリティ問題

postmessage によって送信される情報は以下の通りであり、

にはそこにあるべき情報がほぼすべて含まれています。データにもオブジェクトが含まれる可能性があるため、次のコードを使用して、ドメイン検証とデータルール検証を安全に検証できます。