16

ユーザーが自分のサイトに配置できる埋め込みコードがいくつかあります。ページに 2 つの子 iframe を作成します。そんな子どもたちにコミュニケーションをとってもらいたい。

私はjavascriptのwindow.postMessage https://developer.mozilla.org/en-US/docs/DOM/window.postMessageを使用しています

2 つの iframe の子は直接通信できないため、親をメッセージのリレーとして使用しています。ただし、埋め込み可能なコードであるため、親は別のドメインにある可能性があります。

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)

親が任意のドメインにいる可能性がある場合にオリジンを確認するエレガントな方法は何ですか?

オリジンが localhost であるスクリプトのデバッグを許可する良い方法は何ですか?

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

ありがとう！

4

1 に答える 1

22

子 iframe が直接通信できないと言うのはなぜですか? 実際、彼らはできます。子 iframe 内でできることは、window.parentプロパティを使用して親ウィンドウへの参照を取得してから、親のframesプロパティを使用してすべての子 iframe への参照を取得することです (framesプロパティはそのような参照の配列を提供します)。その後、postMessageこれらの各参照で使用し、必要なオリジン制限を postMessage 呼び出しに設定して、正しい iframe のみがメッセージを確実に取得できるようにします。

これは、3 つのウィンドウ (iframe1、親ウィンドウ、および iframe2) がすべて異なるドメインにある場合でも機能することに注意してください。これは、iframe1 が親ウィンドウに対して何もしていないため (これは SOP に違反します)、ネストされた iframe への参照のみを取得しているためです。

リンク:

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

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

于 2012-12-02T19:46:34.883 に答える