JavaScript
Beleid voor dezelfde oorsprong en communicatie van oorsprong

Invoering

Manieren om het Same Origin-beleid te omzeilen

Wat de client-side JavaScript-engines betreft (die binnen een browser worden uitgevoerd), is er geen eenvoudige oplossing beschikbaar voor het aanvragen van inhoud van andere bronnen dan het huidige domein. (Deze beperking bestaat trouwens niet in JavaScript-serverprogramma's zoals Node JS.)

Het is echter (in sommige situaties) inderdaad mogelijk om gegevens uit andere bronnen op te halen met behulp van de volgende methoden. Houd er rekening mee dat sommige van hen hacks of tijdelijke oplossingen kunnen bieden in plaats van waarop het productiesysteem van oplossingen moet vertrouwen.

Methode 1: CORS

Met de meeste openbare API's kunnen ontwikkelaars tegenwoordig gegevens bidirectioneel tussen client en server verzenden door de functie CORS (Cross-Origin Resource Sharing) in te schakelen. De browser controleert of een bepaalde HTTP-header ( Access-Control-Allow-Origin ) is ingesteld en of het domein van de aanvragende site wordt vermeld in de waarde van de header. Als dit het geval is, zal de browser het mogelijk maken om AJAX-verbindingen tot stand te brengen.

Omdat ontwikkelaars de reactiekoppen van andere servers echter niet kunnen wijzigen, kan op deze methode niet altijd worden vertrouwd.

Methode 2: JSONP

JSON met P toevoegen wordt meestal als een tijdelijke oplossing beschouwd. Het is niet de meest eenvoudige methode, maar het is nog steeds klaar. Deze methode maakt gebruik van het feit dat scriptbestanden vanuit elk domein kunnen worden geladen. Het is echter cruciaal om te vermelden dat het aanvragen van JavaScript-code van externe bronnen altijd een potentieel beveiligingsrisico is en dit moet in het algemeen worden vermeden als er een betere oplossing beschikbaar is.

De gevraagde gegevens met behulp van JSONP zijn meestal JSON , wat toevallig overeenkomt met de syntaxis die wordt gebruikt voor objectdefinitie in JavaScript, waardoor deze transportmethode zeer eenvoudig is. Een veelgebruikte manier om websites de externe gegevens te laten gebruiken die via JSONP zijn verkregen, is deze in een callback-functie te wikkelen, die wordt ingesteld via een GET parameter in de URL. Nadat het externe scriptbestand is geladen, wordt de functie aangeroepen met de gegevens als eerste parameter.

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

De inhoud van http://example.com/api/endpoint.js?callback=myfunc kan er zo uitzien:

myfunc({"example_field":true})

De functie moet altijd eerst worden gedefinieerd, anders wordt deze niet gedefinieerd wanneer het externe script wordt geladen.

Veilige communicatie van oorsprong met berichten

De methode window.postMessage() samen met de bijbehorende gebeurtenishandler window.onmessage veilig worden gebruikt om communicatie tussen verschillende window.postMessage() mogelijk te maken.

De methode postMessage() van het window kan worden opgeroepen om een bericht naar een ander window te verzenden, dat het zal kunnen onderscheppen met zijn onmessage gebeurtenishandler, het kan uitwerken en, indien nodig, een antwoord terugsturen naar het afzendervenster met postMessage() opnieuw.

Voorbeeld van venstercommunicatie met een kinderframe

• Inhoud van 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>
   <!-- ... -->
  

• Inhoud van http://other-site.com/index.html :

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

• Inhoud van 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 */, '*');
  

• Inhoud van 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 */, '*');
       }
   });