Utilizzare CORS per effettuare richieste Ajax verso un dominio diverso da quello corrente

Ajax sta per Asynchronous Javascript and XML, ovvero Javascript e XML asincrono, ed è una tecnologia usatissima in ambito web per fare in modo che gli script di una pagina possano recuperare dati da una fonte esterna. Questa tecnologia si scontra con la same origin policy che impedisce ai browser  (o almeno ci prova) di comunicare con siti terzi. Però la soluzione c’è  si chiama Cross-origin resource sharing (CORS).

Nell’eterna lotta degli standard contro gli utenti maliziosi ci sono diverse pietre miliari. Nel tempo sono stati posti alcuni paletti per tentare di arginare le possibilità degli script cattivi cercando però di trovare un compromesso tra funzionalità e possibilità. Uno di questi paletti è la same origin policy che dovrebbe impedire agli script di accedere a informazioni che risiedono su domini diversi da quello corrente. Senza questa limitazione se, per esempio, qualcuno riesce ad infilare un iframe in una pagina potrebbe prenderne praticamente possesso accedendo ai cookie e altre informazioni della sessione in corso e in pratica sarebbe in grado di sostituirsi all’utente. Si tratta quindi di una limitazione importante dal punto della sicurezza, che però lega le mani a noi sviluppatori.

In particolare è una gran limitazione in ambito Ajax perché impedisce all’oggetto XMLHttpRequest di accedere ad URL che si trovano su un altro dominio. La cosa può essere abbastanza agevolmente evitata attraverso l’uso di JSONP, ma XMLHttpRequest è decisamente più pratico e versatile. Quindi se esiste un’alternativa standard e funzionale perché non usarla?

La soluzione si chiama, come detto, Cross-origin resource sharing, in breve CORS, e si tratta di un meccanismo che permette al server di distinguere la provenienza di una richiesta e decidere di esaudirla o no. Nella sua forma più semplice permette di decidere in base al dominio di provenienza e tanto ci basta per far funzionare Ajax dove ci pare.

Il meccanismo è molto semplice. Lo user agent (il browser) assieme alla richiesta di una risorsa  invia un header “Origin” che contiene il dominio in cui sta girando lo script. Ovviamente questo campo non è manipolabile dallo script stesso. Il server riceve tale richiesta e risponde includendo un header Access-Control-Allow-Origin con cui dichiara quali domini accetta. Questo header di ricorno verrà usato dal browser per le richieste successive per non stare a fare richieste inutili. Tutto molto semplice no?

CORS è integrato da tempo nell’oggetto XMLHttpRequest in quasi tutti i browser standard (Firefox, Chrome, Safari). Opera l’ha integrato nella versione 12 uscita a Giugno 2012. Dovrebbe essere integrato anche in Internet Explorer 10. Per Internet Explorer 8 e 9 si può invece usare l’oggetto XDomainRequest che ha dei metodi molto simili a XMLHttpRequest.

Vediamo un banale esempio. Il nostro script client site contiene una if per distinguere il caso XMLHttpRequest da XDomainRequest:

var xhr;
var url = 'http://sito1.example.com/resource.php';
if (typeof XDomainRequest != 'undefined') {
  xhr = new XDomainRequest();
  xhr.open('get', url);
  xhr.onload = function() {
    document.getElementById("out").innerHTML = xhr.responseText;
  }
  xhr.send();
} else if (typeof XMLHttpRequest != 'undefined') {
  xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById("out").innerHTML = xhr.responseText;
    }
  };
  xhr.send();
} else {
  alert("Sorry, but your browser doesn't support Ajax");
}

La parte server side è ancora più semplice e in PHP sarebbe grossomodo solo questo:

header('Access-Control-Allow-Origin: *');

Al posto di * potete ovviamente metterci un dominio che volete.

Ecco fatto, adesso le richieste Ajax non saranno più un problema per nessuno :-)files/files/

2 Commenti per “Utilizzare CORS per effettuare richieste Ajax verso un dominio diverso da quello corrente”

Inserito: 18/06/2012 16:15

[…] Ajax sta per Asynchronous Javascript and XML , ovvero Javascript e XML asincrono, ed è una tecnologia usatissima in ambito web per fare in modo che gli script di una pagina possano recuperare dati da una fonte esterna. Questa tecnologia si scontra con la same origin policy che impedisce ai browser  (o almeno ci prova) di comunicare con siti terzi. Però la soluzione c’è  si chiama  Cross-origin resource sharing (CORS). Nell’eterna lotta degli standard contro gli utenti maliziosi ci sono diverse pietre miliari. […] Leggi l'articolo completo su Webnology […]

Inserito: 19/06/2012 06:16

[…] Visita il sito saitfainder oppure iscriviti al feed Leggi l'articolo completo su AlterVista […]

Commenta