JavaScript
Samma ursprungspolitik och kommunikation över ursprung

Introduktion

Sätt att kringgå politik med samma ursprung

När det gäller JavaScript-motorer på klientsidan (de som körs i en webbläsare) finns det ingen enkel lösning för att begära innehåll från andra källor än den nuvarande domänen. (Förresten, denna begränsning finns inte i JavaScript-serververktyg som Node JS.)

Det är dock (i vissa situationer) verkligen möjligt att hämta data från andra källor med hjälp av följande metoder. Observera att vissa av dem kan ha hack eller lösningar i stället för lösningar som produktionssystemet bör lita på.

Metod 1: CORS

De flesta offentliga API: er i dag tillåter utvecklare att skicka data i två riktningar mellan klient och server genom att aktivera en funktion som heter CORS (Cross-Origin Resource Sharing). Webbläsaren kommer att kontrollera om en viss HTTP-rubrik ( Access-Control-Allow-Origin ) är inställd och att den begärande webbplatsens domän listas i rubrikens värde. Om så är fallet tillåter webbläsaren att etablera AJAX-anslutningar.

Eftersom utvecklare inte kan ändra andra servers svarhuvuden kan den här metoden inte alltid lita på.

Metod 2: JSONP

JSON med P- tillägg är ofta skylden att vara en lösning. Det är inte den mest enkla metoden, men det får fortfarande jobbet gjort. Denna metod utnyttjar det faktum att man kan ladda skriptfiler från vilken domän som helst. Det är fortfarande viktigt att nämna att begärning av JavaScript-kod från externa källor alltid är en potentiell säkerhetsrisk och detta bör i allmänhet undvikas om det finns en bättre lösning tillgänglig.

Uppgifterna som begärs med hjälp av JSONP är vanligtvis JSON , vilket råkar passa den syntax som används för objektdefinition i JavaScript, vilket gör denna transportmetod mycket enkel. Ett vanligt sätt att låta webbplatser använda den externa informationen som erhållits via JSONP är att slå in den i en återuppringningsfunktion, som ställs in via en GET parameter i URL: n. När den externa skriptfilen laddas, kommer funktionen att kallas med data som sin första parameter.

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

Innehållet i http://example.com/api/endpoint.js?callback=myfunc kan se ut så här:

myfunc({"example_field":true})

Funktionen måste alltid definieras först, annars definieras den inte när det externa skriptet laddas.

Säker kommunikation med ursprungskors med meddelanden

window.postMessage() tillsammans med den relativa händelsehanteraren window.onmessage kan användas på ett säkert sätt för att möjliggöra kommunikation mellan olika ursprung.

Den postMessage() metoden för målet window kan kallas för att skicka ett meddelande till en annan window , vilket kommer att kunna avlyssna den med sin onmessage händelsehanterare, utarbeta den, och, om nödvändigt, sända ett svar tillbaka till avsändaren fönstret med hjälp postMessage() igen.

Exempel på fönster som kommunicerar med en barnram

• Innehållet i 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>
   <!-- ... -->
  

• Innehållet i http://other-site.com/index.html :

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

• Innehållet i 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 */, '*');
  

• Innehållet i 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 */, '*');
       }
   });