La same origin policy è una policy di sicurezza applicata da tutti i moderni browsers ai linguaggi di script lato client, come JavaScript. Tale policy impedisce ad uno script in esecuzione nel browser di accedere a metodi e risorse offerti da siti differenti rispetto a quello da cui proviene lo script.
Se ad esempio uno script, ospitato sul sito www.site-a.com, cerca di eseguire una richiesta AJAX (usando l’oggetto XmlHttpRequest) verso il sito www.site-b.com tale richiesta viene bloccata:
Vi sono casi in cui è necessario superare questa restrizione: pensiamo ad esempio ad un sito che – tramite JavaScript – vuole recuperare dei tweets da Twitter… la soluzione si chiama JSONP!
JSONP
JSONP (JSON with padding) è una tecnica di comunicazione che deriva dal formato di scambio dati JSON.
Tale tecnica sfrutta il meccanismo del lazy loading, ovvero la possibilità di poter aggiungere – a runtime – degli script JavaScript ad una pagina HTML. Questo meccanismo non è soggetto alla same origin policy.
Una normale richiesta JSON restituisce dei dati, ad esempio:
{ title: “La Divina Commedia”, author: “Dante Alighieri” } |
Utilizzando JSONP invece, tali dati sono inseriti come argomento ad una funzione di callback:
buyBook({ title: “La Divina Commedia”, author: “Dante Alighieri” }); |
La risposta ad una richiesta JSONP è quindi del codice JavaScript che viene eseguito dal browser.
Callback dinamico
Nell’esempio precedente, il nome della funzione di callback era statico; modificando il metodo server-side che genera i dati JSONP, è possibile renderlo dinamico, in grado quindi di rispondere a qualsiasi richiesta JSONP.
Il trucco è passare, come parametro alla richiesta, il nome della funzione:
http://www.site-b.com/getData?callback=myCallBack
lo script lato server dovrà preparare la risposta JSONP leggendo tale parametro… ad esempio in PHP:
$data = array('title' =--> 'La Divina Commedia', 'author' => 'Dante Alighieri'); $json = json_encode($data); $jsonp_callback = isset($_GET['callback']) ? $_GET['callback'] : null; print $jsonp_callback ? "$jsonp_callback($json)" : $json; |
jQuery
jQuery semplifica molto l’utilizzo di JSONP: è sufficiente infatti aggiungere callback=? alla URL del parametro getJSON per generare automaticamente la funzione di callback
If the URL includes the string “callback=?” (or similar, as defined by the server-side API), the request is treated as JSONP instead
Utilizzando invece il più generale metodo ajax è possibile controllare tutti gli aspetti della richiesta, tra i quali il nome della funzione di callback.
É sempre piacevole cercare un argomento sul web e scoprire che tu lo hai già trattato in maniera ineccepibile e chiara 🙂
Grande Luca