progetto e realizzazione di uno strumento per l'acquisizione e trasmissione di documenti web
DESCRIPTION
PROGETTO E REALIZZAZIONE DI UNO STRUMENTO PER L'ACQUISIZIONE E TRASMISSIONE DI DOCUMENTI WEBTRANSCRIPT
UNIVERSITA’ DEGLI STUDI DI TRIESTE
______________________
FACOLTA’ DI INGEGNERIACorso di Laurea in Ingegneria Informatica
TESI DI LAUREAin
PROGRAMMAZIONE WEB
PROGETTO E REALIZZAZIONE DI UNO STRUMENTO PER L'ACQUISIZIONE E TRASMISSIONE DI DOCUMENTI WEB
Laureando: Relatore:Gabriele Formisano Prof. Ing. Eric Medvet
_________Anno Accademico 2011/2012
1
INDICE
Introduzione………………………………3
1 Motivazioni…………………………….4
2 Progettazione…………………………8
3 Realizzazione……………………………11
4 Server e Test…………………………….22
Appendice
Bibliografia
2
Introduzione
Negli ultimi anni il web è entrato sempre più nelle nostre vite, ormai gran parte dell’informazione e dei servizi consumati dalle persone passa attraverso esso, infatti il web ogni giorno si arricchisce con nuove tecnologie che lo migliorano sia nell’interfaccia visiva e nell’usabilità sia introducendo nuove funzionalità sempre più complesse. Al contempo però l’utilizzo del web può mettere in “pericolo” sia l’utente che visualizza i contenuti e utilizza i servizi, sia gli amministratori che gestiscono i siti web dove questi risiedono. Infatti sono frequenti attacchi da parte di entità esterne che mirino a distorcere le informazioni, attraverso modifiche illecite, contenute nei siti web che all’acquisizione di dati personali, anche sensibili, come password per conti correnti e carte di credito, agli inconsapevoli utenti.L’obiettivo di questa tesi è l’implementazione di un software che possa aiutare al rilevamento di questi ed altri tipi di attacchi, aiutando al contempo sia l’utente che l’amministratore del sito web a salvaguardare la propria sicurezza on-line, infatti si tratterà della progettazione e della realizzazione di uno strumento per l'acquisizione e la trasmissione di documenti web e di come questo possa essere utilizzato nel campo della sicurezza sul web.Nella prima parte si andranno ad esporre le motivazioni che hanno spinto alla realizzazione di questo strumento, la tematica del capitolo riguarderà la descrizione di alcuni tipi di attacco che un sito web può subire e le contromisure che si possono adottare.L'argomento della seconda parte riguarderà la fase di progettazione, verranno presentate le caratteristiche che lo strumento dovrà avere e quale tipologia di dati dovrà generare. La terza parte sarà dedicata alla fase di realizzazione dello strumento, per cui verranno descritte le scelte che si sono fatte durante la fase di sviluppo, le tecnologie utilizzate ed analizzati gli algoritmi e i protocolli di comunicazione usati.Nella quarta parte verranno descritti i test effettuati e i risultati ottenuti.
3
1. Motivazioni
Lo strumento che si vorrà realizzare si andrà ad inserire in un progetto sullo studio di rilevazioni di attacchi informatici a siti web dal “Machine Learning Lab” del dipartimento DIA dell’Università di Trieste. In questo capitolo andremmo a descrivere alcune delle tipologie di attacco che un sito web può subire e per alcune di queste descrivere quali siano le possibili contromisure. Ora andremmo ad esporre e comprendere le motivazioni che hanno spinto allo sviluppo dello strumento.Queste motivazioni possono essere divise in due gruppi:
1. Ricerca: sono attacchi poco conosciuti, tendenzialmente sono innocui all’utente, ma sono molto difficili da rilevare da parte di un amministratore di un sito e posso portare a risultati imprevisti. Si tenterà di esporre una metodologia per contrastarli. Sono il principale motivo che hanno spinto alla creazione del suddetto studio.
2. Pratica: sono attacchi comuni e si conosco già sia gli effetti che alcune tipologie di contromisure, in questo caso si andrà a descrivere quale possa essere l’utilizzo dello strumento in questi determinati casi.
1.1. Motivazioni di Ricerca
1.1.1. Search redirection
Un attacco di Search Redirection avviene quando un utente proveniente da una pagina dei risultati di un motore di ricerca viene reindirizzato ad un sito web scelto dall'attaccante. Il server web compromesso identifica automaticamente queste richieste in base al Referrer dell'header HTTP, che assume valori speciali quando la pagina precedente visitata è una pagina dei risultati di un motore di ricerca. In caso contrario, il server web restituisce il contenuto originale. L'attacco Search Redirection può essere difficilmente rilevato dall'amministratore del sito, che di solito lo visita senza provenire da una pagina dei risultati di un motore di ricerca.
4
1.1.2. Search spam
Un attacco Search Spam consiste invece nell'aggiunta di contenuto illegittimo ad un sito web esistente. L'aggiunta può essere costituita da una porzione di pagina o da una pagina intera che di solito contiene uno o più link ad un altro sito web scelto dall'attaccante. Questo attacco mira deliberatamente a manipolare i risultati dei motori di ricerca, dal momento che gli algoritmi di ranking, come ad esempio PageRank, dipendono anche dal numero e dalla rilevanza di link in entrata.Attacchi di questo tipo in siti web di interesse pubblico potrebbe essere molto pericolosi. In primo luogo, essi sono difficili da individuare, perché gli amministratori del sito non saranno mai in grado rilevare alcuna anomalia nel contenuto servito. Seconda e più importante, gli utenti visualizzeranno il contenuto di un sito attendibile senza sospetti, nemmeno l'utilizzo di protocolli crittografici, come HTTPS sarebbe di aiuto agli utenti, perché il Transport Layer Security autentica il server del sito nel suo complesso. Infatti, questi attacchi possono potenzialmente creare uno scenario molto strano.
Come si diceva in precedenza queste due tipologie di attacco hanno portato alla creazione di uno studio precedentemente citato; quello che si pensa è che, analizzando il codice delle pagine web, in particolare la struttura del DOM Tree, si possano rilevarli e contrastarli evitando così spiacevoli inconvenienti per l’utente.
5
1.2. Motivazioni Pratiche
1.2.1. Web Defacement
Il "Web Defacement" è il processo di introduzione di modifiche non autorizzate ad un sito web, è una forma molto comune di attacco. Il Web è diventato una componente essenziale della nostra società. Un gran numero di organizzazioni di tutto il mondo si affidano al Web per le loro operazioni quotidiane, in tutto o solo in parte. Oggi, la fiducia in un'organizzazione dipende fortemente dalla qualità della sua presenza nel Web, che deve trasmettere un senso di fiducia e affidabilità ai suoi utenti nel tempo. Ogni attacco che corrompe il contenuto di un sito Web può quindi causare gravi danni per l'organizzazione, così come per i suoi utenti o clienti.Nella maggior parte dei siti web manca un sistema di una sorveglianza sistematico dell'integrità e la rilevazione di Web Defacement è spesso basate su controlli occasionali da parte degli amministratori o il feedback da parte degli utenti. Infatti, un recente studio su più di 60.000 siti compromessi si è scoperto che il 40% dei defacement è durato per più di un settimana e che il tempo di reazione non diminuisce in modo significativo per i siti ospitati da parte degli Internet Provider né tenendo conto dell'importanza dei siti quantificata con il loro PageRank.Esistono delle tecniche per la rilevazione automatica di “Web Defacement” che sono destinati ad essere gestiti dall'organizzazione che ospita il sito web da monitorare, infatti queste tecnologie richiedono l'installazione di apparecchi dedicati all'interno dell'organizzazione. Essenzialmente, tutte tali tecnologie si basano sul confronto tra la risorsa Web e una copia incorrotta conservata in un luogo sicuro. Ogni volta che la risorsa Web viene modificata, la copia di fiducia viene aggiornata e verrà utilizzata nel caso in cui ci sia il sospetto che la pagina on line possa aver subito delle modifiche non autorizzate, in questo modo si potrà verificare se effettivamente è avvenuta una contraffazione.
6
1.2.2. Phishing
Un altro campo di utilizzo di questo strumento è nella rilevazione di Phishing. Il Phishing è una forma di frode online che mira a rubare le informazioni sensibili ad un utente, quali password di servizi o numeri di carte di credito. La vittima è indotta a fornire queste informazioni ad una pagina web che viene realizzata dall'attaccante in modo che imiti una pagina legittima. Recenti statistiche circa il numero crescente di attacchi phishing suggeriscono che questo problema di sicurezza necessita ancora di attenzioni significative. Una soluzione a questo problema sta, quando un utente inserisce le la coppia username e password, nel confronto della pagina con cui sta interagendo e la pagina legittima, se queste due sono troppo simili probabilmente saremo di fronte ad un caso di phishing, per cui sarà necessario avvisare l'utente del pericolo.
Anche in questi due casi lo strumento che si vorrà realizzare è utile nel contrastare queste tipologie d’attacco, esso è in grado si ottenere “copia” della pagina acquisita per cui nel primo caso la si potrà utilizzare come copia di fiducia mentre nel secondo la si potrà confrontare con la pagina originale e avvisare l’utente del pericolo di phishing.
7
2. Progettazione
Quello che si vorrà realizzare in questa tesi è uno strumento che sia in grado di acquisire e trasmettere documenti web, o più comunemente chiamate pagine internet, esso dovrà essere in grado di funzionare autonomamente e di lavorare in modo sistematico e automatico. Uno strumento del genere non esiste in commercio per cui lo si dovrà creare ex novo, in quanto l’unico modo con cui si potrebbero ottenere gli stessi risultati sarebbe quello di farlo manualmente, ma questo richiederebbe un inutile spreco di tempo e risorse. Questo strumento dovrà inoltre comunicare con una applicazione remota, che gli invierà il lavoro da eseguire, cioè una lista di documenti web da analizzare, esso successivamente dovrà rispondere con i dati ottenuti dalla relativa elaborazione.Si è pensato, per questi motivi, di creare una architettura di tipo client-server, dove lo strumento si comporterà come un server, cioè riceverà i comandi da un client, eseguirà il lavoro e restituirà i risultati; in realtà come vedremo più avanti il comportamento sarà leggermente diverso a causa di alcuni limiti delle tecnologie utilizzate.
Lo strumento, come detto, avrà principalmente due funzioni:
Acquisizione: generazione a partire dal documento web di due file: un file di tipo testuale contenente la struttura del
DOM tree, cioè la rappresentazione ad oggetti del documento
un file immagine con la rappresentazione grafica del documento web, detta anche “screenshot”.
Trasmissione: i file generati dovranno essere trasmessi ad una applicazione remota
8
2.1. Che cos’è il DOM e la sua importanza
Il DOM (Document Object Model) è un interfaccia per la programmazione di applicazioni (API), cioè un insieme di funzioni metodi e proprietà che i programmi posso richiamare al fine di delegare il lavoro al sistema sottostante, specifica per rappresentare e interagire oggetti contenuti nei documenti web: HTML o XML. É indipendente dal linguaggio e cross-platform, è stato definito dal W3C anche se poi i costruttori di browser ne hanno variato e creato versioni di proprietarie.Con il Document Object Model, i programmatori possono creare documenti, navigare la loro struttura e aggiungere, modificare o eliminare elementi e contenuti. Tutto ciò che si trova in un documento HTML o XML è possibile accederci, modificarlo, cancellarlo o aggiungerlo utilizzando il Document Object Model.
Inoltre esso definisce un modello di come gli oggetti interagiscono tra di loro, cioè le relazioni gerarchiche e di parentela, infatti esso è usato come struttura intermedia tra una pagina web (HTML o XML) e la visualizzazione finale creata dai moderni web browser. Infatti un browser prima di visualizzare la pagina web crea a partire dal file HTML o XML una struttura ad oggetti dei vari elementi, che verranno poi rappresentati, questa è salvata in memoria e ci si potrà accedere attraverso i metodi definiti nel DOM o con il JavaScript, modificandone il contenuto in tempo reale.
Esempio:
<TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR> </TBODY></TABLE>
9
La pagina è costituita da nodi , in sostanza ogni cosa presente nella pagina, ogni tag (come<table>), ogni testo (come "Shady Grove") è un nodo. I nodi (come ad es.<a>) possono avere attributi (come href="...") e proprietà. Inoltre un nodo (come<body>) può contenere altri nodi, in questo caso si parla di«elemento» della pagina.
Lo strumento descritto in questa tesi dovrà ricavare la struttura gerarchica del DOM e per ogni Nodo definire i propri figli e i seguenti attributi:
● tipo di elemento (html, body,p, div, ecc...)● posizione nella finestra del browser definite dalle
coordinate x, y● dimensione del box altezza e larghezza in pixel● contenuto (content) :
● testo visibile per i box normali ( ricorsivamente, il testo dei figli)● codice per gli script● coppie <nome, valore> per gli attributi definiti esplicitamente (href, src,id,class..)
● timestap: orario della creazione del file testo
Il file di testo risultante sarà in formato JSON e prendendo le esempio precedente risulterà: (2 riche sul json e esempio)
Si è scelto di estrarre il DOM invece di analizzare direttamente il codice HTML o XML principalmente perché la struttura della pagina è influenzata, non solo dal codice ma anche da altri file, in particolare citiamo CSS (Cascading Style Sheets ), fogli di stile la cui funzione è quella di formattare il contenuto, e JavaScript (linguaggio di scripting impiegato nel il web) utilizzato per interagire e modificare sia il contenuto e che la grafica delle pagina web, in questo modo avremo la possibilità di avere l’effettiva struttura della pagina.
10
3. Realizzazione
Lo strumento che si vorrà realizzare dovrà, come già detto, estrarre delle informazioni e interagire con i documenti web, quindi c’è la necessità di interpretarne il codice e per fare questo ci si è appoggiati ad un software di uso comune utilizzato a questo scopo: il web browser. I web browser sono gli unici programmi in commercio che hanno come funzione principale quella di scaricare un documento web da un server remoto interpretarne il codice e di crearne una rappresentazione visiva, cioè ciò che ci viene mostrato ogni volta che ci colleghiamo ad un sito internet con un browser. La rappresentazione che questo programma effettua del documento, come sappiamo, è condizionata non solo dal codice con cui è scritto, HTML/XML, ma anche come abbiamo citato nel capitolo precedente dai file CSS e JavaScript. Per questi motivi lo strumento si baserà su una web browser, la scelta è ricaduta su Google Chrome, grazie al quale è possibile creare delle estensione per aggiungere nuove funzionalità al browser. Infatti quello che andremo effettivamente a sviluppare sarà proprio un estensione per Google Chrome.In questo capitolo andremo ad analizzare gli algoritmi che sono alla base dell’acquisizione della pagina web e successivamente quelli relativi alla trasmissione dei dati.
3.1. Extensions
Le estensioni sono piccoli programmi software che possono modificare e migliorare la funzionalità del browser Chrome. Si scrivono utilizzando tecnologie web come HTML, JavaScript e CSS. È inoltre possibile utilizzare il sistema di estensione per costruire pacchetti applicativi, una sorta di app scaricabile ed installabile dal web.
Ogni estensione deve avere i seguenti file: Un file manifest Uno o più file HTML (a meno che l'estensione sia un
tema) Uno o più file JavaScript (opzionali) Qualsiasi altro tipo di file, ad esempio file di
immagine, CSS...Questi file devono essere contenuti in una singola cartella.
11
3.1.1. Manifest
Il file manifest, chiamato manifest.json, fornisce informazioni circa l'estensione, ad esempio il nome dell'estensione, i file contenuti, quali azioni può compiere sul browser, ecc...Di seguito è mostrato un esempio di manifest:
{ "name": "My Extension", "version": "2.1", "description": "Gets information from Google.", "icons": { "128": "icon_128.png" }, "background": { "scripts": ["bg.js"] }, "permissions": ["http://*.google.com/", "https://*.google.com/"], "browser_action": { "default_title": "", "default_icon": "icon_19.png", "default_popup": "popup.html" }}
3.1.2. Background Page
Molte estensioni hanno una Background Page, una pagina invisibile che contiene la logica principale dell'estensione. Le Background Page sono particolarmente utili se si voglia eseguire un script per un lungo periodo di tempo, infatti esse partono all’apertura del browser e durano per tutto il tempo necessario al processo eseguito o finché il browser stesso non sarà chiuso. Le Background Page sono sempre attive per cui, se ce ne sono molte installate, le prestazioni di Chrome possono diminuire.
3.1.3. Content Scripts
Se un'estensione deve interagire con le pagine web che l'utente carica allora l'estensione deve utilizzare un Content Script. I Content Script sono file JavaScript che vengono eseguiti all’interno delle pagine web. Grazie allo standard Document Object Model (DOM), possono leggere i dettagli delle pagine web visitate dal browser e apportarne modifiche.
12
3.2. Descrizione dei file:
L’estensione, creata per il progetto, è formata dai i seguenti file, il codice lo si potrà analizzare nell’appendice:
background page: background.html: pagina principale contiene il
canvas
Content Script: main.js: contiene la logica principale dell’intero
programma, domgenerator: estrae il DOM dalla pagina visitata, pageinfo: ricava le dimensioni della pagina, Jquery: libreria Jquery, Jszip: libreria javascript per creare file zip
13
3.3. Descrizione degli algoritmi
3.3.1. Acquisizione
3.3.1.1. Algoritmo principale
L’algoritmo principale dell’estensione si trova nel file main.js, esso viene invocato dal file background.html, dove risiedono i link ai JavaScript e l’elemento canvas. Quando si avvia il browser, l’estensione si si attiva automaticamente per prima cosa essa contatterà l’applicazione esterna per controllare se è pronta all’invio del lavoro, se lo è, risponderà con una lista di pagine web, che verranno inserite in una coda e per ognuna di queste verranno eseguiti i seguenti passi:
1. apertura della pagina web su un nuovo tab del browser,
2. se necessario, verrà estratto il DOM (vedere paragrafo x.y)
3. se necessario, verrà ricavato lo screenshot (vedere paragrafo x.y)
4. verrà generato un file “zip” in cui verranno inseriti i dati precedentemente ottenuti
5. invio del file zip6. conferma dell’arrivo del file a destinazione,
inserimento di eventuale altre pagine nella coda,7. chiusura del tab,8. se la coda non è vuota, ritornare al punto 1.
3.3.1.2. Estrazione del DOM:14
per estrarre il DOM si esegue sulla pagina caricata lo script contente nel file domgenerator.js, questo ricava ricorsivamente ogni nodo dell’albero, i relativi figli e gli attributi associati.
1. Ottenere la radice del documento2. ricavare gli elementi:
o tipo di elemento (html, body,p, div, ecc...)o posizione nella finestra del browser definite dalle
coordinate x, yo dimensione del box altezza e larghezza in pixelo contenuto (content) :o testo visibile per i box normali ( ricorsivamente, il testo
dei figli)o codice per gli scripto coppie <nome, valore> per gli attributi definiti
esplicitamente (href, src,id,class..) o timestap: orario della creazione del file testo
3. ottenere tutti i figli4. per ogni figlio ripetere dal punto 2 fino al
completamento dell’intero albero.
3.3.1.3. Creazione dell’Immagine
L’immagine della pagina web è ottenuta utilizzando il metodo chrome.tabs.captureVisibleTab() fornito dal browser Google Chrome, però questo permette di ottenere l’immagine della sola parte visibile del tab attivo nella finestra del browser, in un formato di stringa codificata. Quindi se vogliamo ottenere la pagina web in tutta la sua interezza, altezza e larghezza, dovremo usare questo metodo per ottenere le varie parti della pagina e successivamente unirle insieme. Esistono delle funzioni JavaScript per poter posizione la finestra del browser in un altro punto della pagina , per cui interando questa funzioni saremo in grado di coprire l’intera pagina, mentre per unire le varie immagini in una unica si sono usate delle proprietà dell’elemento Canvas. L’elemento Canvas è stato introdotto con la nuova versione dell’HTML, cioè HTML5, questo permette la manipolazione delle immagini. Infatti esso ha un metodo che consente di posizionare al suo interno un’immagine utilizzando il metodo drawImage(image, dx, dy), dove “image” è l’immagine da inserire, “dx” la coordinata x dell’elemento canvas partendo da sinistra e “dy” quella y partendo dall’alto. Per
15
cui creando un elemento canvas con le stesse dimensioni della pagina ed inserendo di volta in volta la parte di questa ottenuta con il metodo chrome.tabs.captureVisibleTab(), si ha possibilità di creare l’immagine intera della pagina.Infine per estrarre l’immagine dall’elemento canvas si utilizza il metodo toDataURL() metodo ha due argomenti: il tipo di MIME per i dati immagine di ritorno (PNG, JPEG), e il livello di qualità dell'immagine entro il range da "0.0" a "1.0"
Per cui l'algoritmo per la creazione dello screenshot della pagine web è descrivibile mediante alcuni passaggi:
1. ottenere le dimensione della pagine e della finestra2. creazione di un elemento canvas delle stesse
dimensione della pagina da acquisire3. spostare la finestra del browser all'inizio della pagina
(cordinata 0,0),4. utilizzando la funziona data da Chrome,
chrome.tabs.captureVisibleTab, ottenere la parte visualizzata,
5. inserire la parte visualizzata, all'interno del canvas,6. timeout di un secondo,7. spostare la finestra del browser in un altro punto,
corrispondente all'altezza o larghezza della stessa finestra
8. se la pagine non è finita, ripetere dal punto 4, 9. quando tutti i pezzi della pagina sono stati inseriti nel
canvas, ottenere l'immagine complessiva invando la funzione "ctx.canvas.toDataURL("image/png",1.0)"
Pseudo-codice:
Canvas canvas; //elemento canvas
Int widthPage; // larghezza della pagina in pixelInt heightPage; // altezza della pagina in pixel
Int widthWin; // larghezza della finestra in pixelInt heightWin; // altezza della finestra in pixel
Int widthPX = 0; // larghezza della pagina in pixel “fotografata”Int heightPX = 0; // altezza della pagina in pixel
16
“fotografata”
while (widthPX<= widthPX && heightPX <= heightPage ){
movePage(widthPX,heightPX);screeshot();putShotintoCanvas()
widthPX += widthWin; ;heightPX += heightWin;
}
String dataImg = CanvasToImage();
3.3.2. Trasmissione17
Lo strumento, come detto nel capitolo precedente, dovrà colloquiare con un applicativo esterno, ad esempio con un client che invii il lavoro da eseguire per cui l’estensione si dovrebbe comportare come un server, mettersi in ascolto su una porta ed aspettare la connessione di un client. Purtroppo questo non si può realizzare utilizzando alcun metodo fornitoci dalle estensioni di Google Chrome e nemmeno utilizzando gli script di Javascript. Quello che faremo sarà leggermente diverso ma in sostanza non cambierà di molto le cose in quanto l’applicativo esterno comunque invierà il lavoro da svolgere e l’estensione restituirà i dati elaborati. La differenza sarà che l’estensione si comporterà inizialmente come un client che aprirà la connessione con l’applicativo e chiederà il lavoro da svolgere per cui esso sarà a tutti gli effetti un server e infatti verrà sviluppato con tecnologia opportuna, come andremo a vedere in seguito sarà utilizzato il linguaggio PHP.
Di seguito verranno descritte le varie fasi della comunicazione ed il formatto dei messaggi.
3.3.2.1 Protocollo di Comunicazione
MessaggiIl protocollo di comunicazione tra l'estensione e il server è relativamente semplice:Analizziamo innanzitutto come sono strutturati i messaggi, ne esistono di 2 tipi, uno per la richiesta e una per la risposta.Il messaggio di richiesta, cioè quello inviato dall'estensione al server è formato da 3 campi, che sono inseriti nell'header del messaggio HTTP, nel campo Form Data:
● "msg": di tipo stringa, che identifica un particolare comando:
● "ready": pronto a iniziare,● "done": elaborazione effettuata,● "error": c'è stato un errore,
● "id": di tipo intero, identifica l'ID del sito elaborato, opzionale, si usa nei casi in cui l'elaborazione o è andata a buon fine o c'è stato un errore, non si usa con il comando "ready" con cui si avvia la comunicazione. (opzionale)
● "data": rappresenta i dati dell'elaborazione, è una stringa codificata in Base64, il server ne dovrà
18
effettuare la decodifica. Eventualmente può essere usata nel caso di errore per identificare il tipo di errore. (opzionale)
Il messaggio di risposta è invece quello inviato dal server all'estensione in risposta al messaggio di richiesta, è codificato in formato JSON e contiene 2 campi:
"msg" : di tipo stringa, che identifica una particolare risposta: "ok", si è ricevuto il comando e gli eventuali dati, "no", non si ha alcun lavoro da svolgere, (non
serve) "end", si ha concluso con il lavoro,
"jobs": è un array che contiene i dati relativi ai siti da elaborare, può essere usato insieme al messaggio "ok", è composto a sua volta da un oggeto con 2 attributi:
"id", di tipo intero , identificatore del sito, "url", di tipo stringa, rappresenta l'url del sito. "type", tipo di lavoro da eseguire, dm solo dom, ds
dom e immagine im, solo immagine
19
3.3.3 Comunicazione
Quando l'estensione si avvia, cioè viene lanciato il browser, viene inviato un messaggio che avvisa il server che il programma è pronto a ricevere comandi ed ad iniziare l'elaborazione, questo messaggio ha il campo "msg", settato con "ready" gli altri campi possono essere non settati, in risposta a questo messaggio il server può: se non ha lavoro rispondere "ok" ma su il campo works è nullo o vuoto l'estensione si mette in attesa per un determinato periodo di tempo e successivamente reinvia il medesimo comando, altrimenti il server invia il comando "ok" con una array di uno o più siti da elaborare.
msg: “READY”
msg:”OK”works:[
id:0 work:”www..sito1.it”;Id:1 work:”www.sito2.it”;
… ]
estensione server
Quando l'estensione ha finito di analizzare un sito invierà un messaggio con il campo "msg" settato con "done" e verranno inoltre inviati l'id del sito, settando il relativo campo e i dati inseriti nel campo "data", in risposta a questo messaggio si avrà:
1. ok, si sono ricevuto tutti i dati senza errori, il server può o inviare ancora altri dati da elaborare, oppure no, lasciando il campo works a NULL, in
20
questo caso il server saprà che ci saranno comunque altri dati in arrivo...
2. end, non si ha più lavoro da eseguire, si può chiudere il programma,
msg: “ok”
msg:”done”id: 0
data:” dkijfedjrfe....”
estensione server
Infine l'estensione può inviare al server un messaggio di errore, cioè si è riscontrato un errore durate l'elaborazione, ad esempio il sito non esiste o non si è in grado di raggiungere la risorsa, le risposte sono identiche al quelle del caso positivo , cioè avvisare di aver finito il lavoro ("end"), oppure si può continuare con le altre elaborazioni in coda ("ok") , eventualmente si può provare a riinviare il sito e fare un altro tentativo.
4. Server e Test finali
21
L’ultima operazione da svolgere è quella di testare lo strumento e di calcolarne le prestazioni, per questi motivi è stato realizzato un semplice applicativo server con cui far interagire lo strumento.Questo applicativo server è stato realizzato con il linguaggio lato server PHP, la scelta è ricaduta su questo linguaggio principalmente per la sua semplicità d’uso e per la facilità di impostare l’ambiente di sviluppo, in quanto in rete si trovano molti programmi di tipo web server che si appoggiano sulla piattaforma Apache http server, in particolare è stato usato XAMPP, software open source adatto allo scopo.Le funzioni principali dell’ applicativo server saranno:
ricevere i comandi dallo strumento/estensione generare ed inviare il lavoro da eseguire per lo
strumento ricevere e salvare i dati in memoria calcolare le prestazioni dello strumento
Andremo ora ad analizzare queste fasi:
Ricevere i comandi dallo strumento/estensioneCome abbiamo visto nel paragrafo Trasmissione del capitolo precedente il server dovrà mettersi in ascolto, ricevere ed interpretare i comandi che arrivano dallo strumento e rispondere nel modo corretto secondo il protocollo descritto.
Generare ed inviare il lavoro da eseguire per lo strumentoIl server ha disposizione delle liste di documenti web che dovrà inviare allo strumento utilizzando la struttura del messaggio corretta descritta nel paragrafo Trasmissione del capitolo precedente, inoltre dovrà essere in grado di generare dei carichi di lavoro differenti in base ad alcuni parametri che si vorranno testare: documenti analizzati per unità di tempo.
Ricevere e salvare i dati in memoriaRicevere i dati inviati dallo strumento, cioè essere in grado di estrarre i dati dall’header http, generare il file zip con la codifica corretta e salvarla nella memoria del server.
Calcolare Le prestazioni dello strumento
22
Per prima cosa bisogna definire quali test si vogliono far eseguire allo strumento, principalmente saranno del tipo: documenti analizzati per unità di tempo.
Fase di Test
Il Test effettuato sullo strumento è stato quello della misurazione del carico, cioè quante pagine riusciva ad evadere nell’arco di tempo di un minuto. Ogni volta che arriva una richiesta il server invia una numero di pagine in modo che la coda che lo strumento dispone sia sempre lunga uguale nell’arco di un determinato periodo di tempo. Esempio: Si vuole vedere se lo strumento riesce ad evadere 10 pagine al minuto. Il server invia 10 pagine e fa partire il timer di un minuto, ogni volta che arriva una pacchetto aumenta il contatore di uno e vede se il minuto è passato, se è passato invia una lista di pagine in modo che lo strumento ne abbia sempre 10 a disposizione, cioè il numero stesso di risultati ricevuti. Se invece lo strumento riesce a restituire tutti e 10 l’elaborazione delle pagine, si mette in attesa e aspetta lo scadere del minuto e alla richiesta successiva invierà una nuova lista di 10 siti.
Durante l’esecuzione di alcuni test preliminari si è notato come la pagine web avessero differenti tempi nella loro elaborazione, cioè alcune pagine venivano evase in tempi rapidi, circa 10 secondi altre via via sempre più lentamente raggiungendo anche il minuto. Il tempo di elaborazione di una pagina si è scoperto dipendeva principalmente da due fattori:
la dimensione della pagina espressa in pixel, infatti per ottenere lo screenshot della stessa bisogna scorrerla sia in altezza che in larghezza, e questo comporta un notevole dispendio di tempo a causa della natura stessa dell’algoritmo per la creazione dell’immagine.
La dimensione del pacchetto da inviare, infatti a fine elaborazione viene creato un file “.zip” che verrà inviato in rete, il tempo per l’invio del pacchetto e della relativa risposta del server dipendono dalla dimensione dello stesso, più grande è il file da inviare e più tempo ci si impiega a trasmetterlo. La dimensione del pacchetto dipende principalmente dalle dimensione dei file che contiene, il primo il file quello testuale, che contiene l’albero DOM, non determinava grosse variazioni da pagina a pagina, infatti si aggira attorno 1MB, mentre file immagine,
23
varia anche esso in base alla dimensione della pagina, infatti si sono riscontrate immagini da meno di un MB fino a quelle da oltre 10MB.
A causa di queste differenze nei tempi si è deciso di raggruppare le pagine, che hanno comuni caratteristiche, in gruppi distinti in modo da avere test omogenei.Sono stati creati tre gruppi, in cui si distinguevano pagine “piccole”, “medie”, “grandi” i parametri per la decisione se una pagina facesse parte di un gruppo invece che di un altro sono quelli appena descritti, dimensione in pixel della pagina e dimensione del pacchetto in MB, in questo modo si sono potuti fare dei test simili in cui i tempi di elaborazione erano simili e si discostavano di poco all’interno del gruppo.
Nella seguente tabella si possono vedere i gruppi e i criteri con cui si sono definiti:
TIPO Dimensione PX (altezza)
Dimensione MB
Tempo MedioSecondi (DOM)
Tempo Medio secondi(DOM+screenshot)
Piccoli <2000 <3,5 4,7 12Medio 2000-5000 3,5-5 6,6 23,2Grande >5000 >5 8,4 57
Si sono effettuati due tipi di test sulla misura del carico: solo DOM; infatti in alcuni casi c’è la necessità di
estrarre solo quello senza l’immagine, riducendo notevolmente il tempo di elaborazione.
DOM e immagine.
I test sono stati eseguiti sul pc del tesista un notebook con le seguenti caratteristiche:
24
◦ processore Intel Core 2 Duo P8400 a 2.20GHz ◦ 4 Gb di ram
Mentre si è utilizzata una connessione ad internet ADSL 7 Mbps.Sono stati selezionati 80 siti internet (vedere Appendice), per ogni gruppo si sono svolti 10 ripetizioni e ricavate delle medie pesate dei tempi, in modo da avere delle stime il piùpreciso possibile. In questo modo sono stati realizzati i seguenti grafici.
I seguenti grafici rappresentano il primo il caso in cui viene richiesto solo il DOM e il secondo quello in cui vengono richiesti il DOM e lo screenshot, non si è eseguito il caso solo screenshot perché i risultati ottenuti non si discostavano di molto dal secondo caso citato, in quanto la creazione e la trasmissione del DOM non aumenta di molto la dimensione totale del pacchetto rispetto al caso in cui veniva creato sia il DOM che lo screenshot.
Grafico 1:
2 4 6 8 10 12 14 160
2
4
6
8
10
12
14
Misura del Carico (solo dom)
piccolimedigrandi
Lunghezza coda in ogni minuto
Invi
ati
al m
inu
to
25
Grafico 2:
0 2 4 6 8 10 12 140
1
2
3
4
5
6
Misura del Carico (dom + screenshot)
piccolimedigrandi
Lunghezza coda in ogni minuto
Invi
ati
al m
inu
to
Conclusioni
Lo strumento, come denotano i grafici, non è molto efficiente in quanto non riesce ad elaborare molte pagine al minuto, infatti nel caso peggiore, quelle “grandi, riesce ad arrivare ad un massimo di due, questo è dovuto principalmente ai limiti delle tecnologie utilizzate, in quanto non è possibile nè parallelizzare nè creare più thread che possano elaborare più pagine contemporaneamente, il fatto che è il linguaggio JavaScript, per quanto possa essere indispensabile nel campo della manipolazione della struttura DOM e nella programmazione web, ha dei limiti in altri tipi di elaborazioni. Comunque l’obiettivo finale della tesi è stato raggiunto: acquisire ed trasmettere documenti web, in modo automatico e sistematico. Un ultima cosa va detta, in questo contesto non si è detto nulla se effettivamente lo strumento abbia una utilità nella rilevazione degli attacchi web, ma questo esula dagli argomenti dell’elaborato e ci saranno altre sedi in cui si potrà dimostrate questa sua caratteristica.
Appendice26
Tabella risultati
La tabella seguente mostra alcuni risultati dei test effettuati con lo strumento: tempi per eseguire l’elaborazione e dimensioni della pagina nel caso DOM+Screenshot
Pagina Web Secondi(DOM+
screenshot)
Secondi(solo
DOM)
Byte Pixel Tipo
http://www.nyu.edu/ 5 9 792423 1008 phttp://en.wikipedia.org/wiki/Astronomer
511 117874
61715 p
http://www.unicef.it/default.aspx.htm?ph=15
13 2125943
1818 p
http://www.amazon.com/7
15 2055855
3384 p
http://www.mappets.it/3
19 1374302
3600 p
http://it.wikipedia.org/wiki/Pagina_principale2
13 1117647
2691 p
http://lists.w3.org/Archives/Public/w3c-wai-ua/1999JanMar/0195.html 5 7 332884 2367 phttp://www.ebay.it/
311 124687
41875 p
http://www.units.it/ 7 7 765534 722 phttp://www.stereomood.com/
513 169159
31432 p
http://www.amazon.com/3
14 2008729
3340 p
http://www.unipd.it/4
9 1022727
1549 p
http://www.unive.it/ 4 6 639713 826 phttp://www.asf.fr/control/index.aspx?alias=home 7 7 616149 712 phttp://weather.edition.cnn.com/weather/intl/forecast.jsp
315 185772
52014 p
http://www.oracle.com/technetwork/java/index.html 3 8 485366 1488 phttp://www.abebooks.com/ 3 8 793490 1834 phttp://www.apple.com/itunes/
510 162548
42392 p
http://shop.nordstrom.com/ 5 9 726828 1159 phttp://www.talbots.com/online/home_page.jsp 5 8 990440 915 phttp://it.bluenile.co.uk/ 6 12 986044 1521 phttp://www.buildabear.com/
712 140993
01630 p
http://Ice.com9
10 1085143
1255 p
http://www.provincia.belluno.it/nqcontent.cfm?a_id=13
15 1161853
1194 p
http://it.benetton.com/ 8 12 186193 2276 p
27
6http://www.dell.com/
412 287736
41288 p
http://www.turismoroma.it/9
11 1594078
2509 p
http://www.kotaku.com3
18 2193808
2887 p
http://jkontherun.blogs.com 2 4 67892 699 phttp://www.regione.campania.it 6 10 699082 1387 phttp://www.regione.emilia-romagna.it
419 125355
82405 p
http://www.regione.lazio.it 3 17 930493 1074 phttp://www.regione.liguria.it
619 124234
71888 p
http://www.regione.marche.it4
20 1159973
2059 p
http://www.regione.piemonte.it 3 15 646475 1207 phttp://www.regione.sardegna.it 2 10 447900 1276 phttp://www.regione.sicilia.it 3 6 344224 780 phttp://www.regione.vda.it 6 13 982427 1781 phttp://www.provincia.trento.it 6 18 852491 1050 phttp://www.androidiani.com/
832 369261
38235 m
http://money.cnn.com/9
16 1623122
4041 m
http://1-800-Flowers.com3
22 3264986
3135 m
http://www.zappos.com/5
20 1842884
5605 m
http://en.wikipedia.org/wiki/Solar_wind4
16 1732458
5088 m
http://en.wikipedia.org/wiki/Centaur_(minor_planet)8
16 1849685
4793 m
http://www.sportmediaset.mediaset.it/calcio/9
24 4252894
3826 m
http://www.nytimes.com/6
19 2543887
4041 m
http://www.youtube.com/9
25 3962782
5282 m
http://ansa.it6
23 3465434
4885 m
http://www.panorama.it/6
37 5547622
6356 m
http://espresso.repubblica.it/9
22 2610001
4433 m
http://www.ilsole24ore.com/6
29 4118805
7065 m
http://www.gazzettino.it/6
25 3741135
6206 m
http://ilpiccolo.gelocal.it/10
27 3893410
5631 m
28
http://www.sky.it/3
25 3463160
4418 m
http://www.comune.roma.it/wps/portal/pcr8
14 1574200
3719 m
http://www.total-photoshop.com/8
26 3527405
3726 m
http://www.acmilan.com/it6
19 2503179
2552 m
http://www.asroma.it/it/index.html5
16 2540223
2329 m
http://www.zazzle.com/11
15 2283722
3070 m
http://it.eurosport.yahoo.com/3
21 3279406
4607 m
http://espresso.repubblica.it/6
21 2629271
4433 m
http://ansa.it8
25 3507193
4918 m
http://www.lifehacker.com9
27 2043120
3114 m
http://www.pcsintel.com4
24 1734777
3968 m
http://www.regione.abruzzo.it7
32 1083887
1779 m
http://www.nysun.com/5
34 1270552
2760 m
http://www.sky.it/8
41 6486780
4418 g
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 8
81 836292 36612 g
http://en.wikipedia.org/wiki/Peter_Heywood9
52 3494273
8310 g
http://en.wikipedia.org/wiki/Astronomy10
63 4114113
11142 g
http://www.rai.it/10
52 2711597
3086 g
http://www.nytimes.com/8
39 2471003
4021 g
http://www.pvrblog.com10
56 2649788
6441 g
http://www.tvover.net9
67 1581256
6471 g
http://www.lumberliquidators.com/ll/home8
51 2455741
3200 g
http://www.tigerdirect.com/8
62 1906659
2766 g
http://Petco.com6
48 1747840
2098 g
http://it.msn.com/8
36 1315259
2297 g
http://www.telefonino.net/8
92 1566551
2313 g
29
Codice Estensione
Background.html
<html><head>
<script src="jquery-1.7.1.min.js"></script> <script src="main.js"></script> <script src="pageinfo.js"></script> <script src="jszip.js"></script> <script src="domgenerator.js"></script> </head><body><canvas id ="myCanvas"></canvas></body></html>
main.js
var srvUrl = 'http://localhost/serverPHPTest2.php'; // Url del server (da modificare)var Rcommand ="ready"; // Comando "ready"var doneCmd ="done"; // Comando "done"var errorCmd ="error"; // Comando "error"
var widthWin = 0 //larghezza finestravar heightWin = 0 //alteza finestra
var widthSite = 0 //larghezza sitovar heightSite = 0 //alteza sito
var ws = 0; //larghezza fattavar hs = 0; // altezza fatta
var myCanvas; // canvasvar ctx; // context del canvas
var works = new Array(); // coda del lavorovar dom; // dom treevar strDataURI;
var tabid; // id tabvar tabopen = false;var indexWork = -1;
send(srvUrl,Rcommand); // comando di inizio
function sleep(milliSeconds){var startTime = new Date().getTime(); // get the current timewhile (new Date().getTime() < startTime + milliSeconds); // hog cpu
30
}
/** funzione invio dati (url del server, tipo di comando, id del work, dati) */function send(destUrl, command, id, data) { $.ajax({ url: destUrl, type: "post", data: { rqsmsg: command, id: id, data: data, pixel:heightSite}, success: function(answer) { var JSONobject = JSON.parse(answer); if (JSONobject.msg == "ok") { if (JSONobject.works != null) { for (var i = 0; i < JSONobject.works.length; i++) { works.push(JSONobject.works[i]); }
}
if(tabopen){tabopen = false;chrome.tabs.remove(tabid);
} openSite();
}
else if (JSONobject.msg == "end") { id = id + 1; sleep(200); alert('FINITO!!!'); } } });}
/** Funzione FOTO */function photo() {
chrome.tabs.captureVisibleTab(null, { format: "png", quality: 10 },function(dataUrl) {
var img = new Image(); img.src = dataUrl; img.onload = function() {
if (hs + heightWin < heightSite) {
if (ws + widthWin < widthSite) {
ctx.drawImage(img, ws, hs); ws = ws + widthWin
scrollWinLeft(ws); } else { ctx.drawImage(img, widthSite - widthWin, hs); hs = hs + heightWin; ws = 0;
31
scrollWinDown(hs); scrollWinLeft(0); } } else {
if (ws + widthWin < widthSite) {
ctx.drawImage(img, ws, heightSite - heightWin); ws = ws + widthWin
scrollWinLeft(ws); } else { // se ha finito di scrollare tutta la pagina, ottieni
l'immagine dal canvas ctx.drawImage(img, widthSite - widthWin, heightSite -
heightWin);
hs = 0; ws = 0;
strDataURI = ctx.canvas.toDataURL("image/png", 1.0).substring(22);
var zip = new JSZip();
if (works[indexWork].type == "ds") { zip.add("dom" + works[indexWork].id + ".txt",
JSON.stringify(dom)); } zip.add("image" + works[indexWork].id + ".png",
strDataURI, { base64: true }); zipFile = zip.generate();
var zp = "data:application/zip;base64," + zipFile;
send(srvUrl, doneCmd, works[indexWork].id, zp); } } }});}
/** funzione per abbassare la finestra del browser*/function scrollWinDown(px) {
chrome.tabs.executeScript(tabid, { code: "document.body.scrollTop = '" + px + "'" });
sleep(600);}
/** funzione per spostare a sinistra la finestra del browser */function scrollWinLeft(px) {
chrome.tabs.executeScript(tabid, { code: "document.body.scrollLeft = '" + px + "'" });
sleep(600);32
photo();}
/** listerner, per comunicare col tab selezionato*/ chrome.extension.onConnect.addListener(function(port) { port.onMessage.addListener(function(info) {
if (info.type == "dom") {
dom = info.dom;
if (works[indexWork].type == "dm") {
var zip = new JSZip(); zip.add("dom" + works[indexWork].id + ".txt",
JSON.stringify(dom)); zipFile = zip.generate(); var zp = "data:application/zip;base64," + zipFile; send(srvUrl, doneCmd, works[indexWork].id, zp); } else {
myCanvas = document.getElementById('myCanvas') ctx = myCanvas.getContext("2d"); chrome.tabs.executeScript(tabid, { file: "pageinfo.js" }); } } else {
/** ottengo la dimensione della pagina e della finestra del browser */
widthWin = info.widthWin; heightWin = info.heightWin;
widthSite = info.widthSite; heightSite = info.heightSite;
ctx.canvas.height = heightSite; ctx.canvas.width = widthSite;
scrollWinDown(0); scrollWinLeft(0); } });});
/** funzione che apre il documentoweb successivo */function openSite() {
indexWork = indexWork + 1;// controllo se la coda è ancora piena
if (indexWork < works.length) {
/**controllo che il documento sia effettivamente on line*/
$.ajax({
url: works[indexWork].url,
33
type: 'GET', success: function(data) {
chrome.tabs.create({ url: works[indexWork].url }, function(tab) { tabid = tab.id
tabopen = true;
sleep(1000);
chrome.tabs.executeScript(tabid, { file: "domgenerator.js" }) });
}, error: function(data) { send(srvUrl, errorCmd, works[indexWork].id); } });
}/** se la coda è vuota, aspetto 10sec e poi invio comando
"Ready" */ else { sleep(10000); indexWork = indexWork - 1; send(srvUrl, Rcommand); }}
pageinfo.js
/**ricavo la dimensione della pagina e quella della finestra */
document.documentElement.style.overflowX = 'hidden'; document.documentElement.style.overflowY = 'hidden';
var dimensioni = { "type": "sito",
"widthWin": window.innerWidth, "heightWin": window.innerHeight,
"widthSite": document.width, "heightSite": document.height};
chrome.extension.connect().postMessage(dimensioni);
domgenerator.js
/** script che estare il DOM Tree dalla pagina */
var myObject = new JXONData(document);
var time = new Date().getTime();
var sCollectedTxt = ""34
myObject.timestamp = time;function contentValue(oXMLParent){
var oItChild; if (oXMLParent.hasChildNodes()) { for (var nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) { oItChild = oXMLParent.childNodes[nChildId];
if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt = sCollectedTxt + buildValue(oItChild.nodeValue); } else{
contentValue(oItChild) }
} }
return sCollectedTxt;}
function buildValue(sValue) { if (/^\s*$/.test(sValue)) { return " "; } if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; } if (isFinite(sValue)) { return parseFloat(sValue); } return sValue; } function JXONData (oXMLParent) {
var nAttrLen = 0, nLength = 0; if (oXMLParent.hasChildNodes()) { for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) { oItChild = oXMLParent.childNodes.item(nChildId);
if ((oItChild.nodeType + 1 | 1) === 5) { }else if (oItChild.nodeType === 1 && !oItChild.prefix) { // nodeType is
"Element" (1) sItKey = oItChild.nodeName.toLowerCase();
sItVal = new JXONData(oItChild); if (this.hasOwnProperty(sItKey)) { if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; } this[sItKey].push(sItVal); } else { this[sItKey] = sItVal; nLength++; } } } }
if (oXMLParent.nodeName.toLowerCase() != "#document") {
this.content = contentValue(oXMLParent);
35
sCollectedTxt = "";
this.x = oXMLParent.offsetLeft;this.y = oXMLParent.offsetTop;this.w = oXMLParent.offsetWidth;this.h = oXMLParent.offsetHeight
if (oXMLParent.hasAttributes()) { var oItAttr; this.keyAttributes = {}; for (nAttrLen; nAttrLen < oXMLParent.attributes.length; nAttrLen++) { oItAttr = oXMLParent.attributes.item(nAttrLen); this.keyAttributes[oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue); } } this.valueOf = function() { return this.keyValue; }; this.toString = function() { return String(this.keyValue); }; this.getItem = function(nItem) { if (nLength === 0) { return null; } var iItem = 0; for (var sKeyName in this) { if (iItem === nItem) { return this[sKeyName]; } iItem++; } return null; }; this.getAttribute = function(nAttrib) { if (nAttrLen === 0 || nAttrib + 1 > nAttrLen) { return null; } var nItAttr = 0; for (var sAttrName in this.keyAttributes) { if (nItAttr === nAttrib) { return this.keyAttributes[sAttrName]; } nItAttr++; } return null; }; this.hasChildren = function() { return this.keyLength > 0; };
}}
var additionalInfo = { "type":"dom", "dom": myObject};
chrome.extension.connect().postMessage(additionalInfo);
36
Bibliografia
Alberto Bartoli, Giorgio Davanzo, Eric Medvet A Framework for Large-Scale Detection of Web Site
Defacements
Eric Medvet, Engin Kirda, Christopher Kruegel, (2008) Visual-Similarity-Based Phishing Detection
http://developer.chrome.com/extensions/
http://www.w3schools.com/
37