JavaScript: same origin policy e JSONP

by luca
2 comments

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.

Related Posts

2 comments

lucadentella.it – AmbientMonitor 7 agosto 2013 - 09:44

[…] avviene tramite una chiamata JSONP effettuata sfruttando la libreria jQuery, come spiegato in un precedente articolo. Per semplificare lo sketch Arduino, ho deciso di rendere statico il nome della funzione di […]

Reply
Mauro 23 aprile 2014 - 06:35

É sempre piacevole cercare un argomento sul web e scoprire che tu lo hai già trattato in maniera ineccepibile e chiara 🙂

Grande Luca

Reply

Leave a Comment

18 − nove =