JavaScript
Stessa politica di origine e comunicazione incrociata

introduzione

Modi per eludere la politica della stessa origine

Per quanto riguarda i motori JavaScript lato client (quelli in esecuzione all'interno di un browser), non esiste una soluzione immediata per la richiesta di contenuti da fonti diverse dal dominio corrente. (A proposito, questa limitazione non esiste negli strumenti JavaScript-server come Node JS.)

Tuttavia, è (in alcune situazioni) effettivamente possibile recuperare i dati da altre fonti usando i seguenti metodi. Si prega di notare che alcuni di essi potrebbero presentare hack o soluzioni alternative invece di soluzioni su cui il sistema di produzione dovrebbe fare affidamento.

Metodo 1: CORS

La maggior parte delle API pubbliche oggi consente agli sviluppatori di inviare dati bidirezionalmente tra client e server abilitando una funzionalità chiamata CORS (Cross-Origin Resource Sharing). Il browser controllerà se una determinata intestazione HTTP ( Access-Control-Allow-Origin ) è impostata e che il dominio del sito richiedente è elencato nel valore dell'intestazione. Se lo è, il browser consentirà di stabilire connessioni AJAX.

Tuttavia, poiché gli sviluppatori non possono modificare le intestazioni di risposta di altri server, non è sempre possibile fare affidamento su questo metodo.

Metodo 2: JSONP

Il JSON con P aggiunta è comunemente considerato come una soluzione alternativa. Non è il metodo più diretto, ma svolge ancora il lavoro. Questo metodo sfrutta il fatto che i file di script possono essere caricati da qualsiasi dominio. Tuttavia, è fondamentale ricordare che la richiesta di codice JavaScript da fonti esterne è sempre un potenziale rischio per la sicurezza e questo dovrebbe essere generalmente evitato se è disponibile una soluzione migliore.

I dati richiesti utilizzando JSONP sono tipicamente JSON , il che accade per adattarsi alla sintassi utilizzata per la definizione dell'oggetto in JavaScript, rendendo questo metodo di trasporto molto semplice. Un modo comune per consentire ai siti Web di utilizzare i dati esterni ottenuti tramite JSONP è quello di avvolgerli all'interno di una funzione di callback, che viene impostata tramite un parametro GET nell'URL. Una volta caricato il file di script esterno, la funzione verrà richiamata con i dati come primo parametro.

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

Il contenuto di http://example.com/api/endpoint.js?callback=myfunc potrebbe essere simile al seguente:

myfunc({"example_field":true})

La funzione deve sempre essere definita per prima, altrimenti non verrà definita quando viene caricato lo script esterno.

Comunicazione incrociata sicura con i messaggi

Il metodo window.postMessage() insieme al relativo gestore di eventi window.onmessage può essere utilizzato in modo sicuro per abilitare la comunicazione tra origini.

Il metodo postMessage() della window destinazione può essere chiamato per inviare un messaggio ad un'altra window , che sarà in grado di intercettarlo con il suo gestore di eventi onmessage , elaborarlo e, se necessario, inviare una risposta alla finestra del mittente usando postMessage() nuovo.

Esempio di finestra che comunica con una cornice per bambini

• Contenuto di 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>
   <!-- ... -->
  

• Contenuto di http://other-site.com/index.html :

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

• Contenuto di 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 */, '*');
  

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