postMessageを使用している2つのiframeの子どもの間の通信

Question

私はユーザーが自分のサイトに入れることができる埋め込みコードをいくつか持っています。ページ上に2つの子iframeを作成します。私はそれらの子供たちがコミュニケーションできるようにしたいと思います。

私は2人のiframe子供たちが直接通信することはできませんので、私はメッセージのためのリレーとして親を使用していたJavaScriptのwindow.postMessagehttps://developer.mozilla.org/en-US/docs/DOM/window.postMessage

を使用しています。ただし、埋め込み可能なコードなので、親は別のドメインに置くことができます。

3つのすべての（親と2人の子供が）同じドメイン上にある、それはかなり簡単だと私は、このセキュリティチェックはe.originをチェックして取り組んできたエレガントな方法は何ですか

# coffeescript 
# host = "http://www.mysite.com" 
host = "http://localhost" 

receive_message = (e) -> 
    console.log("received message from " + e.origin + ": " + e.data) 
    return if e.origin != host 

    if e.data == "show" 
    ... 
    else if e.data == "hide" 
    ... 

window.addEventListener("message", receive_message, false) 

私自身のサイトです親がどのドメインにも属している可能性がある場合は、起点を確認しますか？

原点をローカルホストにできるスクリプトのデバッグを許可するにはどうすればよいですか？

非破壊/変更メッセージが渡されている場合は、データパラメータをチェックするだけで十分ですか？

ありがとうございます！

Answer 1

なぜ子供のiframeが直接通信できないとお考えですか？実際、彼らはすることができます。子iframe内でできることは、window.parentプロパティを使用して親ウィンドウへの参照を取得し、次に親のframesプロパティを使用してすべての子iframeへの参照を取得します（framesプロパティはそのような参照の配列を提供します）。その後、それぞれの参照でpostMessageを使用し、正しいiframeだけがメッセージを受け取るように、postMessage呼び出しで必要な発信元をrestricttoinに設定することができます。

iframe1が親ウィンドウ（SOPに違反する）で何もしていないため、3つのウィンドウ（iframe1、parentウィンドウとiframe2）が異なるドメインにある場合でも、これは機能します。 iframe。

リンク：

https://developer.mozilla.org/en-US/docs/DOM/window.parent

https://developer.mozilla.org/en-US/docs/DOM/window.frames