JSONP je technika, díky které funguje drtivá většina reklamních systémů a mnoho dalších služeb jako např. cross-domain tracking. Jedná se o způsob, jak přenést data z 3rd party kontextu do 1st party kontextu. Toto umožňuje identifikaci návštěvníka napříč celým internetovým spektrem.
Varování: tento článek není pro másla!
Jak to funguje?
JavaScript uvnitř právě načtené webové stránky pošle HTTP request na centrální server, který vůči danému webu vystupuje v 3rd party kontextu.
Server odpoví s obsahem ve tvaru volání JavaScriptové funkce s jedním parametrem obsahující JavaScriptový objekt.
JavaScript na webu již předem vytvořil funkci, kterou odpověď ze serveru volá a díky tomu je možné odpověď z 3rd party kontextu zpracovat lokálně ve 1st party kontextu a třeba uložit cookie.
Ukázka z praxe aneb k čemu to může být užitečné
Např. velmi slušná trackovací infrastruktura cpex.cz používá JSONP ke zvýšení soukromí anonymních uživatelů internetu a k optimalizaci zátěže hlavních trackovacích serverů. Detekce anonymních oken je totiž téměř nemožná. Vychází se tedy z jednoduché premisy a tou je, že uživatel v anonymním okně nebude mít cookie strarší než 1 den.
Takového návštěvníka pak systém netrackuje. Ale jak to script při návštěvě nového webu zjistí? Zeptá se synchronizačního serveru, který vrátí k danému uživateli časové razítko první návštěvy synchronizačního serveru.
Příprava callbacku
Script tedy nejdříve připraví funkci pro zpracování zaslaných dat. Této funkci se honosně říká callback.
// create callback function for JSONP
var sync_name = "jsonp_callback";
window[sync_name] = function(data){
// print retrieved data to console
console.dir(data);
}
Volání vzdáleného serveru (3rd party)
Následně script kontaktuje synchronizační server a v lepším případě pošle i očekávaný název callbacku jako HTTP GET parametr.
function loadScript(src){
var s,
r,
t;
r = false;
s = document.createElement('script');
s.type = 'text/javascript';
s.src = src;
t = document.getElementsByTagName('script')[0];
t.parentNode.insertBefore(s, t);
}
loadScript("//pixel.cpex.cz/uuid.js?jsp="+sync_name);
Důležité je zde to, že se jedná o načtení scriptu. Ten se totiž po získání dat ze serveru vykoná. A s ním i naše připravená funkce jsonp_callback.
Odpověď ze serveru
Nyní se ještě podíváme na odpověď ze serveru.
jsonp_callback({
timestamp : '656562454',
user_id : 'A7D51F1033B'
});
Výsledek zpracovaný naším callbackem
A výstupem našeho scriptu je v konsoli výpis
|
timestamp
|
„656562454“ | |
|
user_id
|
„A7D51F1033B“ |
Toto je celý princip JSONP.
Další zdroje
- Wiki – https://en.wikipedia.org/wiki/JSONP
- Oblíbené jQuery – https://www.sitepoint.com/jsonp-examples/
- StackOverflow – http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about
Diskuse
S jakým použitím JSONP jste se setkali?