PRESENTAZIONE: PROGETTO E REALIZZAZIONE DI UNO STRUMENTO PER L'ACQUISIZIONE E TRASMISSIONE DI DOCUMENTI WEB

2.  Lo strumento utilizzato in un progetto sullo
studio di rilevazioni di attacchi informatici a
siti web condotto dal “Machine Learning Lab”
del dipartimento DIA dell’Università di
Trieste.

3. ◦ Search Redirection: reindirizzato ad un sito web
scelto dall'attaccante.
◦ Search Spam: aggiunta di contenuto
illegittimo, mira a manipolare i risultati dei motori
di ricerca
◦ Web Defacement: modifiche non autorizzate ad un
sito web, mira a compromettere la credibilità e l’
affidabilità del sito
◦ Phishing: frode online che mira a rubare dati
sensibili ad un utente, inducendolo a fornire queste
informazioni ad una pagina web che viene
realizzata dall'attaccante in modo che imiti una
pagina legittima.

4.  Lo strumento riceverà da un’ «applicazione
esterna» delle richieste di elaborazione di un
documento web ed eseguirà le seguenti
operazioni:
 Acquisizione: creazione di due file a partire
dal documento web:
o un file di tipo testuale che conterrà il DOM
(struttura del documento)
o un file immagine (PNG), «screenshot»
(rappresentazione del documento).
 Trasmissione: invio dei file all’«applicazione
esterna»

5.  Il DOM (Document Object Model) è API:
◦ un insieme di funzioni, metodi e proprietà specifica per
rappresentare e interagire oggetti contenuti in
documenti web: HTML o XML.
 Struttura intermedia, usata dai browser, tra il
codice e la rappresentazione visiva finale
 Si è scelto di estrarre il DOM perché la struttura
del documento è influenzato, non solo dal codice
HTML o XML, ma anche da eventuali script che ne
possano alterare la struttura

6. Rappresentazione del «DOM Tree» di un documento
<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</ TD>
</TR>
<TR>
<TD>Over the River,
Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY>
</TABLE>

7.  Siccome c’è la necessità di interpretare il
codice con cui sono scritti i documenti web
(HTML, CSS, JavaScript) lo strumento si
appoggerà su un web browser
 Google Chrome:
◦ Possibilità di realizzare delle estensione
 Le estensioni sono piccoli programmi che possono
modificare e migliorare la funzionalità del browser
Chrome.
 Vengono create utilizzando tecnologia web

8. 1. Richiesta di lavoro da parte di applicazione esterna
2. apertura di un documento web su un nuovo tab del
browser,
3. se necessario, verrà estratto il DOM
4. se necessario, verrà ricavato lo screenshot
5. verrà generato un file “zip” in cui verranno inseriti i
dati precedentemente ottenuti
6. invio del file zip
7. conferma dell’arrivo del file a
destinazione, inserimento di eventuali altri url di
documenti nella coda,
8. chiusura del tab,
9. se la coda non è vuota, ritornare al punto 1.

9. 1. Ottenere la «root» del documento
2. Ricavare tutti gli attributi:
◦ tipo di elemento (html, body,p, div, ecc...)
◦ posizione nella finestra definite dalle coordinate x, y
◦ dimensione del box altezza e larghezza in pixel
◦ contenuto :
 testo visibile per i box normali
 codice per gli script
 coppie <nome, valore> per gli attributi definiti esplicitamente
(href, src,id,class..)
3. Ottenere i figli,
4. Per ogni figlio ripetere dal punto 2 fino al
completamento di tutti i nodi.

10. 1. Caricare un documento web nel browser
2. Ricavare le informazioni del documento e della finestra
del browser: altezza e larghezza
3. Spostare la finestra del browser in un punto del
documento web
4. Utilizando una funzione disponibile da quelle offerte da
Chrome (chrome.tabs.captureVisibleTab()) creare lo
screenshot della parte visualizzata nel browser
5. Inserire lo screenshot appena ottenuto in un canvas (il
canvas è un elemento HTML5 che permette la
manipolazione delle immagini)
6. Spostare la finestra del browser in un altro punto
7. Se non si è raggiunta la fine del documento ripetere dal
punto 2
8. Estrare dal canvas l'immagine totale

12.  Lo strumento dovrà colloquiare con un
«applicativo esterno»
 Architettura client-server
 Non è possibile creare un server che
funzioni internamente ad un browser
 Estensione si comporterà come un client
 Applicativo sarà realizzato con tecnologia
lato server

13.  Si baserà sul protocollo HTTP, utilizzando delle
funzioni AJAX:
 Il messaggio di richiesta, (inviati con il metodo POST
e inserendoli nei campi «form» dell’header HTTP)
◦ «msg»: identifica un particolare comando
(«ready», «done», «error»)
◦ «id»:identifica l'ID del documento elaborato,
◦ «data»: rappresenta i dati dell'elaborazione,
 Il messaggio di risposta: (codificati in formato JSON)
◦ «msg»: di tipo stringa, che identifica una particolare
risposta («ok», «end»)
◦ «jobs»: è un vettore contenente i dati relativi ai documenti
da elaborare,

16.  Testare funzionalità strumento
 Calcolare prestazione:
◦ Misurazione del carico:
 Richieste evase in certo arco temporale (1 minuto)

17.  Sviluppo di un semplice applicativo server
(PHP) che eseguirà le seguenti operazioni:
◦ Ricevere interpretare i comandi e dati
◦ Generare e inviare il lavoro
◦ Calcolare le prestazioni

18.  Per eseguire i test si è usato un notebook con
le seguenti caratteristiche:
◦ processore Intel Core 2 Duo P8400 a 2.20GHz
◦ 4 Gb di ram
 Si è usata una connessione ad internet ADSL
7 Mbps

19. I test sono stati divisi in 3 gruppi in base alla dimensione del
documento e del pacchetto:
TIPO Dimensione Dimensione Tempo Medio Tempo Medio
PX (altezza) MB Secondi Secondi (DOM +
(solo DOM) Screenshot)
Piccolo <2000 <3,5 4,7 12
Medio 2000-5000 3,5-5 6,6 23,2
Grande >5000 >5 8,4 57

20.  Sono stati selezionati 80 siti internet
 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

21. Misura del Carico (solo dom)
14
12
10
8 piccoli
Inviati al m inuto
medi
grandi
6
4
2
0
2 4 6 8 10 12 14 16
Lunghezza coda in ogni minuto

22. Misura del Carico (dom + screenshot)
6
5
4
Inviati al minuto
piccoli
3 medi
grandi
2
1
0
0 2 4 6 8 10 12 14
Lunghezza coda in ogni minuto