Fare richieste cross-domain in GET e POST con JQuery o XMLHttpRequest
Se avete speso un tempo significante di programmazione in javascript, sviluppando applicazioni che inviano dati ad altri server, sarete sicuramente incappati nelle strette regole di cross-domain policy introdotte con la tecnologia AJAX (implementabile nativamente in javascript con XMLHttpRequest() o jQuery, vedi $.ajax).
Ci sono molti modi per aggirare il problema. Utilizzare uno script che giri sul server locale dove la pagina con la richiesta in ajax stessa risiede, esempio:
<?php if (!isset($_GET['url'])) die(); $url = urldecode($_GET['url']); $url = 'http://' . str_replace('http://', '', $url); echo file_get_contents($url); ?> |
Questo proxy è necessario, poichè le richieste in ajax da un dominio (come localhost) ad un altro dominio, vengono bloccate per evitare attacchi di tipo XXS.
Se però la richiesta al dominio remoto è uno script .php come questo a farla e poi passa le info allo script ajax sullo stesso dominio, non ci sono problemi.
Questa è una prima possibile soluzione. Ma se vogliamo qualcosa di più pulito e affidabile, dobbiamo usare il CORS, Cross-Origin Resource Sharing.
Se pur vero che non tutti i browser supportano questa modalità, sarete sorpresi nel sapere che IE 8+, Firefox 3.5+, Chrome e Safari 4+ la supportano… si anche IE 8+ pensate!
Col protocollo Cross-Origin resource sharing, è possibile fare richieste ajax cross-domain, ovvero da un dominio ad un altro. Quindi, la domanda è, come funziona il tutto? Vediamolo!
Cross-Origin Resource Sharing
Il W3C con una bozza definisce brevemente come il browser e il server devono comunicare per raggiungere destinazioni che non coincidano con il server d’origine (provenienza). Nella pratica vengono utilizzati dei particolari header per consentire o negare una richiesta da un’altro dominio.
Ad esempio, se uno script, su un sito A:
http://www.sito-a.com/script.js |
effettua una richiesta in GET/POST via AJAX ad un sito:
http://www.sito-b.com/pagina.php |
si otterrebbe un errore da console javascript. La richiesta dunque fallirebbe, per ragioni di origine dei dati da un dominio differente “sconosciuto” (questa cross-origin policy è introdotta per evitare attacchi di tipo XSS o CSRF portati avanti con tecnologia AJAX che permetterebbe altrimenti una comunicazione franca verso l’esterno).
La soluzione risiede quindi nel settare un apposito header Access-Allow-Origin nello script di destinazione, che nel caso di uno script in php possiamo semplicemente fare usando la funzione header().
Il W3C fornisce in questo senso, diversi header per ogni esigenza:
Access-Control-Allow-Origin: http://www.sito-a.com Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, GET Access-Control-Allow-Headers: NCZ Access-Control-Max-Age: 1728000 |
Quindi modificando la nostra pagina.php presente sul sito-b in questo modo:
header("Access-Control-Allow-Methods: POST, GET"); //consentiamo richieste da origini sconosciute sia in POST che in GET. (attenzione a come usate il comando, valutate eventuali misure di sicurezza) |
La richiesta ajax da parte di un qualsiasi sito, sia in GET che POST avverrebbe con successo.
Commenti