wake-up-neo.com

Facebook und Cross Domain Messaging Klärung?

Ich wollte untersuchen, wie der Facebook-Login Daten auf die Hauptseite (mypage) überträgt - trotz der domänenübergreifenden Einschränkung.

Und so habe ich eine neue Seite mit dem Code FB js sdk erstellt:

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

Es öffnet sich das Popup:

enter image description here

Aber als ich nachforschte, ob ich Iframes habe auf meiner Seite (Mein Code enthält keine Iframes):

Ich habe es gesehen :

>>$("iframe")

ergebnis:

[
<iframe name=​"fb_xdm_frame_http" frameborder=​"0" allowtransparency=​"true" scrolling=​"no" id=​"fb_xdm_frame_http" aria-hidden=​"true" title=​"Facebook Cross Domain Communication Frame" tab-index=​"-1" src=​"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=​"border:​ none;​">​…​</iframe>​
, 
<iframe name=​"fb_xdm_frame_https" frameborder=​"0" allowtransparency=​"true" scrolling=​"no" id=​"fb_xdm_frame_https" aria-hidden=​"true" title=​"Facebook Cross Domain Communication Frame" tab-index=​"-1" src=​"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=​"border:​ none;​">​…​</iframe>​
]

Ich habe gelesen, dass sie für die Cross-Domain verwendet werden.

Aber die Frage ist, warum sind sie auf MEINER SEITE ?

Sie sollten irgendwo auf Facebook-internen Seiten sein!

Ich sage es, weil ich weiß, dass die Iframe-Technik so funktioniert:

enter image description here

Wie Sie sehen, erstellt der interne Iframe einen weiteren iframe mit dem Wert SRC aus der Abfragezeichenfolge (der Wert ist die URL der obersten Seite), und dann können wir mit JS auf beiden Seiten + URL => JS Funktionen auslösen tun :

top.sendData({...})

Was vermisse ich ?

  • Wie werden die Daten vom FB-Login auf meine Seite übertragen?
17
Royi Namir

Ich bin der Ingenieur, der die aktuelle Infrastruktur für domänenübergreifendes Messaging im Facebook JS SDK entworfen hat. Vielleicht kann ich hier etwas Licht ins Dunkel bringen.

Dieses Setup mag ein bisschen unorthodox und verwirrend wirken, aber es ist wirklich ziemlich elegant, wenn ich es selbst so sagen darf :)


Abhängig davon, ob es sich bei der Seite um HTTP oder HTTPS handelt, erstellt das JS SDK zwei Iframes, die auf die Ressource xd_arbiter.php verweisen, die von einer * .facebook.com-Domain bereitgestellt wird. Da document.domain = 'facebook.com' festgelegt ist, können diese mit anderen Ressourcen auf facebook.com kommunizieren, die dasselbe tun.

Diese Ressourcen, die Proxys, werden durch das Fragment geleitet, um ihnen dynamische Funktionen zu verleihen. Ansonsten sind sie zu 100% statisch und werden von Ihrem Browser zwischengespeichert. Sie lassen sich also sehr schnell laden.

Als Nächstes wird eine domänenübergreifende Messaging-Verbindung zwischen der Host-Seite und jedem der iframes (den Proxys) hergestellt. Dies bedeutet, dass die Host-Seite von nun an mit einer HTTPS-Seite auf facebook.com kommunizieren kann. Wenn die Host-Seite HTTP ist, kann sie auch mit einer HTTP-Seite auf facebook.com kommunizieren.

Wie dieser Link zwischen Browsern funktioniert, ist eine komplexere Angelegenheit, aber alles wird in einen Kanal abstrahiert, ähnlich wie Sie es mit easyXDM sehen können.


Immer wenn das JS SDK ein neues Fenster auf facebook.com erstellt, entweder als Popup oder als Iframe, anstatt einen neuen Kommunikationskanal zwischen der Host-Seite und jedem Fenster einzurichten, können die neuen Fenster die vorhandenen Fenster verwenden Proxy, zahlen keine Kosten im Setup.

Wenn Nachrichten an die Host-Seite gesendet werden müssen, verwenden diese (window.opener || window.parent).frames['fb_xdm_frame_' + location.protocol.replace(':', ''), um ein Handle für den Proxy abzurufen. Ebenso kann der Proxy parent.frames[some_name] verwenden, um ein Handle für geschwisterliche Iframes auf der Seite abzurufen, sofern der richtige Proxy (HTTP) ausgewählt ist oder HTTPS) wurde verwendet.

Für uns bedeutet dies im Grunde genommen, dass die Sorge, wie domänenübergreifend kommuniziert werden soll, auf das JS SDK und seine Ressourcen beschränkt ist - alle darüber hinausgehenden Services können sich auf eine sehr einfache API von send_this_message(message, Origin) stützen und werden auf magische Weise enden auf der anderen Seite, wenn die von uns eingerichteten Origin-Prüfungen dies zulassen.

Ich hoffe das beantwortet deine Frage!


(xd_arbiter.php kann auch als Weiterleitungsziel verwendet werden, um die Nachricht mithilfe seiner Geschwister-Proxys weiterzuleiten.).

33
Sean Kinsey

Ich denke, das Konzept kann einfach sein, wenn Sie in Ihrem Code ie8 + sind.

CORS kann zur domänenübergreifenden Kommunikation verwendet werden. Stellen Sie sicher, dass die richtigen Header auf Ihrem Host festgelegt sind und Sie gut sind.

Oder erstellen Sie einen iframe, und legen Sie dessen src so fest, dass Informationen an ein dynamisches Skript übergeben werden. Verarbeiten Sie die Informationen. Geben Sie den JS-Code an den Iframe zurück, der postMessage für die Kommunikation mit dem externen Fenster verwendet.

0
majestiq