18

クロスドメイン境界の制限にもかかわらず、Facebookのログインがメインページ（ mypage ）にデータを転送する方法を調査したかった.

そして、FB js sdkコードで新しいページを作成しました：

FB.login(function (response)
    {
    if (response.authResponse)
        {...

ポップアップを開きます：

ここに画像の説明を入力

しかし、ページにiframeがあるかどうかを調査したところ(私のコードには iframe が含まれていません):

これを見た ：

>>$("iframe")

結果 ：

[
<iframe name=​&quot;fb_xdm_frame_http" frameborder=​&quot;0" allowtransparency=​&quot;true" scrolling=​&quot;no" id=​&quot;fb_xdm_frame_http" aria-hidden=​&quot;true" title=​&quot;Facebook Cross Domain Communication Frame" tab-index=​&quot;-1" src=​&quot;http:​/​/​static.ak.facebook.com/​connect/​xd_arbiter.php?version=24#channe…l_path=%2FWebSite2%2FHTMLPage3.htm%3Ffb_xd_fragment%23xd_sig%3Df5252874%26" style=​&quot;border:​ none;​&quot;>​…​&lt;/iframe>​
, 
<iframe name=​&quot;fb_xdm_frame_https" frameborder=​&quot;0" allowtransparency=​&quot;true" scrolling=​&quot;no" id=​&quot;fb_xdm_frame_https" aria-hidden=​&quot;true" title=​&quot;Facebook Cross Domain Communication Frame" tab-index=​&quot;-1" src=​&quot;https:​/​/​s-static.ak.facebook.com/​connect/​xd_arbiter.php?version=24#cha…l_path=%2FWebSite2%2FHTMLPage3.htm%3Ffb_xd_fragment%23xd_sig%3Df5252874%26" style=​&quot;border:​ none;​&quot;>​…​&lt;/iframe>​
]

それらがクロスドメインに使用されていることを読みました。

しかし、問題は、なぜ彼らが MY PAGE にいるの かということです。

Facebookの内部ページのどこかにあるはずです！

Iframeテクニックが次のように機能することを知っているので、私はそれを言っています:

ここに画像の説明を入力

ご覧のとおり、内部 Iframe は、クエリ文字列 (値は実際にはトップページの URL です) からの値を使用 して別のiframe を作成し、次に、両方のページに JS + トリガー関数を使用して、次のことができます。SRCURL => JS

top.sendData({...})

私は何が欠けていますか?

  • FB ログインからマイページにデータがどのように渡されますか?
4

2 に答える 2

37

私は Facebook JS SDK のクロスドメイン メッセージング用の現在のインフラストラクチャを設計したエンジニアです。

このセットアップは、一部の人にとっては少し非正統的で混乱を招くように見えるかもしれませんが、私がそう言うなら、それは本当に非常にエレガントです:)

ページが HTTP か HTTPS かに応じて、JS SDK は、*.facebook.com ドメインから提供される xd_arbiter.php リソースを指す 2 つの iframe を作成します。が設定されているためdocument.domain = 'facebook.com'、これらは同じことを行う facebook.com の他のリソースと通信できます。

これらのリソース (プロキシ) は、フラグメントを介していくつかの情報を渡し、動的な機能を提供しますが、それ以外は 100% 静的であり、ブラウザーによってキャッシュされるため、これらは非常に高速に読み込まれます。

次に、ホスト ページと各 iframe (プロキシ) の間に Cross-Domain Messaging リンクが確立されます。これは、ホスト ページが facebook.com の HTTPS ページと通信できるようになり、ホスト ページが HTTP の場合は、facebook.com の HTTP ページとも通信できることを意味します。

このリンクがブラウザー間でどのように機能するかは、より複雑な問題ですが、 easyXDMでわかるように、すべてがチャネルに抽象化されています。

これで、JS SDK が facebook.com でポップアップまたは iframe として新しいウィンドウを作成するたびに、ホスト ページと各ウィンドウの間に新しい通信チャネルを設定する代わりに、新しいウィンドウは既存のセットアップに費用はかかりません。

ホスト ページにメッセージを送信する必要がある場合、これらは(window.opener || window.parent).frames['fb_xdm_frame_' + location.protocol.replace(':', '')プロキシへのハンドルを取得するために使用されます。同様に、プロキシはparent.frames[some_name]、適切なプロキシ (HTTP または HTTPS ） 使われた。

私たちにとって、これは基本的に、クロスドメインの通信方法に関する懸念が JS SDK とそのリソースに分離されていることを意味します。これに基づいて構築するサービスは、非常に単純な api に依存することができ、send_this_message(message, origin)「魔法のように」終了します。もう一方の端では、私たちが実施しているオリジンチェックで許可されている場合.

これがあなたの質問に答えてくれることを願っています!

(xd_arbiter.php はリダイレクト ターゲットとしても機能し、兄弟プロキシを使用してメッセージをリレーします)。

于 2013-05-31T20:40:29.740 に答える
0

コードで ie8+ を使用しているかどうかに基づいて、概念は単純になると思います。

CORS はクロスドメイン通信に使用できます。ホストで正しいヘッダーが設定されていることを確認してください。

または、iframe を作成し、その src を動的スクリプトに情報を渡すものとして設定します。情報を処理します。postMessage を使用して外部ウィンドウと通信する iframe に JS コードを返します。

于 2013-08-13T22:11:38.230 に答える