State sviluppando in Javascript e avete bisogno di invocare delle XHR su un dominio diverso dal vostro? Bene se le Same Origin Policy vi danno proprio così fastidio e non riuscite a mettervi d'accordo per inserire gli header previsti per fare CORS ( Access-Control-Allow-Origin, etc), vi consiglio di provare questo simpatico tool che vi permette di aggirare facilmente la Same Origin Policy.

Per chi non lo sapesse le Same Origin Policy sono delle regole di sicurezza dei browser e prevedono la possibilità di eseguire del codice Javascript interoperabile solo con il DOM di risorse scaricate dallo stesso dominio (ovvero il same origin). Tale concetto viene esteso anche alle XHR, quindi se scarico il codice Javascript dal dominio A che tenta di aprire una XHR verso il dominio B, un browser che rispetta queste ormai consolidate regole di sicurezza mi blocca la XHR poiché riconosce che si sta tentando di accedere ad un dominio diverso da quello di origine. Per farla breve se scarico questo codice Javascript dal dominio http://127.0.0.1:8080:

var request = new XMLHttpRequest();
var url = "http://www.luigibifulco.it/blog/it"
request.open("GET", url, true);
request.onload = onload;
  function onload() {
          if (request.status === 200) {
              console.log("OK")
          } else {
              console.error("Status code was " + request.status);
          }
      }

non funzionerà per i motivi che vi ho già spiegato, nella fattispecie il dominio 127.0.0.1:8080 è diverso da www.luigibifulco.it!!

Il CORS è un meccanismo per condividere risorse tra domini diversi tra loro in modalità trusted. In pratica se il dominio A apre una XHR verso il dominio B, B a sua volta può rispondermi con un header per dire ad A, "si mi ricordo di te", oppure "no non ti conosco". Quindi se nella risposta HTTP B mi risponde con:

Access-Control-Allow-Origin: A

allora la XHR non mi verrà più bloccata dal browser. Per fare questo tipo di CORS è necessario però mettersi d'accordo con il proprietario del dominio che dovrà condividere le risorse.

Cors-Proxy non è altro che un server http che fa da proxy per le richieste verso altri domini. La caratteristica interessante di questo proxy è che ci permette di inoltrare le richieste verso gli altri domini utilizzando delle url del tipo:

 "http://localdomain:localport/externaldomain:externalport/path/to/resource"

Si può installare da linea di comando con NPM:

npm install -g corsproxy

una volta installato basta dare il comando corsproxy avviando così un server http sulla porta di default 1337. A questo punto possiamo provare una richiesta verso il mio blog per fare un test:

"http://127.0.0.1:1337/www.luigibifulco.it/blog/it"

Corsproxy può essere tranquillamente utilizzato per fare CORS senza aspettarsi header particolari dal dominio target. Il trucco c'è e si vede chiaramente, infatti il "Same Origin Domain" diventa "127.0.0.1:1337".
Quindi l'invocazione della XHR al dominio esterno di prima potrà essere fatta in questo modo:

var request = new XMLHttpRequest();
var proxy = "http://127.0.0.1:1337/";
var url = proxy+"www.luigibifulco.it/blog/it"
request.open("GET", url, true);
request.onload = onload;
  function onload() {
          if (request.status === 200) {
              console.log("OK")
          } else {
              console.error("Status code was " + request.status);
          }
      }

Ovviamente dovremmo scaricare il codice accedendo dal proxy :).
Un saluto e alla prossima.



  • submit to reddit
blog comments powered by Disqus