JavaScript
Gleiche Origin-Richtlinien und Cross-Origin-Kommunikation

Einführung

Möglichkeiten, die Same-Origin-Richtlinie zu umgehen

Für clientseitige JavaScript-Engines (solche, die in einem Browser ausgeführt werden) gibt es keine unkomplizierte Lösung für das Anfordern von Inhalten aus anderen Quellen als der aktuellen Domäne. (Diese Einschränkung existiert übrigens nicht in JavaScript-Server-Tools wie Node JS.)

Es ist jedoch (in manchen Situationen) tatsächlich möglich, Daten mit anderen Methoden aus anderen Quellen abzurufen. Bitte beachten Sie, dass einige von ihnen Hacks oder Workarounds enthalten können, anstatt auf Lösungen zu setzen, auf die das Produktionssystem angewiesen ist.

Methode 1: KERN

Die meisten öffentlichen APIs ermöglichen es Entwicklern heute, Daten bidirektional zwischen Client und Server zu senden, indem sie eine Funktion namens CORS (Cross-Origin Resource Sharing) aktivieren. Der Browser überprüft, ob ein bestimmter HTTP-Header ( Access-Control-Allow-Origin ) festgelegt ist und die Domäne der anfragenden Site im Wert des Headers aufgeführt ist. Wenn dies der Fall ist, erlaubt der Browser das Einrichten von AJAX-Verbindungen.

Da Entwickler die Antwortheader anderer Server jedoch nicht ändern können, kann nicht immer auf diese Methode zurückgegriffen werden.

Methode 2: JSONP

JSON mit P- Addition wird im Allgemeinen als Problemumgehung bezeichnet. Es ist nicht die einfachste Methode, aber die Arbeit wird trotzdem erledigt. Diese Methode nutzt die Tatsache, dass Skriptdateien von jeder Domäne geladen werden können. Es ist jedoch wichtig zu erwähnen, dass die Anforderung von JavaScript-Code aus externen Quellen immer ein potenzielles Sicherheitsrisiko darstellt. Dies sollte generell vermieden werden, wenn eine bessere Lösung verfügbar ist.

Die mit JSONP angeforderten Daten sind in der Regel JSON. Dies entspricht der in JavaScript für die Objektdefinition verwendeten Syntax, wodurch diese Transportmethode sehr einfach wird. Eine übliche Methode, um Websites die über JSONP erhaltenen externen Daten verwenden zu lassen, besteht darin, sie in eine Callback-Funktion zu packen, die über einen GET Parameter in der URL festgelegt wird. Sobald die externe Skriptdatei geladen ist, wird die Funktion mit den Daten als ersten Parameter aufgerufen.

<script>
function myfunc(obj){
    console.log(obj.example_field);
}
</script>
<script src="http://example.com/api/endpoint.js?callback=myfunc"></script>

Der Inhalt von http://example.com/api/endpoint.js?callback=myfunc kann folgendermaßen aussehen:

myfunc({"example_field":true})

Die Funktion muss immer zuerst definiert werden, sonst wird sie beim Laden des externen Skripts nicht definiert.

Sichere Cross-Origin-Kommunikation mit Nachrichten

Die window.postMessage() -Methode kann zusammen mit ihrer relativen Ereignisbehandlungsroutine window.onmessage sicher verwendet werden, um die Kommunikation über die Herkunft hinweg zu ermöglichen.

Die postMessage() Methode des window kann eine Nachricht an einen anderen senden aufgerufen werden window , die in der Lage sein wird , es mit seinen abzufangen onmessage Event - Handler, erarbeiten sie, und, falls erforderlich, eine Antwort an den Absender zurück Fenster senden mit postMessage() erneut.

Beispiel für ein Fenster, das mit einem untergeordneten Rahmen kommuniziert

• Inhalt von http://main-site.com/index.html :

   <!-- ... -->
   <iframe id="frame-id" src="http://other-site.com/index.html"></iframe>
   <script src="main_site_script.js"></script>
   <!-- ... -->
  

• Inhalt von http://other-site.com/index.html :

   <!-- ... -->
   <script src="other_site_script.js"></src>
   <!-- ... -->
  

• Inhalt von main_site_script.js :

   // Get the <iframe>'s window
   var frameWindow = document.getElementById('frame-id').contentWindow;
  
   // Add a listener for a response
   window.addEventListener('message', function(evt) {
       
       // IMPORTANT: Check the origin of the data! 
       if (event.origin.indexOf('http://other-site.com') == 0) {
           
           // Check the response
           console.log(evt.data);
           /* ... */
       }
   });        
  
   // Send a message to the frame's window
   frameWindow.postMessage(/* any obj or var */, '*');
  

• Inhalt von other_site_script.js :

   window.addEventListener('message', function(evt) { 
  
       // IMPORTANT: Check the origin of the data! 
       if (event.origin.indexOf('http://main-site.com') == 0) {
           
           // Read and elaborate the received data
           console.log(evt.data);
           /* ... */
  
           // Send a response back to the main window
           window.parent.postMessage(/* any obj or var */, '*');
       }
   });