JavaScript: same origin policy e JSONP

luca 11/07/2013 2

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.

2 Comments »

  1. Mauro 23/04/2014 at 06:35 - Reply

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

    Grande Luca

Leave A Response »