Aplicaci on web para la monitorizaci on de redes virtuales

Aplicacion web para la monitorizacion de redes virtuales:

wShark

Agustın Leyenda Duarte

Director de proyecto: Juanjo Alins Delgado

Noviembre 2012

Escola Tecnica Superior d’Enginyeria de Telecomunicacio de Barcelona

Universitat Politecnica de Catalunya

2 WSHARK

2

All of time and space; everywhere and anywhere; every star that ever was.Where do you want to start?

Eleventh Doctor

Things need not have happened to be true. Tales and dreams are the shadow-truths that will endurewhen mere facts are dust and ashes, and forgot.

Dream

It is an old maxim of mine that when you have excluded the impossible, whatever remains,however improbable, must be the truth.

Sherlock Holmes

This is your captain speaking: we may experience some minor turbulence and then... erm, explode.

Malcolm Reynolds

The Internet? Is that thing still around?

Homer Simpson

3

4 WSHARK

4

Agradecimientos

Lo primero, obviamente, agradecer especialmente a mi familia, por apoyarme en todo (en todolo moral y eticamente aceptable, al menos) desde la mas tierna infancia. A mi padre, por estarsiempre ahı cuando se le necesita. A mi hermano, porque le ha tocado aguantarme las tonterıas masde una vez, como buen hermano mayor. Y a mi madre, por haberla obligado a resignarse a mis idasy venidas, pasadas y futuras, por el mundo adelante.

Este PFC se ha llevado a buen puerto trabajando en tres lugares que siempre seran especialespara mı, tanto por el tiempo y las experiencias vividas, como por la magnıfica gente que he conocidoen ellos. A pesar de que es imposible mantener el contacto con todas estas personas, han sido yseran una parte fundamental de mi vida.

En Galicia, a la gente de Delegacion de Alumnos de Teleco de Vigo, con los que compartı misanos de carrera allı. A Lino, colocado en Galicia por colocarlo en alguna de las clasificaciones,aunque podrıa estar en todas. A Jorge, por ser ese tipo de amigo que te hace querer volver a casaestes donde estes. A Silvia, la mejor amiga polıtica que se podrıa desear. A Alicia, por apoyarmetodos esos anos y hacerme creer que podıa lograr todo lo que me propusiese. A Paula, por ser unade mis mejores amigas mientras crecıamos juntos. Y a Artanis, por tener la santa paciencia y elconocimiento para echarme una mano todas esas veces que me quedaba atascado.

En Barcelona, a Juanjo, mi tutor, por confiar en mı en un primer momento y ayudarme siempre,a pesar de las diferentes circunstancias que hicieron que este fuese un proyecto temporalmenteinconstante. A Gerard, por mostrarme lo realmente genial que puede llegar a ser compartir piso. Atoda la gente del Omega y, muy especialmente, a la gente del despacho de Revistes, desde los HOFsa los nuevos. Aunque son demasiados para nombrarlos a todos, saben que para mı, la familia deRevistes siempre ha sido lo mejor que me ha pasado en mi epoca en Barcelona.

En Delft, por un lado al grupo Erasmus, con mis magnıficos companeros y casi-companeros decasa: Dani, Jon, Alec, Martı y Chira; y a las chicas que hicieron que el tiempo extra de estancia queme quede por allı fuese de lo mejor de mi etapa holandesa: Mireia, Susana y Noa. Por el otro, a lagente de mi trabajo, por ser amigos ademas de companeros. A Ruben, Siebe, Annemieke, Diederik,Niek, Cristofaro y al resto de Riscure. Especialmente a Eloi, por ser un colega genial ademas deestar siempre dispuesto a echar una mano, y a Ileana, por ser la mejor jefa que un intern puedepedir (aunque no le guste que la llamemos ası).

Finalmente, a todos aquellos que no he nombrado, por despiste o falta de espacio. Como la gentede Frozen-Layer, que a pesar de los anos y los kilometros de distancia, siguen ocupando un lugarmuy importante en mi memoria.

Gracias. Al fin y al cabo, en gran parte esto merece la pena por todos vosotros.

Y a Raquel, donde quiera que estes, onee-san.

5

6 WSHARK

6

Resumen

En el Departamento de Ingenierıa Telematica de la ETSETB se esta trabajando en el desarrolloy despliegue de un Laboratorio de Redes Virtual con acceso remoto y gestion a traves de una interfazweb. Este proyecto, llamado LabXar, ha sido dividido en diferentes subproyectos, cada uno de loscuales ataca diferentes problemas.

El PFC que aquı se presenta se enmarca dentro de este proyecto LabXar y su objetivo es eldesarrollo de una interfaz web que permita el acceso remoto y en tiempo real a los datos de capturade trafico de las redes virtualizadas. Es importante tambien presentar la informacion de formaadecuada para su supervision y analisis.

Para este fin, se ha trabajado tanto en el cliente (navegador) como en el propio servidor. Laparte del cliente se ha focalizado en obtener una presentacion de los datos de trafico de una formaintuitiva y amigable, al estilo de los programas estandar. En la parte del servidor, la principalmotivacion ha sido obtener un refresco apropiado y una interactividad adecuada para con los datospresentados en el navegador.

El desarrollo de la aplicacion web propia viene motivado por la limitada memoria de la que gozanlas maquinas virtuales que conforman las redes virtuales. Obviamente debe existir una restriccion enlas caracterısticas asociadas a ellas ya que las simulaciones implican multiples maquinas virtualespor cada uno de los usuarios conectados y, a su vez, multiples usuarios simultaneamente, todosobre un mismo equipo. Ello implica buscar una solucion sin una carga excesiva sobre la memoriay descarta herramientas convencionales de analisis de redes, como Wireshark.

Ası pues, wShark solventa estos problemas creando un entorno grafico sobre el navegador yanadiendo funcionalidades interesantes para la salida de la version de lınea de comandos de Wires-hark, a traves de distintos lenguajes de desarrollo web. Esto distribuye la carga entre el servidor yel propio usuario y permite al alumno visualizar la red sin necesidad de instalar ningun softwareespecıfico y sin preocuparse de su sistema operativo.

Ademas, se introduce una version autonoma de wShark, que permite a cualquier usuario decualquier parte del mundo, con cualquier sistema operativo y sin tener instalado ningun programade analisis de redes, visualizar sus ficheros de captura .cap en la nube.

7

8 WSHARK

8

Indice general

Agradecimientos 5

Resumen 7

Lista de figuras 11

I Proyecto Marco: LabXar 13

1. Introduccion 15

1.1. Motivacion del proyecto LabXar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

1.2. Estructuracion del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1.3. Estructura del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2. Virtualizacion 17

2.1. Redes virtuales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.2. Virtualizacion de maquinas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.2.1. Tipos de virtualizacion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2.2.2. UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.3. Conmutadores de Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.3.1. uml switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.3.2. VDE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.4. VNUML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

2.4.1. Ejemplo de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3. Gestion de la simulacion en LabXar 25

3.1. Introduccion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.2. Laboratorio virtual de redes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

9

10 WSHARK INDICE GENERAL

3.3. Conformacion de trafico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

4. Captura de trafico en LabXar 31

4.1. Analizadores de redes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

4.2. Wireshark y Tshark como estandar de captura . . . . . . . . . . . . . . . . . . . . . 32

4.2.1. Wireshark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.2.2. TShark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.3. La captura de trafico en LabXar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

4.3.1. uml switch y VDE switch: Generacion de ficheros de captura. . . . . . . . . . 33

4.3.2. Acceso remoto a los datos de captura y presentacion de la informacion . . . . 36

II Aplicacion web para la monitorizacion de redes virtuales: wShark 39

5. wShark 41

5.1. Estructura del programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

5.1.1. Lenguajes y herramientas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

5.2. Versiones previas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

5.2.1. wShark v0.7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

5.2.2. wShark v1.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

5.3. Version final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

5.3.1. Version integrada en LabXar de wShark . . . . . . . . . . . . . . . . . . . . . 50

5.3.2. Stand-alone wShark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

5.4. Algoritmia y estructura interna de la aplicacion . . . . . . . . . . . . . . . . . . . . . 63

5.4.1. Muestreo del fichero de captura . . . . . . . . . . . . . . . . . . . . . . . . . . 63

5.4.2. Actualizacion de informacion en el navegador . . . . . . . . . . . . . . . . . . 67

5.4.3. Estadısticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

5.4.4. Stand-Alone Version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

6. Conclusiones y trabajo futuro 77

Apendices 79

A. Estructura concisa de wShark 81

A.1. Version wShark de la plataforma LabXar . . . . . . . . . . . . . . . . . . . . . . . . 81

A.2. Version Stand-Alone wShark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

10

WSHARK INDICE GENERAL 11

A.3. Otros ficheros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

B. Comunicacion en wShark 87

B.1. Version wShark de la plataforma LabXar . . . . . . . . . . . . . . . . . . . . . . . . 87

B.1.1. Inicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

B.1.2. Deteccion de nuevos paquetes en la red . . . . . . . . . . . . . . . . . . . . . 88

B.1.3. Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

B.2. Version Stand-Alone wShark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

B.2.1. Inicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

B.2.2. Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

B.3. Version wShark de la plataforma LabXar . . . . . . . . . . . . . . . . . . . . . . . . 93

B.3.1. Inicio de la conexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

C. Codigo fuente de wShark 95

C.1. Version de wShark en LabXar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

C.1.1. Inicio de la aplicacion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

C.1.2. Simulacion de captura en tiempo real . . . . . . . . . . . . . . . . . . . . . . 114

C.1.3. Guardar ficheros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

C.1.4. Estadısticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

C.1.5. Hoja de estilo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

C.2. Version Stand-Alone de wShark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

C.2.1. Inicio de la aplicacion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

C.2.2. Hoja de estilo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

D. Logos 135

D.1. Logos descartados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

E. Licencia GPL 139

Bibliografıa 151

11

12 WSHARK INDICE GENERAL

12

Indice de figuras

2.1. Arquitectura de una maquina virtual. . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2.2. Red a simular en una de la practicas. . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2.3. La terminal superior muestra parte de la ejecucion de vnumlparser.pl, generando lared virtual. La terminal inferior muestra la conexion telnet a una de las maquinasvirtuales de dicha red. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.1. Pagina de inicio del laboratorio virtual de redes. . . . . . . . . . . . . . . . . . . . . 26

3.2. Pagina para seleccionar el escenario de las practicas a virtualizar. . . . . . . . . . . . 27

3.3. Red virtual iniciada y comunicacion con la misma mediante telnet. . . . . . . . . . . 28

3.4. Usuarios conectados a traves de internet al servidor que gestione el laboratorio virtualcon las simulaciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

3.5. Dentro del servidor, las simulaciones de cada uno de los usuarios es independiente yaccesible solo por dicho usuario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

4.1. Interfaz grafica del Wireshark. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

4.2. TShark ejecutado en la lınea de comandos. . . . . . . . . . . . . . . . . . . . . . . . 34

4.3. Salida generada por TShark para la comunicacion de la figura 2.3 sobre la red 1. . . 34

4.4. Salida generada por TShark para la comunicacion de la figura 2.3 sobre la red 0 . . . 35

4.5. Captura de Wireshark mostrando la informacion relativa al campo “host” del encap-sulado HTTP en un paquete del mismo protocolo. . . . . . . . . . . . . . . . . . . . 37

4.6. Formato de salida pdml (informacion de los campos del datagrama) para un unicopaquete con TShark. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

5.1. Estructura en arbol XML DOM adoptada por muchos de los archivos a leer de TShark. 44

5.2. Una de las primeras versiones funcionales de wShark . . . . . . . . . . . . . . . . . . 47

5.3. wShark v1.0. Esta version fue la usada en la primera version completa de la plata-forma, en conjuncion con el sistema de generacion de las redes virtuales. . . . . . . . 48

5.4. Paquetes de la subred 0 – iguales a los de la figura 5.2 – filtrados para mostrarunicamente los paquetes del protocolo arp. . . . . . . . . . . . . . . . . . . . . . . . . 49

13

14 WSHARK INDICE DE FIGURAS

5.5. Red virtual iniciada y comunicacion con la misma mediante telnet. . . . . . . . . . . 50

5.6. Interfaz final de wShark. Los paquetes que aparecen son los generados al iniciar lacomunicacion de la red virtual. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

5.7. Los pings enviados en 5.5 son recibidos y mostrados en el sumario de wShark. . . . . 52

5.8. Menu Fichero de wShark. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

5.9. Menu Ir de wShark. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

5.10. Menu Captura de wShark. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

5.11. Ventana modal para seleccionar el cambio de red. . . . . . . . . . . . . . . . . . . . . 55

5.12. Diferentes estadısticas referentes a la informacion de wShark. . . . . . . . . . . . . . 56

5.13. Ventana modal con informacion generica sobre el fichero del que se esta capturando. 56

5.14. Ventana modal con informacion organizada jerarquicamente referente a los protocolosincluidos en los diferentes de paquetes enviados. . . . . . . . . . . . . . . . . . . . . . 57

5.15. Menu, sobre la ventana modal, para la seleccion de conversaciones de diferentes pro-tocolos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

5.16. Informacion, en este caso, sobre las diferentes conversaciones del protocolo etherneten la captura.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

5.17. Menu sobre la ventana modal para escoger si se desea mostrar la grafica de la densidadde paquetes o de bytes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

5.18. Grafica colocada sobre la ventana modal del numero de paquetes frente al intervalotemporal de captura. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

5.19. Grafica del numero de bytes frente al intervalo temporal de captura que se actualizade forma dinamica con los nuevos paquetes que llegan en la simulacion. . . . . . . . 59

5.20. Menu para escoger el lenguaje de la interfaz de wShark. . . . . . . . . . . . . . . . . 60

5.21. Ventana modal para aplicar un filtro a la captura. . . . . . . . . . . . . . . . . . . . 60

5.22. Pagina de inicio de la version Stand Alone de wShark. . . . . . . . . . . . . . . . . . 61

5.23. Ventana modal para seleccionar el idioma en la pagina de inicio de la version StandAlone de wShark. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

5.24. Ventana modal para cambiar entre los diferentes ficheros subidos. . . . . . . . . . . . 62

A.1. Estructura de archivos de la version de wShark incluida en LabXar. . . . . . . . . . 84

A.2. Estructura de archivos de la version Stand-Alone de wShark. . . . . . . . . . . . . . 86

B.1. Diagrama secuencial de inicio para la version de wShark de LabXar. . . . . . . . . . 88

B.2. Diagrama secuencial de la llega de nuevos paquetes en la version de wShark de LabXar. 90

B.3. Diagrama secuencial para la gestion de eventos. . . . . . . . . . . . . . . . . . . . . . 91

B.4. Diagrama secuencial de inicio para la version Stand-Alone de wShark. . . . . . . . . 92

14

WSHARK INDICE DE FIGURAS 15

D.1. Logo HTML5 que representa la parte web de la aplicacion. . . . . . . . . . . . . . . 135

D.2. Logo de Wireshark que representa la parte de analizador de redes de la aplicacion. . 136

D.3. Combinacion de los dos logos previos que muestran las dos caracterısticas principalesde wShark. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

D.4. Segundo Logo de Wireshark. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

D.5. Adaptacion del segundo logo de Wireshark para su uso en la interfaz grafica decaptura de paquetes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

D.6. Modificacion del logo principal con la aleta en blanco. . . . . . . . . . . . . . . . . . 137

D.7. Modificacion del logo principal sin bordes. . . . . . . . . . . . . . . . . . . . . . . . . 138

15

16 WSHARK INDICE DE FIGURAS

16

Parte I

Proyecto Marco: LabXar

17

Capıtulo 1

Introduccion

1.1. Motivacion del proyecto LabXar

LabXar es un proyecto para el desarrollo y despliegue de un laboratorio de redes virtual conacceso remoto y gestion desde una interfaz web. Se encuentra actualmente en uso en diferentesasignaturas impartidas por el departamento de ENTEL y permite a los alumnos interactuar condiferentes escenarios de red en un entorno controlado, individual y sencillo.

Este proyecto se origino como una herramienta docente para la asignatura Laboratorio de Te-lematica II en la titulacion superior de Ingenierıa de Telecomunicaciones de la ETSETB. Estelaboratorio consiste en una introduccion a la estructura de las redes de comunicaciones y una apro-ximacion practica a los diferentes protocolos que componen las pilas OSI y TCP/IP. Los alumnospueden observar como se interconectan entre sı conceptos estudiados previamente como IPs, tablasde rutas, mascaras o subnetting (por citar algunos) y cual es su cometido en una red real y funcionaldesplegada en el laboratorio. Configurando los ordenadores conectados a la red y comunicandolosentre ellos, los estudiantes adquieren un conocimiento mas profundo de las complejidades en unared telematica.

El desarrollo de este PFC fue motivado principalmente por diferentes limitaciones relativas a laorganizacion de la asignatura:

La red esta limitada al hardware fısico disponible (hosts, routers, switches, etc).

Para la correcta realizacion de las practicas, todos los ordenadores de la red – el propio yel de los demas alumnos de la clase – han de estar configurados acorde al ejercicio que seeste realizando en ese momento. Esto significa que los alumnos que vayan mas rapido deberanesperar continuamente al resto.

Los recursos estan limitados a las horas de laboratorio, imposibilitando a los alumnos lafinalizacion o la repeticion de los escenarios de las practicas fuera del horario de las clases.

La principal idea detras de este proyecto es crear un entorno propio para cada estudiante, dondepueda realizar las tareas que se le requieren a su propio ritmo y sin las limitaciones previamentementadas. Ademas, se busca anadir tambien la posibilidad de acceder a estas practicas en cualquiermomento de forma remota.

19

20 WSHARK CAPITULO 1. INTRODUCCION

1.2. Estructuracion del proyecto

El proyecto se divide en dos etapas principales con respecto a su funcionalidad:

1. Cuando el usuario se conecta a la web de la herramienta a traves de un navegador, se le asociauna sesion unica y se simulan todos los elementos de la red escogida de forma virtual sobreun unico host.

2. Una vez la red virtual esta generada, el usuario puede interactuar con ella remotamente yobservar el comportamiento de los paquetes con el analizador de paquetes integrado, wShark.

El proyecto LabXar completo consta de dos partes, por un lado la generacion de la red virtualy por otro la aplicacion de monitorizacion de la red, wShark. La primera parte se trata del proyectodocumentado en [1] y se puede encontrar una explicacion mas exhaustiva del mismo mas adelante(capıtulo 3) y en la memoria referenciada en la bibliografıa.

Este PFC trata sobre la segunda parte, el analizador de redes. En el marco docente en el quese posiciona el proyecto, el analisis del trafico a traves de herramientas sencillas y claras ayudainmensamente a los alumnos a entender como funciona internamente una red telematica y susprotocolos. La interfaz de la herramienta, su usabilidad y presentacion, son vitales para lograr unuso eficiente y extensivo de la plataforma.

1.3. Estructura del documento

Esta memoria esta estructurada en tres partes principales:

Parte 1: situa el marco del proyecto LabXar completo, explicando en este primer capıtulo deque se trata el proyecto y sus motivaciones. En los siguientes capıtulos introduce las diferentesherramientas y los estandares utilizados, ası como el posicionamiento de la aplicacion en elconjunto completo de la plataforma.

Parte 2: descripcion extensa de la propia herramienta web, wShark, explicando sus diferentesfuncionalidades y versiones.

Parte 3: anexos con informacion sobre la estructuracion del software de la aplicacion, lascomunicaciones internas y otra informacion como el diseno y las licencias.

Para finalizar, en la bibliografıa se pueden encontrar referencias a todos los textos y artıculosusados a lo largo de la elaboracion de la memoria, que constituye una literatura muy interesantepara profundizar en los temas tratados mas alla del objetivo de este documento.

20

Capıtulo 2

Virtualizacion

2.1. Redes virtuales

Una red virtual se puede definir como una red compuesta de maquinas virtuales – simuladasa traves de software –, que estan conectadas a traves de dispositivos de red virtuales (switches,routers, etc), de la misma forma que una red fısica conecta maquinas fısicas con dispositivos fısicos[2]. Esto permite simular redes complejas con multitud de elementos sobre un unico ordenador fısico,denominado host de virtualizacion o, simplemente, host.

Los componentes basicos de una red virtual son:

Maquinas Virtuales: hacen el papel de los equipos fısicos en una red fısica.

Switches Virtuales: interconectan las maquinas virtuales a nivel de la capa de enlace. Infor-macion mas especıfica puede encontrarse en la seccion 2.3.

Conexiones: la topologıa de la red y las comunicaciones en ella dependen completamente decomo se interconectan los equipos y los dispositivos de red dentro de ella. Ası pues, los “cables”virtuales juegan un importante papel en el despliegue de la misma.

Potencialmente, elementos mas complejos pueden formar parte de la red, como routers y ga-teways. Todos estos elementos simulan fielmente las funciones de sus homonimos fısicos. En lassiguientes secciones se explicaran con mas detalle los componentes de la red virtual.

2.2. Virtualizacion de maquinas

Una maquina virtual (MV) es un contenedor software completamente aislado que puede ejecutarsu propio sistema operativo y aplicaciones como si fuese un ordenador fısico. Una maquina virtualse comporta exactamente como un ordenador fısico y contiene su propia CPU, RAM, disco duro ytarjeta de red virtuales (simulados sobre software) [3].

Un sistema operativo no puede diferenciar entre una maquina virtual y una maquina fısica, nison capaces las aplicaciones ni otros ordenadores en red. Incluso la propia maquina virtual cree quees un ordenador real. Sin embargo, la MV esta compuesta solo de software y no tiene absolutamenteningun componente hardware.

21

22 WSHARK CAPITULO 2. VIRTUALIZACION

2.2.1. Tipos de virtualizacion

Las maquinas virtuales se pueden separar en dos grandes grupos, basados en su uso y en el gradode correspondencia con una maquina real [4]:

Maquinas virtuales de sistema: proporcionan una plataforma de sistema completa quesoporta la ejecucion de todo un sistema operativo. Permiten a la maquina fısica subyacentemultiplexarse entre varias maquinas virtuales, cada una ejecutando su propio sistema ope-rativo. A la capa de software que permite la virtualizacion se la llama monitor de maquinavirtual o hypervisor. Un monitor de maquina virtual puede ejecutarse o bien directamente so-bre el hardware o bien sobre un SO. Parallels o VMware son ejemplos de conocidas maquinasvirtuales de sistema.

Maquinas virtuales de proceso: se ejecutan como un proceso normal dentro de un SO ysoportan un solo proceso. La maquina se inicia automaticamente cuando se lanza el procesoque se desea ejecutar y se detiene cuando este finaliza. Su objetivo es el de proporcionar unentorno de ejecucion independiente de la plataforma de hardware y del SO, que oculte losdetalles de la plataforma subyacente y permita que un programa se ejecute siempre de lamisma forma sobre cualquier plataforma. El ejemplo mas conocido es la maquina virtual deJava.

En la figura 2.1 podemos observar como el bloque de las maquinas virtuales (en gris) es indepen-diente de las aplicaciones del propio sistema operativo que esta ejecutando las mismas. El hypervisorse encarga de gestionar la comunicacion con el SO del host (maquina donde se esta virtualizando),proporciona el ambiente de ejecucion aislado y da soporte para que en una misma plataforma dehardware se ejecuten diferentes sistemas operativos sobre diferentes MVs. Las n maquinas virtualescontroladas por el hypervisor tendran sus propias caracterısticas y su propio sistema operativo –igual o diferente al del host – y ejecutaran sus propias aplicaciones, que estaran completamenteaisladas al resto.

Figura 2.1: Arquitectura de una maquina virtual.

22

WSHARK CAPITULO 2. VIRTUALIZACION 23

2.2.2. UML

UML (User Mode Linux) es una tecnica de virtualizacion que se puede clasificar como unamaquina virtual de proceso y sera el mecanismo utilizado para generar las maquinas virtuales enla plataforma LabXar. Es una herramienta integrada con el nucleo de Linux que permite ejecutarmultiples sistemas Linux virtuales (o guests) como simples aplicaciones sobre un Linux normal (ohost). Debido a que cada guest se trata de una aplicacion normal ejecutandose como un procesoen el espacio de usuario, esta aproximacion proporciona una forma de ejecutar multiples maquinasvirtuales Linux en un unico hardware, ofreciendo excelentes condiciones de seguridad sin afectara la configuracion del entorno o a la estabilidad de la maquina origen. Como puede comprobarseconsultando [5], existen numerosos ejemplos del uso de UML:

Ejecucion de servicios de red desde un entorno UML permaneciendo totalmente aislado delsistema principal.

Configuracion de honeypots (trampas) con el objetivo de probar la seguridad de los equipos ode la red.

Testeo y depuracion de software nuevo sin afectar al sistema del host.

Simulacion de redes realistas sobre Linux para entornos docentes y de investigacion, con unalto grado de seguridad.

2.3. Conmutadores de Software

Como se ha comentado previamente, se pueden simular los conmutadores o switches a travesde software. Un switch o conmutador virtual es un programa software que permite a una maquinavirtual comunicarse con otra. Se trata de una conexion a nivel 2 de la capa OSI, la capa de enlace.Se comporta de forma analoga a su contrapartida fısica, direccionando de forma inteligente lacomunicacion en la red, inspeccionando los paquetes antes de enviarlos.

En el caso particular del proyecto, los conmutadores de software enlazan las maquinas virtualesgeneradas con UML para crear una estructura de red virtual. Existen diferentes opciones entre losswitches a utilizar en el proyecto que se introducen a continuacion.

2.3.1. uml switch

Se trata del switch propio incluido en UML para formar redes virtuales. uml switch es un daemonpara la gestion de una red virtual entre sistemas UML, sin conexion por defecto a la red propia delhost.

Escucha por conexiones en un par de sockets de dominio de UNIX que son usados para lascomunicaciones entre uml switch y las maquinas UML conectadas a su red.

2.3.2. VDE

VDE (Virtual Distributed Ethernet) es otra alternativa en el conmutador de la red virtual. Sunombre es autoexplicativo: es virtual, ya que se genera completamente a traves de software; distri-

23


buido, ya que ofrece componentes que permiten interconectar diferentes conmutadores localizadosen maquinas reales distintas; y ethernet, debido a que la estructura completa es capaz de enrutar yenviar paquetes ethernet. Las principales caracterısticas de VDE son:

Cumple con los estandares Ethernet.

Es general, es decir, es una infraestructura virtual que da conectividad a diferentes tiposde componentes software: emuladores/maquinas virtuales, sistemas operativos reales y otrasherramientas de conectividad.

Es distribuido.

No necesita permisos de administracion para ejecutarse.

VDE tiene la misma estructura que una red ethernet normal. Los componentes principales sonvde switches, que tienen multiples puertos donde el usuario puede conectar otros elementos virtualescomo ordenadores o routers, y vde cables, que permiten interconectar dos vde switches. Para obtenermas informacion al respecto, puede consultarse el exhaustivo informe citado en [6].

Actualmente VDE soporta distintas soluciones de emulacion o virtualizacion, como Qemu,Bochs, Virtualbox o, el usado en nuestro caso, User-Mode Linux.

2.4. VNUML

VNUML (Virtual Network User Mode Linux) es una herramienta open-source de virtualizaciondesarrollada por la Universidad Politecnica de Madrid, que permite definir y simular de formarapida redes complejas con todos sus elementos (switches, routers, cables, equipos, etc). Esto esespecialmente util ya que definir topologıas grandes es especialmente difıcil y propenso a errores.VNUML ayuda a generar estas redes virtuales de forma sistematica.

VNUML esta enfocado al testeo de aplicaciones y servicios de red en escenarios complejos,formados por multiples nodos sobre una unica maquina Linux, sin la necesidad del desembolso yorganizacion necesarios para crear la red usando equipamiento real [7]. Desde su desarrollo en 2002,ha sido usado ampliamente en diversos campos relacionados con las redes de ordenadores:

Arquitecturas de enrutado, como IPv6 IX.

Plataformas de servicios multimedia sobre IP.

Seguridad.

Laboratorios y practicas en universidades.

VNUML consiste en dos componentes principales: el lenguaje VNUML usado para describir lassimulaciones en XML; y el interprete del lenguaje, que compila y controla el escenario escondiendolas complejidades de UML al usuario.

24


2.4.1. Ejemplo de uso

El procedimiento necesario para generar la red de esta forma comienza por la necesidad dedefinir los elementos virtuales de la red en un fichero, en el lenguaje propio de la herramienta. Porejemplo, la red de la figura 2.2 se describirıa con el codigo 2.1:

Figura 2.2: Red a simular en una de la practicas.

El fichero comienza describiendo parametros como el sistema de ficheros y el kernel del sistemaoperativo a utilizar en la maquina virtual, que pueden ser completamente diferentes al del hostdonde se esta ejecutando. A continuacion, se describen las redes, con los elementos (switches, eneste caso) que se utilizan en ella dentro de la etiqueta net. Finalmente, se definen cada uno de losguests (maquinas virtuales) que forman la red completa y sus interfaces con sus parametros – comoa la subred a la que estan conectados y sus IP. Notese que tambien se define, en una de las tresmaquinas, la terminal que sera lanzada – xterm – para interactuar con la red.

Una vez descrita la red a generar – que puede ser mucho mas compleja –, se invoca un script enPerl denominado vnumlparser.pl que interpreta el fichero XML y lanza las maquinas y los elementosvirtuales de la red simulada. Una vez terminada la generacion, el usuario recibe una terminal quesimula uno de los equipos en la red (en este caso el telm2-8 ) y desde dicha terminal puede interactuarcon el resto de la red. En la figura 2.3 se puede observar en la terminal superior el log de la generacionde la red virtual y en la inferior como los pings enviados desde telem2-8 a los demas elementos dela red son recibidos y contestados perfectamente por los mismos, como si de una red real se tratase.

25


<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE vnuml SYSTEM "/usr/share/xml/vnuml/vnuml.dtd">

<vnuml><global><version>1.8</version><simulation name>Practica3 Ex 1 i 2</simulation name><automac/><vm mgmt type="none" /><vm defaults exec mode="mconsole">

<filesystem type="cow">/usr/share/vnuml/filesystems/root fs tutorial</filesystem><kernel>/usr/share/vnuml/kernels/linux</kernel><!−− <console id="0">xterm</console> −−>

</vm defaults></global><net name="Net0" mode="uml_switch"

uml switch binary="/usr/bin/uml_switch4capture" capture file="/tmp/capture/capture0.cap" /><net name="Net1" mode="uml_switch"

uml switch binary="/usr/bin/uml_switch4capture" capture file="/tmp/capture/capture1.cap" /><net name="Net2" mode="uml_switch" />

<vm name="telm2-9"><if id="1" net="Net0"><ipv4>147.83.40.29</ipv4>

</if><if id="2" net="Net1"><ipv4>147.83.39.50</ipv4>

</if><forwarding type="ip" />

</vm>

<vm name="t145"><if id="1" net="Net1"><ipv4>147.83.39.145</ipv4>

</if><route type="ipv4" gw="147.83.39.50">default</route>

</vm>

<vm name="telm2-8"><console id="0">xterm</console><if id="1" net="Net0"><ipv4>147.83.40.28</ipv4>

</if><if id="2" net="Net2"><ipv4>192.168.1.240</ipv4>

</if><route type="ipv4" gw="147.83.40.29">default</route>

</vm>

</vnuml>

Codigo 2.1: Ejemplo de codigo VNUML de generacion de la red virtual.

26


Figura 2.3: La terminal superior muestra parte de la ejecucion de vnumlparser.pl, generando la redvirtual. La terminal inferior muestra la conexion telnet a una de las maquinas virtualesde dicha red.

27


28

Capıtulo 3

Gestion de la simulacion en LabXar

3.1. Introduccion

Este capıtulo es un resumen de la primera parte de la plataforma LabXar, que genera las redesa simular y gestiona el laboratorio de redes virtual a traves de una interfaz web. Esta parte delproyecto, como se ha mencionado previamente, ha sido desarrollada por Gustau Perez y en ladocumentacion de la misma se puede encontrar una explicacion concienzuda del sistema [1].

Los objetivos que se buscan en este proyecto son:

Explorar las diferentes tecnologıas que permiten implementar escenarios de redes complejas.

Implementar una plataforma que permita el acceso remoto a estos escenarios y que permita alos alumnos observar y experimentar con los protocolos y las herramientas de red.

Implementar las modificaciones necesarias para poder observar el comportamiento de los pro-tocolos de red bajo condiciones especiales o anomalas.

Ası pues, se pueden diferenciar dos partes principales que se detallaran en las siguientes secciones:la generacion de la red virtual y la alteracion del trafico.

3.2. Laboratorio virtual de redes

Se trata de una plataforma de virtualizacion, una herramienta de ejecucion virtual de redesy acceso remoto de los usuarios. Los usuarios podran lanzar, acceder, explorar y modificar estassimulaciones.

Al conectarse a la web del proyecto https://vsertel.upc.edu/labxar/, la pagina principalmuestra una breve explicacion de como funcionan las simulaciones y pide un usuario y contrasena(ver figura 3.1).

Despues de autenticarse, la interfaz web permite escoger uno de los escenarios asociados a laspracticas, con las diferentes redes a simular (figura 3.2).

Una vez escogida y arrancada la simulacion, la plataforma creara un entorno de virtualizaciondistinto para cada usuario autenticado. En este entorno se crearan los diferentes procesos UML

29

https://vsertel.upc.edu/labxar/

30 WSHARK CAPITULO 3. GESTION DE LA SIMULACION EN LABXAR

que forman las maquinas virtuales de la red y los vde switches que las interconectan siguiendo latopologıa que se observa a la izquierda de la figura 3.3.

La interfaz proporciona una direccion ip y un puerto para conectarse a traves de telnet a unade las maquinas virtuales de la red (en este caso, a la denominada telm2-8). En la terminal a laderecha de la imagen 3.3 puede observarse la conexion telnet, como los pings que se envıan a t145son respondidos, y como la interfaz eth1 de telm2-8 esta configurada de acuerdo al esquema.

Finalmente, en la misma imagen puede verse un enlace a WebShark (en las ultimas versiones elnombre ha cambiado a wShark) que es la aplicacion de analisis de la red (ver capıtulo 4) desarrolladaen esta segunda parte del proyecto y que permite visualizar las comunicaciones que ocurren en lared virtual.

Figura 3.1: Pagina de inicio del laboratorio virtual de redes.

3.3. Conformacion de trafico

La gestion de la simulacion tambien incluye ciertas modificaciones sobre VDE para poder alterarel trafico de la red. Esto permite simular comportamientos de una red real, como limitacion, descartey retardo del trafico.

30

WSHARK CAPITULO 3. GESTION DE LA SIMULACION EN LABXAR 31

Figura 3.2: Pagina para seleccionar el escenario de las practicas a virtualizar.

Limitacion de trafico

Esta limitacion significa que un puerto determinado solo puede aceptar una cantidad de traficomaxima por unidad de tiempo. Todo el trafico que sobrepase este lımite, no se podra servir a la red.

Los conmutadores fısicos actuales implementan mecanismos similares. Su funcionamiento sebasa en disponer de una memoria cache para cada puerto, donde se almacenan paquetes preparadospara ser reenviados. Si un sistema envıa trafico muy rapido y el destino es incapaz de procesarlo, elconmutador acumula hasta N paquetes y, llegado a este punto, avisa al sistema de que esta saturado.

En este caso, se simula un medio generico donde no hay garantıa de entrega de trafico. Lospaquetes que no se puedan procesar se perderan. Ademas se implementan dos lımites, dependiendode si es trafico entrante o saliente de un puerto.

Descarte de trafico

Debe poderse descartar de forma probabilıstica un paquete que entra o sale de un puerto deter-minado del conmutador.

La solucion propuesta es sencilla, ofreciendo la posibilidad de dar un valor de descarte – entre0 y 100 – de manera que la implementacion descartara un tanto por ciento de los paquetes totalessegun el valor recibido.

31


Figura 3.3: Red virtual iniciada y comunicacion con la misma mediante telnet.

Esquemas y explicacion de la conexion remota

El esquema de conexion a la plataforma puede observarse en las figuras 3.4 y 3.5, donde losdiferentes usuarios se conectan a traves de internet y la pagina web al servidor que gestiona lasredes virtuales (figura 3.4). Este servidor crea una red virtual independiente para cada uno delos n usuarios conectados, con sus maquinas virtuales y elementos de red, con los que solo puedeinteractuar el usuario que ha arrancado la simulacion (figura 3.5). A traves de telnet, los usuarios seconectan a una de las maquinas de su espacio virtual, y es a traves de ella con la que interactuan conla red (ver figura 3.3). Los conmutadores de red almacenan en el espacio de usuario ficheros con elintercambio de paquetes que ocurre en la red, que seran posteriormente utilizados por el analizadorde red (ver capıtulo 4) para estudiar el trafico.

Retardo de trafico

En el caso del conmutador de trafico, la idea general es disponer de un programador de serviciopara cada puerto. De esa manera, cuando llega un paquete se decide por que puerto sale y por cadapuerto de salida se mantiene una cola de trafico saliente, ordenada segun el orden de servicio de lospaquetes. Para cada puerto, se extrae el primer paquete de la cola y se sirve a la red.

32

WSHARK CAPITULO 3. GESTION DE LA SIMULACION EN LABXAR 33

Figura 3.4: Usuarios conectados a traves de internet al servidor que gestione el laboratorio virtualcon las simulaciones.

Figura 3.5: Dentro del servidor, las simulaciones de cada uno de los usuarios es independiente yaccesible solo por dicho usuario.

33


34

Capıtulo 4

Captura de trafico en LabXar

4.1. Analizadores de redes

Existen diferentes metodos para monitorizar lo que ocurre en una red (real o virtual). En estecaso, la monitorizacion dependera de un analizador de paquetes (o analizador de redes) que puedeinterceptar y registrar el trafico que pasa a traves de una red completa o partes de esta. Conformelos flujos de datos atraviesan la red, el analizador captura cada paquete y, si es necesario, decodificalos datos del mismo, mostrando los valores de sus diferentes campos. Su versatilidad permite su usoen muy diferentes ambitos [8]:

Analizar problemas de red.

Detectar intentos de intrusion en la red.

Detectar un mal uso de la red por usuarios internos y externos.

Aislar redes comprometidas.

Monitorizar el uso del ancho de banda.

Monitorizar la seguridad de la red.

Recolectar estadısticas de la red.

Filtrar contenido sospechoso del trafico de la red.

Recuperar informacion sensible como contrasenas.

Aplicar ingenierıa inversa sobre protocolos propietarios usados en la red.

Depurar comunicaciones cliente/servidor.

Depurar implementaciones de protocolos de red.

Verificar la efectividad de los sistemas de control internos como firewalls, proxys, filtros despam, etc.

35

36 WSHARK CAPITULO 4. CAPTURA DE TRAFICO EN LABXAR

4.2. Wireshark y Tshark como estandar de captura

4.2.1. Wireshark

Wireshark es un analizador de paquetes open-source y de software libre. Es estandar de facto enmuchas industrias e instituciones educativas. Se utiliza para realizar analisis y solucionar problemasen redes de comunicaciones, en el desarrollo de software y protocolos, y como una herramientadidactica. Cuenta con todas las caracterısticas estandar de un analizador de redes.

Wireshark proporciona una interfaz grafica, que ayuda a entender lo que esta ocurriendo enla red, y muchas opciones de organizacion y filtrado de informacion. Tambien permite al usuarioconfigurar los controladores de red en modo promiscuo, capturando todo el trafico visible en lainterfaz en cuestion. La interfaz grafica de Wireshark se ha utilizado en este proyecto como modelode referencia en el diseno de la interfaz grafica implementada sobre el navegador.

Es un software que “entiende” la estructura de los diferentes protocolos de red. Es decir, escapaz de mostrar la encapsulacion y los campos, al mismo tiempo que sus significados, con diferentespaquetes de diferentes protocolos de red.

Sus principales caracterısticas son [9]:

Los datos pueden ser capturados de una conexion de red en vivo o leıdos de un fichero depaquetes previamente capturado.

Los datos live se pueden leer desde diferentes tipos de red, incluyendo Ethernet, IEEE 802.11,PPP y loopback.

Se puede navegar por los datos capturados de la red a traves de la interfaz grafica del Wiresharko a traves de TShark, la version lınea de comandos del analizador.

Los datos mostrados se pueden refinar usando un filtro.

Es sencillo anadir nuevos protocolos a traves de plug-ins.

Las llamadas VoIP se pueden detectar e incluso reproducir si estan codificadas correctamente.

Se puede capturar trafico USB bruto.

La figura 4.1 es una captura de pantalla del Wireshark mostrando informacion de los paquetesintercambiados en una comunicacion sobre la red.

4.2.2. TShark

TShark es la version para lınea de comandos de Wireshark. Toda la comunicacion consiste encomandos en la terminal y las respuestas se muestran por pantalla o en ficheros. A pesar de ello,TShark incluye todas las funcionalidades principales de Wireshark.

La figura 4.2 muestra la salida de TShark para la misma captura que la de la figura 4.1. El restode campos se pueden obtener, con diversos formatos de salida, dependiendo de los parametros yopciones con los que se invoque a TShark.

36

WSHARK CAPITULO 4. CAPTURA DE TRAFICO EN LABXAR 37

4.3. La captura de trafico en LabXar

Una vez generada la red virtual, los conmutadores que interconectan las maquinas de la redgeneran ficheros con la comunicacion que se produce en la misma, como se comento en la seccion3.2. Estos ficheros pueden ser analizados y representados con un analizador de redes. A continuacionse presentan las diferencias entre los dos switches propuestos y los problemas de los analizadoresconvencionales que llevan al desarrollo de una aplicacion propia.

Figura 4.1: Interfaz grafica del Wireshark.

4.3.1. uml switch y VDE switch: Generacion de ficheros de captura.

uml switch

En el caso del conmutador propio de UML, uml switch, para ser capaz de capturar y monitorizarlos paquetes enviados por la red, se hace necesaria la introduccion de una modificacion sobre eluml switch original. Esta modificacion es el proyecto final de carrera de Esteban Martın para laUniversidad Politecnica de Madrid [10] y el nuevo elemento se denomina uml switch4capture (se

37


Figura 4.2: TShark ejecutado en la lınea de comandos.

puede ver definido en el codigo de la figura 2.1). Usando este binario en la red de interes, se generaun fichero en la ruta definida por la opcion capture file de la etiqueta net que puede ser leıdo aposteriori con un analizador de paquetes, como los presentados en las secciones 4.2.1 y 4.2.2.

Las figuras 4.3 y 4.4 muestran la salida de TShark para los ficheros generados con la comunicacionde la figura 2.3. La explicacion de la disparidad en el numero de paquetes es trivial observando elesquema de la figura 2.2, ya que todos los paquetes destinados a una interfaz conectada a la red 1han de pasar obligatoriamente por la red 0 (siendo capturados en ambos ficheros) pero no al reves.

Figura 4.3: Salida generada por TShark para la comunicacion de la figura 2.3 sobre la red 1.

Limitaciones

Existen ciertas limitaciones sobre este sistema, basado en el uml switch con las modificacionespara la captura de paquetes. Esto obliga a la busqueda de alternativas para la generacion del

38


Figura 4.4: Salida generada por TShark para la comunicacion de la figura 2.3 sobre la red 0

conmutador de red. Las limitaciones mas importantes son las siguientes:

Empıricamente se ha comprobado que los ficheros generados con uml switch4capture tienen unmaximo de 1000 paquetes. Una vez se alcanza este numero, los siguientes paquetes enviados porla red seran completamente ignorados. Aunque para los escenarios tratados en el laboratorio,es un numero suficientemente grande, sigue suponiendo una limitacion que puede ocasionarproblemas en algun caso puntual.

uml switch solo permite interconectar maquinas virtuales generadas con UML. Esto puedesuponer un problema futuro.

No soporta las opciones de conformacion de trafico definidas como parte del proyecto [1].

VDE switch

VDE elimina las restricciones anteriores, permitiendo diferentes tecnologıas para la generacionde maquinas virtuales, como el propio UML u otros metodos como qemu, Bochs o MPS. Varios deestos metodos son multiplataforma, pudiendo alojar el sistema de virtualizacion sobre una maquinacorriendo cualquier sistema operativo.

Ademas, facilita las modificaciones requeridas para las funciones de conformacion de traficoincluidas en LabXar (limitacion, descarte y retardo).

Los ficheros de captura son de la misma forma que los del uml switch, haciendo sencilla lamigracion del sistema.

39


Si el lector desea mas informacion al respecto, podra encontrarla en la memoria del proyectofinal de carrera de Gustau Perez [1].

4.3.2. Acceso remoto a los datos de captura y presentacion de la informacion

Una vez generado el entorno de trabajo, con el escenario simulado y la comunicacion establecida,es necesario dotar al alumno de una forma simple de observar que esta ocurriendo en la red. El usode Wireshark para leer los ficheros de salida, en alguna de las dos versiones explicadas en lassecciones previas 4.2.1 y 4.2.2, comportarıa una gran ayuda de cara a entender como funcionala comunicacion en la red y comprobar la estructura y los diferentes campos que conforman losdatagramas estudiados en asignaturas anteriores. Sin embargo, ambas versiones aplicadas al casoactual presentan sus propios problemas, que seran tratados en las siguientes secciones.

Problemas de uso de Wireshark con maquinas virtuales

Lo solucion optima serıa poder utilizar la version grafica de Wireshark, ya que ofrece una interfazmucho mas sencilla de entender y es mucho mas facil acceder a toda la informacion contenida en cadauno de los paquetes enviados. Esto se consigue simplemente haciendo clic en el paquete deseadoy extendiendo los menus que aparecen. Ademas, en el momento en que se selecciona un campoparticular del datagrama, automaticamente se marcan los bytes que lo codifican en la representacionhexadecimal y ascii de la parte inferior de la interfaz, como puede verse en la imagen 4.5. Esto esuna ayuda enorme de cara a entender como los diferentes protocolos funcionan y saber que efectosproducen las diferentes acciones que se ejecutan en las maquinas virtuales.

Fijandose en la figura 4.5 puede verse que, sin contar la barra de herramientas, el GUI (GraphicalUser Interface) esta dividido en tres regiones:

1. Muestra un resumen de la comunicacion realizada sobre la red captura. Permite consultar enuna ojeada campos importantes, como las direcciones origen y destino, el tiempo de envıo oel protocolo del paquete.

2. Consiste en menus desplegables donde los campos padres son las diferentes encapsulacionesdel datagrama y los campos hijos van descendiendo hasta el detalle de los campos individualesde cada uno de los protocolos, como podrıa ser el campo de direccion ethernet destino o elchecksum del encapsulado IP.

3. Esta ultima seccion contiene la representacion hexadecimal y ascii del paquete completo.Cuando se selecciona un campo particular en la region previa (de mayor o menor abstraccion),se marcan los bytes y los sımbolos que codifican ese campo.

Obviamente, el poseer toda esta informacion en la misma pantalla y en una forma sencilla deinterpretar permite al alumno entender mucho mas facilmente los entresijos de la red telematica.

Lamentablemente, el hecho de estar ejecutando multiples maquinas virtuales y elementos vir-tuales de red para cada uno de los usuarios conectados sobre un unico equipo host significa quelos recursos disponibles son limitados. La interfaz grafica de Wireshark es muy potente pero, a suvez, consume una cantidad de recursos considerable. Esto hace necesario buscar una alternativa quepermita suplir la funcionalidad que provee Wireshark con un consumo mucho menor. Aquı es dondeentra en escena su version de lınea de comandos: TShark.

40


Figura 4.5: Captura de Wireshark mostrando la informacion relativa al campo “host” del encapsu-lado HTTP en un paquete del mismo protocolo.

Problemas de uso de TShark para entorno docente

Como se comento en la seccion 4.2.2, TShark permite ejecutar todas las funcionalidades (o casitodas) de Wireshark pero de una forma mas compleja. Siendo toda la comunicacion exclusivamentea traves de una terminal, el consumo de recursos es infinitamente menor.

A costa de esta mejora de recursos perderemos importantes ventajas de la interfaz grafica, sobretodo de cara a la docencia, como es la sencillez y la facilidad de acceso a la informacion. La tripleinformacion comentada en la seccion anterior (resumen, campos del datagrama, hexadecimal y ascii)precisa de multiples invocaciones al programa, y la informacion de salida se encontrara desperdigaday con un formato complicado de entender y visualizar. Como ejemplo, la figura 4.6 muestra partedel contenido de un fichero donde se ha volcado la salida de TShark referente a la informacion delos campos del datagrama.

Como puede verse en dicha imagen, el formato es XML pero extenso y complejo de entender. Sise esta capturando de una red en vivo o el fichero que se esta leyendo contiene un numero elevadode paquetes, la salida sera larga y engorrosa.

Esto, anadido a otros problemas como dificultad extrema de visualizar estadısticas en textoplano, hace que el uso de TShark de forma directa no sea la mejor solucion de cara a su uso enun laboratorio orientado a la docencia. Siendo este uno de los primeros contactos practicos de la

41


Figura 4.6: Formato de salida pdml (informacion de los campos del datagrama) para un unicopaquete con TShark.

mayor parte de los alumnos con estos temas, es necesario encontrar un compromiso entre las dospropuestas comentadas.

Solucion

Necesitamos pues una herramienta que proporcione una interfaz parecida a Wireshark, con unconsumo de recursos idealmente similar al de TShark. Asimismo, para facilitar la funcionalidad derealizacion remota de la que consta el laboratorio virtual, la posibilidad de acceso desde cualquierlugar, por ejemplo con un simple navegador, serıa altamente deseable. Ademas, ninguna de las dosopciones esta preparada para tratar con ficheros que se van actualizando con los nuevos paquetesque se envıan por la red virtual. La solucion debe solventar este problema y simular de una formalo mas realista posible que la captura de los paquetes en la red se esta realizando en tiempo real.

Para conseguir todas estas caracterısticas, se decide desarrollar una aplicacion web que corraen los principales navegadores. Esta aplicacion parsea la informacion de salida de TShark y anade(a traves de diferentes lenguajes de programacion web) parte de las diferentes funcionalidades deWireshark, como los menus desplegables, las graficas de las estadısticas o los filtros. Ademas, incluyefuncionalidades nuevas como la version Stand-Alone o la carga de diferentes ficheros.

Se ha decidido llamar a esta aplicacion wShark (de webShark) y el siguiente capıtulo la explicaen detalle.

42

Parte II

Aplicacion web para la monitorizacionde redes virtuales: wShark

43

Capıtulo 5

wShark

wShark (abreviacion de WebShark) es una aplicacion web que permite monitorizar el trafico de lared virtual generada con LabXar como se ha explicado en capıtulos anteriores. wShark utiliza comobase TShark para leer los ficheros capturados en la red y muestra su contenido de forma sencillae interactiva, mas cercana a la interfaz grafica de Wireshark que a la lınea de comandos de este.Asimismo, anade funcionalidades como la posibilidad de leer de forma autonoma (sin necesidad degenerar ninguna red previamente) ficheros de captura en la nube. Cualquier usuario puede accedera la aplicacion web desde un navegador y subir y visualizar sus propios ficheros de captura sinnecesidad de tener instalado ningun programa de monitorizacion de red e independientemente delsistema operativo que este usando.

En las siguientes secciones se explicara, entre otras cosas, la estructura de la aplicacion, lasdiferentes versiones y las funcionalidades que ofrece. Finalmente, se tratara de explicar de formageneral el funcionamiento interno de la aplicacion y algunas decisiones sobre la algoritmia y el disenoapoyandose en fragmentos representativos del codigo fuente.

5.1. Estructura del programa

Practicamente cualquier proyecto de diseno web implica una amplia diversidad de tareas dediferentes ambitos y especialidades, ya que se han de tener en cuenta temas como navegabilidad,interactividad, usabilidad, arquitectura de la informacion y diseno multimedia de la pagina. Estolleva a una labor que comprende multitud de lenguajes de programacion orientados a las diferentestareas a realizar y a la necesidad de una planificacion correcta de la estructura y la interaccion entrelas diferentes partes que componen la aplicacion completa.

Toda la programacion de una aplicacion web se divide en dos parte principales: front-end yback-end. El front-end comprende las partes que se ejecutan en el ordenador del cliente y con lasque este puede interaccionar. El back-end son las partes del codigo ejecutadas en el propio servidor,que gestionan las peticiones y interactuan con los ficheros y las bases de datos. Cada parte consta dediferentes lenguajes especıficos que seran tratados a continuacion. Para obtener mayor informacionsobre la estructura de la aplicacion y la comunicacion entre sus diferentes partes, pueden consultarselos anexos A y B. El codigo fuente completo de los siguientes ejemplos (ası como de otras partes dela aplicacion) puede consultarse en el apendice C: Codigo fuente de wShark.

45

46 WSHARK CAPITULO 5. WSHARK

5.1.1. Lenguajes y herramientas

La suma de los siguientes lenguajes y utilidades web constituye la base en la que se sustentawShark. Cada uno de ellos tiene una funcion especıfica que se tratara de explicar de forma general:

HTML

HTML (HyperText Markup Language) es el lenguaje basico para crear el “esqueleto” de la paginaweb. A traves de las diferentes etiquetas del lenguaje, se disena la estructura de la pagina web, comoel texto plano, las imagenes o las distintas secciones.

El codigo 5.1 muestra un fragmento de codigo HTML de una de las paginas principales dewShark:

1 </head>2 <body>3 <div id="header">4 <img src="images/entel_logo.jpg" style="float: left;" alt=""/>5 <img src="images/ETSETB2.jpg" style="float: right;" alt="" />6 </div>7 <div id="body">8 <img src="images/wSharkLogoBlack.png" id="wLogo" alt="" />9 <div id="dialog">

10 <h1>11 <script type="text/Javascript">12 document.write(manageLanguage("Welcome") + "wShark!");13 </script>14 </h1>15 <div id="file-uploader">16 </div>17 <!−− <button type=”button” id=”buttonSingle” value=”File”>File</button>18 <button type=”button” value=”Directory”>Directory</button> −−>19 </div>20 </div>21 <div id="foot">

Codigo 5.1: Ejemplo de HTML en el proyecto. Se pueden diferenciar distintas etiquetas, como laque delimita el “cuerpo” (<body>) de la pagina o la que permite introducir imagenes(<img>).

CSS

CSS (Cascading Style Sheets) se usa para definir la presentacion de un documento estructuradoen HTML. A traves de el se pueden definir el estilo de los diferentes elementos de la pagina, desde elcolor que debe mostrar hasta su tamano y forma. Es un lenguaje sencillo pero potente, que permitedotar a la pagina de su propia “personalidad”. Para dar formato a un documento HTML se puedeincluir el codigo CSS en las propias etiquetas, como un preambulo al principio del documento o enun fichero aparte, lo cual es mas comun debido a la facilidad posterior de edicion y reutilizacion.

El codigo 5.2 muestra un fragmento de la hoja de estilo de la pagina principal de wShark.

46

WSHARK CAPITULO 5. WSHARK 47

1 .empty−cell {2 overflow:hidden;3 }45 table { font−family: monospace; color: #000; border−top:2px solid black; border−collapse: collapse; border−

spacing: 10px !important; }6 th { font−family:Helvetica; text−align:left !important; padding: 5px; font−weight: bold; vertical−align:bottom;}7 th:last−child { border−right: none; }8 table#summary td:last−child { white−space: nowrap; overflow: hidden; position: absolute; }9 #summary { width: 100 %; }

10 #summary tbody td { cursor: pointer; font−size: 14px; overflow: auto !important }1112 tr.picked { background−color: rgb(167, 203, 253); border: 1px solid #3691FB; }1314 #wholeSummary { width: 100 %; height: 50 %; overflow−x: auto; overflow−y: auto; }

Codigo 5.2: Extracto del documento CSS que define el estilo de la interfaz principal de wShark.Pueden observarse, entre otras cosas, parte de los atributos asociados al sumario central.

XML

XML (Extensible Markup Language) es un lenguaje de marcado (como HTML) que define unaserie de normas para codificar documentos en un formato legible tanto para personas como paramaquinas. Se trata de una lenguaje de etiquetas donde cada una de ellas define su propio contenido.Esto se entiende mejor viendo el codigo 5.3, que se trata de un extracto de un fichero de salida deTShark.

1 <?xml version="1.0"?>2 <psml version="0" creator="wireshark/1.6.7">3 <structure>4 <section>No.</section>5 <section>Time</section>6 <section>Source</section>7 <section>Destination</section>8 <section>Protocol</section>9 <section>Length</section>

10 <section>Info</section>11 </structure>1213 <packet>14 <section>1</section>15 <section>0.000000</section>16 <section>::</section>17 <section>ff02::16</section>18 <section>ICMPv6</section>19 <section>130</section>20 <section>Multicast Listener Report Message v2</section>21 </packet>

Codigo 5.3: Estructura en XML del fichero de salida de TShark para el sumario de paquetes. Lacodificacion en este caso no es demasiado detallada, diferenciando solo tres tipos deelementos.

47


XML DOM

DOM (Document Object Model) define un estandar para interactuar y actualizar el contenido,estructura o estilo de un documento XML o HTML. Muchos de los ficheros de salida con los quetrabaja wShark siguen un estilo de arbol XML (ver figura 5.1) lo cual nos lleva al uso de este tipode interfaz estandar para interactuar y actualizar la informacion contenida en los ficheros sobre lainterfaz principal de wShark (como el sumario o los detalles de los paquetes).

Figura 5.1: Estructura en arbol XML DOM adoptada por muchos de los archivos a leer de TShark.

Javascript

Javascript es el principal lenguaje de programacion usado en el front-side, previamente definido,y el principal lenguaje usado en este proyecto. Como ya se ha dicho, corre en el lado del cliente ysimula todos los comportamientos de la version grafica de Wireshark. Es el que permite seleccionarpaquetes, extender los menus, simular las capturas en vivo o detectar las interacciones del teclado,entre muchas otras cosas. Javascript gestiona todos los eventos que van apareciendo en la pagina yejecuta el codigo indicado para cada uno de ellos.

El codigo 5.4 muestra un fragmento de codigo Javascript que gestiona la seleccion del asciicorrespondiente al campo escogido del paquete.

1 function selectAscii(field)2 { // select (blue color) ascii and hexadecimal info of the field picked in details table

3 var classType = field.getAttribute("class");45 if (!((classType == "protocol") || ((classType == "parent field"))))6 { // not protocol nor parent field (not expanded)

7 if (!subFieldsExpanded)8 {9 var position = field.getAttribute("pos");

10 var size = field.getAttribute("size");11 position = parseInt(position);

48


1213 //pickJustThisPacket(document.getElementById("h0"),'');14 for (var i = 0; i < size; i++)15 {16 var hexadecimal = document.getElementById("h" + (position + i));17 var ascii = document.getElementById("d" + (position + i));18 hexadecimal.setAttribute("class", "h ascii-selection");19 ascii.setAttribute("class", "d ascii-selection");20 }21 }22 }2324 }

Codigo 5.4: Extracto del fichero Javascript que gestiona los eventos en la web. Esta funcionselecciona los valores ascii que seran marcados por el CSS.

PHP

PHP (Hypertext Preprocessor) es el principal lenguaje de programacion usado en el back-side.Es un lenguaje de programacion interpretado, disenado para la creacion de paginas web dinamicas,que suele correr en el lado del servidor. PHP recoge la informacion volatil solicitada por la paginay que se encuentra almacenada en ficheros o bases de datos y el servidor web con un procesadorPHP genera la pagina web resultante.

El codigo mostrado en 5.5 es el codigo PHP que se ejecuta cuando es necesario llamar a TSharkpara actualizar los datos usados para generar las graficas.

1 <?php23 $interval = $ GET['interval'];4 $file = "../" . $ GET['path'] . $ GET['net'];56 if (file exists($file)) {78 shell exec("tshark -r " . $file . " -q -z io,stat," . $interval . " > ../" . $ GET['path'] . "

statsDensity.txt");9 }

10 else echo "Session Expired";11 ?>

Codigo 5.5: Codigo PHP que ejecuta TShark en el servidor y actualiza el fichero de salida para lasestadısticas que sera leıdo por el Javascript en el lado del cliente.

Ajax

AJAX es un acronimo de Asynchronous Javascript and XML y es un conjunto de tecnicas en eldesarrollo web que permiten crear aplicaciones interactivas. Estas aplicaciones se ejecutan en el ladodel cliente, es decir, en el navegador de los usuarios, mientras se mantiene la comunicacion asıncronacon el servidor en segundo plano. De esta forma es posible realizar cambios sobre las paginas sinnecesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en lasaplicaciones.

49


En este caso particular, AJAX permite ejecutar el PHP que actualiza los ficheros de captura enel servidor y recibir la nueva informacion a mostrar en wShark. El codigo siguiente, 5.6, muestrauna peticion AJAX al servidor en Javascript plano.

1 if (window.XMLHttpRequest)2 { // code for IE7+, Firefox, Chrome, Opera, Safari

3 xmlhttp = new XMLHttpRequest();4 }5 else6 { // code for IE6, IE5

7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");8 }9 xmlhttp.onreadystatechange = function ()

10 {11 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {12 var str = xmlhttp.responseText;13 if (str != "Session Expired") {14 $.get('php/session.php');15 globalError = (str.substring(0, str.indexOf(" %")));16 ascii = str.substring(str.indexOf(" %") + 1);17 fileReady = true;18 newPackets = true;19 }20 else manageErrors("Session Expired");21 }22 }23 xmlhttp.open("GET", "php/changeFile.php?net=" + net + "&path=" + path + "&lastPacket=" +

lastPacket +24 "&packet=" + packetPDML + "&filter=" + CaptureFilter, true);25 xmlhttp.send();26 }27 }

Codigo 5.6: Peticion AJAX que recibe la respuesta del fichero PHP ejecutado en el servidor en unavariable del tipo XMLHttpRequest y la procesa conforme al codigo Javascript de lafuncion.

jQuery

jQuery es un framework o librerıa de Javascript disenada para simplificar la manera de in-teractuar con los documentos HTML, manipular los arboles DOM, manejar eventos, desarrollaranimaciones y gestionar peticiones AJAX. jQuery es una librerıa mas usada y mas popular deJavascript en la actualidad, y su soporte esta ampliamente extendido.

En wShark, jQuery ha sido anadido en los ultimos pasos del desarrollo debido a que algunasde las librerıas integradas en el proyecto (menus, generacion graficas, etc) precisan de su uso – yaque estan desarrolladas con este framework. Asimismo, una vez integrado, algunas de las funcionesnuevas de la aplicacion han sido desarrolladas utilizandolo, debido a su simplicidad y potencia.

En el siguiente fragmento de codigo 5.7 se puede observar el uso de jQuery en la generacion deestadısticas.

50


1 $.ajax({url:"php/statsDensity.php", data: { interval: intervals, path: path, net: CaptureNet},2 success: function(response) {3 if (response != "Session Expired") {4 $.get(path+'statsDensity.txt'+'?nocache='+Math.random(), function(data) {5 var lines = data.split("\n");6 var series = {7 name: "",

Codigo 5.7: Fragmento de jQuery, que se diferencia del Javascript normal por comenzar por elsımbolo $, y que genera parte de las graficas asociadas a las estadısticas de wShark.

5.2. Versiones previas

Debido a la necesidad de la aplicacion para el uso docente de la plataforma, existen diferentesversiones funcionales de wShark que han sido utilizadas a lo largo del tiempo. A traves de ellas,puede verse la evolucion del programa, desde sus funcionalidades mınimas hasta el estado actual dedesarrollo.

5.2.1. wShark v0.7

Como se puede ver en la figura 5.2, no solo las funcionalidades del entorno grafico de Wiresharkse han tomado como modelo, sino tambien su diseno, haciendo mas facil al alumno la integracioncon la nueva herramienta.

Figura 5.2: Una de las primeras versiones funcionales de wShark

51


Esta version permite visualizar los paquetes que se estan enviando por la red y simula su llegadacomo si se estuviesen capturando en tiempo real – y no almacenandose en un fichero, como es el caso.Permite seleccionar el paquete deseado y expandir los menus que incluyen la informacion especıficade los campos del datagrama. Ademas implementa las primeras aproximaciones a funcionalidadescomo el cambio de red (menu en la parte superior derecha de la pantalla) – que permite visualizarpor separado las distintas subredes independientes de la red virtual – o el filtrado de paquetes. Apesar de ello, carece todavıa de ciertos aspectos fundamentales como es la seccion con la codificacionascii y hexadecimal del paquete. La casilla de Aturar captura permite dejar de actualizar la capturay ası poder moverse mas facilmente por los paquetes ya mostrados.

5.2.2. wShark v1.0

Esta version es la primera final que se integro con la plataforma y ha sido usada oficialmentepara las practicas. En la figura 5.3 se puede comprobar que la parte principal de la interfaz ya seencuentra completa y que las tres regiones de las que consta el Wireshark y de las que se hablo enla seccion 4.3.2 se encuentran fielmente reproducidas aquı.

Figura 5.3: wShark v1.0. Esta version fue la usada en la primera version completa de la plataforma,en conjuncion con el sistema de generacion de las redes virtuales.

La cabecera ha cambiado ligeramente, perdiendo uno de los logos y mejorando la interfaz paradetener la captura. Asimismo, la seccion ascii y hexadecimal funciona de la misma forma que enWireshark, marcando la region correspondiente al campo seleccionado en estas dos codificaciones.Como se ha comentado previamente, los principales bloques que se pueden observar son cuatro:

52


1. La cabecera con diferentes opciones de control de la simulacion.

2. Un sumario de los paquetes que se han enviado por la red analizada con informacion relevantecomo el instante en el que se ha captado, relativo al primer paquete enviado; su direccion deorigen y destino o el protocolo que utiliza.

3. Menu desplegable con informacion detallada incluida en el paquete de cada una de sus cabe-ceras y secciones.

4. Contenido del paquete en hexadecimal y ascii, que nos permitira observar como esta codificadacada una de las cabeceras y secciones mentadas en el punto anterior.

A diferencia del Wireshark, si la arquitectura de la red hace que esta este dividida en diferentessubredes, nuestro programa permite cambiar de una a otra de forma rapida a traves del menu des-plegable de la esquina superior derecha de la pantalla. A traves de este menu se puede cambiar desubred de forma dinamica sin necesidad de volver a cargar la pagina.

En la siguiente captura, figura 5.4, puede verse dicho cambio en el menu desplegable, el funcio-namiento del filtrado de paquetes y como cambia la interfaz de captura cuando se detiene.

Figura 5.4: Paquetes de la subred 0 – iguales a los de la figura 5.2 – filtrados para mostrar unicamentelos paquetes del protocolo arp.

Estas versiones, aun siendo funcionales, se encontraban todavıa en una fase muy basica, care-ciendo de funciones muy interesantes para facilitar la comprension de los eventos de la red. Por ello,el desarrollo siguio avanzando hacia la version final.

53


5.3. Version final

El trabajo principal para la version final es anadir funcionalidades nuevas, desde estadısticasa funciones de navegacion y guardado. Ademas, se anade la posibilidad de utilizar la aplicacionen solitario, permitiendo a los usuarios entrar a la pagina web de wShark y subir y visualizar suspropias capturas de redes aunque no dispongan de ningun software especıfico para ello.

En esta seccion se tratara primero la version integrada en LabXar, con la simulacion de capturaen tiempo real – ya que es la que origino inicialmente el proyecto –, y despues se comentaranlas motivaciones de la version en solitario y la decision de licenciar el proyecto bajo una licenciaGPL, haciendo accesible el codigo al publico general. Para leer en detalle el texto de la licencia,se puede consultar el apendice E – en ingles, ya que no existen traducciones oficiales de la misma.Se diferenciara tambien entre las funcionalidades de las dos versiones ya que existen opciones quesolo tienen sentido en una de ellas por lo que solo son accesibles en la adecuada (como el detenery reanudar la captura, que no tiene cabida en la version autonoma). Ademas, se introducen porprimera vez los logos disenados especıficamente para la aplicacion. En el Apendice D: Logos puedeconsultarse mas informacion sobre el diseno y el significado de los mismos.

5.3.1. Version integrada en LabXar de wShark

Esta es la version que se ejecuta con la red virtual generada. Una vez el usuario accede a LabXary genera la red a simular, la propia herramienta proporciona un enlace a una instancia de wSharkasociada a la comunicacion de dichas maquinas virtuales.

Figura 5.5: Red virtual iniciada y comunicacion con la misma mediante telnet.

54


La figura 5.5 (es la misma imagen que la figura 3.3 del capıtulo de explicacion de LabXar)muestra la comunicacion con la red generada y el enlace a wShark en la plataforma.

Cualquier comunicacion que se realice a traves de la lınea de comandos abierta, que se trata denuestra ventana a la red virtual, se vera reflejada casi instantaneamente en wShark. En la figura5.6 puede observarse la ventana principal de wShark en el estado de apertura de la comunicacion,habiendo intercambiado solo los paquetes de inicio. En la siguiente imagen, figura 5.7, puede versecomo los paquetes ARP y los paquetes ICMP del ping generado en la terminal de la esquina inferiorderecha aparecen en el sumario de la comunicacion de red.

Figura 5.6: Interfaz final de wShark. Los paquetes que aparecen son los generados al iniciar lacomunicacion de la red virtual.

Como se puede observar en las imagenes anteriores, los cambios entre esta version y las previas sehan producido principalmente en la cabecera. Comenzando por la parte superior izquierda, puedeapreciarse uno de los nuevos logos de la aplicacion, seguido por la informacion del estado de lacaptura, la red de la que se esta capturando, el filtro aplicado y el idioma. Finalmente, la introducciondel menu ayuda a poder acceder facilmente a todas las nuevas funciones que no tenıan espacio enlas cabeceras anteriores.

Para entender mejor las funcionalidades incluidas, se hablara en mas detalle de cada uno de losapartados del mencionado menu. En este caso se mencionaran las funciones comunes con la versionStand-Alone y las propias de la esta version. En el apartado de la aplicacion autonoma solo serecogeran las diferencias con las ya mentadas aquı.

55


Figura 5.7: Los pings enviados en 5.5 son recibidos y mostrados en el sumario de wShark.

Fichero

En la figura 5.8 se pueden observar las diferentes opciones a seleccionar en el menu de Ficheroen wShark:

Guardar: Permite almacenar en el disco duro, en formato .cap, la captura que se esta mos-trando para poder visualizarla en cualquier momento con otro analizador de redes o con laversion Stand-Alone de wShark.

Guardar (filtro): Igual que la anterior pero aplicando al fichero el filtrado que se este usandoen la captura.

Guardar todas las redes: Cuando se esta capturando mas de una red, esta opcion crea unarchivo .zip con los ficheros .cap de cada una de las redes y lo guarda en el disco.

Guardar todas las redes (filtro): Combinacion de las dos anteriores opciones, almacenandoun .zip con todas las redes filtradas en el disco.

56


Figura 5.8: Menu Fichero de wShark.

Ir

En la figura 5.9 se pueden ver las diferentes opciones de navegacion de paquetes que se puedenseleccionar en el menu Ir en wShark:

Siguiente Paquete: Selecciona el siguiente paquete al que esta seleccionado, actualizando elmenu desplegable de los campos y el hexadecimal y ascii.

Anterior Paquete: Selecciona el paquete anterior.

Primer Paquete: Selecciona el primer paquete de la captura actual y mueve el scroll alcomienzo.

Ultimo Paquete: Selecciona el ultimo paquete de la captura actual y mueve el scroll al final.

Estas funciones pueden realizarse tambien con el teclado, pulsando respectivamente las flechasde direccion y los botones de Inicio y Fin.

57


Figura 5.9: Menu Ir de wShark.

Captura

La figura 5.10 muestra las dos secciones del menu de captura: gestion de redes y captura live.

Gestionar Redes

• Cambiar red: Abre una ventana modal (ver figura 5.11) que permite seleccionar entrelas diferentes redes disponibles para capturar en la simulacion.

Captura Live

• Play: Reanuda la simulacion de captura, detectando cambios en el fichero y reflejandolosen wShark como nuevos paquetes que aparecen en el sumario.

• Stop: Detiene la simulacion de captura, deteniendo las consultas AJAX que compruebansi ha habido cambios en los ficheros de captura.

Estadısticas

La generacion de graficas y estadısticas para visualizar entender mejor la informacion de wSharkes una de las funcionalidades principales implementadas. Como se puede ver en la figura 5.12, lasfunciones disponibles son:

58


Figura 5.10: Menu Captura de wShark.

Figura 5.11: Ventana modal para seleccionar el cambio de red.

59


Figura 5.12: Diferentes estadısticas referentes a la informacion de wShark.

Informacion del Fichero

• Informacion General: despliega una ventana modal con informacion sobre el archivo.cap del que se esta sacando informacion sobre los paquetes. Entre la informacion incluidose cuenta el nombre del fichero, su tipo, la fecha de captura o su MD5 (ver figura 5.13).

Figura 5.13: Ventana modal con informacion generica sobre el fichero del que se esta capturando.

60


• Informacion Jerarquica: muestra el numero de paquetes y bytes de cada tipo deencapsulacion por protocolos de forma jerarquica, organizado en arbol horizontal (verfigura 5.14).

• Conversaciones de Protocolos: permite escoger entre diferentes protocolos y verque tramas se han intercambiado del mismo y como se ha producido la comunicaciona lo largo de todo el fichero, incluyendo el numero de paquetes y bytes que se han en-viado en cada direccion para cada una de las diferentes entradas (ver figuras 5.15 y5.16).

Figura 5.14: Ventana modal con informacion organizada jerarquicamente referente a los protocolosincluidos en los diferentes de paquetes enviados.

Figura 5.15: Menu, sobre la ventana modal, para la seleccion de conversaciones de diferentes proto-colos

61


Figura 5.16: Informacion, en este caso, sobre las diferentes conversaciones del protocolo ethernet enla captura..

Graficas

• Densidad: ayudado del modulo jQuery para representar graficas, highcharts, muestrala distribucion de paquetes o bytes a lo largo del tiempo de captura (ver figuras 5.17 y5.18).

• Densidad Dinamica: Igual que la anterior, pero actualizandose dinamicamente con lospaquetes o bytes que van llegando a la captura (ver figura 5.19).

Figura 5.17: Menu sobre la ventana modal para escoger si se desea mostrar la grafica de la densidadde paquetes o de bytes.

62


Figura 5.18: Grafica colocada sobre la ventana modal del numero de paquetes frente al intervalotemporal de captura.

Figura 5.19: Grafica del numero de bytes frente al intervalo temporal de captura que se actualizade forma dinamica con los nuevos paquetes que llegan en la simulacion.

63


Idioma

El menu de la figura 5.20 permite escoger entre diferentes idiomas de forma dinamica. Laslenguas incluidas en la actualidad son:

Ingles.

Castellano.

Catalan.

Gallego.

Euskera.

Figura 5.20: Menu para escoger el lenguaje de la interfaz de wShark.

Filtro

Esta opcion despliega otra ventana modal que permite introducir el filtro de captura deseado,desde el protocolo (por ejemplo, arp o icmp) o expresiones mas complejas como solo mostrar eltrafico proveniente de una ip en particular (ip.src == 147.83.39.145 ). En la figura 5.21 puede verseeste ultimo ejemplo.

Figura 5.21: Ventana modal para aplicar un filtro a la captura.

64


5.3.2. Stand-alone wShark

La motivacion detras de la version autonoma de wShark es que cualquier persona del mundo,desde cualquier equipo con cualquier sistema operativo, que desee consultar un fichero de tipo pcapcon el trafico capturado en una red, pueda hacerlo simplemente conectandose a la web y subiendosus archivos.

Se puede acceder a esta version de wShark a traves de la direccion www.wshark.org y la paginaprincipal puede verse en la figura 5.22.

Figura 5.22: Pagina de inicio de la version Stand Alone de wShark.

En la imagen se puede observar un diseno minimalista, con el logo principal de wShark domi-nando la pagina. El menu de subida de ficheros permite hacer clic en el boton y navegar el discoduro, escogiendo los ficheros a subir, o arrastrarlos y soltarlos directamente. Una vez subidos, secarga la pagina con la interfaz que muestra el trafico, como en la version normal pero cambiandoalgunas de las funcionalidades que no tienen sentido en esta version. Haciendo clic en la lınea de“Cambiar Idioma” se abre una ventana modal permitiendo escoger la lengua en la que mostrar lapagina, como puede verse en la imagen 5.23. Esta eleccion se mantendra en la interfaz de wSharken sı, con los ficheros subidos del usuario

Las diferencias principales que pueden observarse en los diferentes menus son:

65

www.wshark.org


Figura 5.23: Ventana modal para seleccionar el idioma en la pagina de inicio de la version StandAlone de wShark.

Fichero

Las opciones de guardado se eliminan (ya que todos los ficheros han sido subidos por el usuario).Se anaden nuevas entradas:

Nuevo: Elimina la sesion actual de usuario y los ficheros subidos y reenvıa a la pagina inicialpara poder subir nuevos archivos.

Cambiar: Permite cambiar entre los diferentes ficheros subidos de forma dinamica, de lamisma forma que antes se podıa cambiar de red (ver figura 5.24).

Figura 5.24: Ventana modal para cambiar entre los diferentes ficheros subidos.

66


Captura

Se elimina completamente, perdiendo el sentido en esta version, ya que no se esta simulandoninguna captura en vivo.

Estadısticas

Se mantienen todas las estadısticas a excepcion de la que se actualiza dinamicamente, ya queno tiene ningun sentido debido a que los ficheros subidos son estaticos.

5.4. Algoritmia y estructura interna de la aplicacion

En esta seccion se muestran algunas pinceladas de como se ha codificado wShark para obtenerlos resultados finales. Solo se incluyen consideraciones generales y deliberadamente se obvian pasosintermedios para evitar extender demasiado el capıtulo. El objetivo es ensenar las partes mas im-portantes del codigo y de los algoritmos utilizados, a traves de unos pocos casos particulares, paraentender mejor la aplicacion en sı.

Para profundizar mas en el tema se puede revisar el apendice C: Codigo fuente de wShark, quecontiene el codigo completo de las funciones de las que aquı se incluyen fragmentos ası como elcodigo fuente de otras partes relevantes del proyecto.

5.4.1. Muestreo del fichero de captura

Como ya se ha dicho previamente, la informacion de la salida mostrada en el navegador seencuentra codificada en el fichero de captura en formato .pcap. TShark se encarga de decodificarla,procesarla y mostrarla en un formato mas accesible. La informacion basica necesaria para iniciarwShark se consigue invocando TShark con tres formatos de salida distintos: psml (packet summarymarkup language), pdml (packet details markup language) y hexadecimal/ascii. Puede verse comose generan los tres ficheros de salida en estos formatos usando PHP en el codigo 5.8.

1 shell exec($tshark." -r " . $file . " -T psml -R 'frame.number > " . $ GET['lastPacket'] . " "

. $filter . "' > ".$vnuml working dir.$ SESSION['usuari']."/psml.xml";2 shell exec($tshark." -r " . $file . " -T pdml -R 'frame.number == " . $ GET['packet'] ."' > ".

$vnuml working dir.$ SESSION['usuari']."/pdml.xml";3 shell exec($tshark." -r " . $file . " -x -R 'frame.number == " . $ GET['packet'] ."' > ".

$vnuml working dir.$ SESSION['usuari']."/ascii.txt";

Codigo 5.8: changeFile.php, ejecuta TShark en el servidor genreando los ficheros de salida con losformatos psml, pdml y ascii

Se ha de usar PHP para esto, ya que es el lenguaje de la parte del servidor que puede interactuarcon los ficheros almacenados en el. El codigo completo de este fichero puede consultarse en C.6.

Informacion mas completa de la comunicacion que se produce entre el cliente y el servidor aliniciar wShark puede encontrarse en el apendice B y en particular en la figura B.1.

67


PSML

Este es el formato que genera la informacion del sumario. Esto significa que el XML del ficherode salida (codigo 5.9) ha de ser transformado a un HTML de la forma que se puede ver en el codigo5.10.

1 <packet>2 <section>1</section>3 <section>0.000000</section>4 <section>::</section>5 <section>ff02::16</section>6 <section>ICMPv6</section>7 <section>130</section>8 <section>Multicast Listener Report Message v2</section>9 </packet>

1011 <packet>12 <section>2</section>13 <section>0.279999</section>14 <section>::</section>15 <section>ff02::1:ff00:101</section>16 <section>ICMPv6</section>17 <section>78</section>18 <section>Neighbor Solicitation for fe80::fcfd:ff:fe00:101</section>19 </packet>

Codigo 5.9: psml.xml, fragmento del fichero de salida en formato XML con la informacion delsumario de wShark.

1 <tr class="" onmousedown="packetDetails(this)" id="">2 <td>1</td>3 <td>0.000000</td>4 <td>::</td>5 <td>ff02::16</td>6 <td>ICMPv6</td>7 <td>130</td>8 <td>Multicast Listener Report Message v2</td>9 </tr>

10 <tr class="" onmousedown="packetDetails(this)">11 <td>2</td>12 <td>0.279999</td>13 <td>::</td>14 <td>ff02::1:ff00:101</td>15 <td>ICMPv6</td>16 <td>78</td>17 <td>Neighbor Solicitation for fe80::fcfd:ff:fe00:101</td>18 </tr>

Codigo 5.10: Informacion del codigo XML 5.9 codificada en HTML para mostrarla en el sumario dewShark

Para ello, se recibe la estructura XML en formato arbol DOM en una variable de respuesta deAJAX y con javascript se procesan los datos. Con javascript se escribe tambien el HTML resultante.

68


1 for (i = 0; i < x.length; i++)2 { // all <packet> from file

3 y = x[i].childNodes; // y tree from section

4 var row = document.createElement("tr");5 row.setAttribute("class", "");6 for (j = 1; j < y.length; j = j + 2)7 { // j + 2 because text type is in the odd positions

8 var cell = document.createElement("td");9

10 if (y[j].childNodes.length != 0)1112 var cellText = document.createTextNode(y[j].childNodes[0].nodeValue); // Each section's value

13 cell.appendChild(cellText);1415 row.appendChild(cell);16 }17 row.setAttribute('onmousedown', 'packetDetails(this)');18 if (i == 0) {19 row.setAttribute('class', 'picked'); // pdml details from first packet by default

20 row.setAttribute('id','picked'); // needed to navigate packets

21 }22 tabla.appendChild(row);23 }

Codigo 5.11: io.js, el bucle recorre la estructura en arbol del codigo 5.9 creando los elementos HTMLnecesarios para generar el codigo 5.10.

En particular, en el codigo 5.11 el primer bucle en la lınea 1 selecciona cada uno de los paquetesy el segundo bucle (lınea 6) permite acceder a los campos de texto en cada uno de ellos. Comopuede verse, en las lıneas 4 y 8 se crean las etiquetas tr y td de HTML y en la 12 el campo de textoque encierran. Es interesante hacer mencion aparte al codigo de la lınea 17 – donde se define que sedebe hacer cuando se hace clic en el paquete – y a las lıneas 19 y 20 que definen la clase y el id delpaquete que empieza escogido por defecto.

PDML

Del mismo modo que en la seccion anterior, se debe transformar la informacion del codigo 5.12en la del codigo 5.13. En este caso, las etiquetas y los atributos son mas complejos ya que se debenpoder expandir y contraer los campos al hacer clic en ellos.

1 <field name="eth.dst" showname="Destination: IPv6mcast_00:00:00:16 (33:33:00:00:00:16)" size="6"

pos="0" show="33:33:00:00:00:16" value="333300000016">2 <field name="eth.addr" showname="Address: IPv6mcast_00:00:00:16 (33:33:00:00:00:16)" size="6"

pos="0" show="33:33:00:00:00:16" value="333300000016"/>3 <field name="eth.ig" showname=".... ...1 .... .... .... .... = IG bit: Group address (

multicast/broadcast)" size="3" pos="0" show="1" value="1" unmaskedvalue="333300"/>

Codigo 5.12: psml.xml, fragmento del fichero de salida en formato XML con la informacion de losdetalles de un paquete en wShark.

El codigo javascript es mas complejo pero similar al de la seccion anterior. Puede consultarseıntegro en el apendice C en el codigo C.10.

69


1 <div id="eth" class="protocol picked expanded" size="14" pos="0">2 <span class="protoLabel" onmousedown="expandClass(this.parentNode)" style="cursor:pointer">Ethernet

II, Src: fe:fd:00:00:01:01 (fe:fd:00:00:01:01), Dst: IPv6mcast 00:00:00:16 (33:33:00:00:00:16)</span>3 <div id="eth.dst" class="parent field" size="6" pos="0">4 <img class="" align="left" src="images/arrow-rigth12px.png">5 <span class="fieldLabel" onmousedown="expandClass(this.parentNode)" style="cursor:pointer">

Destination: IPv6mcast 00:00:00:16 (33:33:00:00:00:16)</span>6 <div id="eth.addr" class="field" size="6" pos="0">7 <span class="fieldLabel" onmousedown="expandClass(this.parentNode)">Address: IPv6mcast 00:00:00:16

(33:33:00:00:00:16)</span>8 </div>

Codigo 5.13: Informacion del codigo XML 5.12 codificada en HTML para mostrarla los detalles depaquete de wShark

Es interesante hacer notar que la salida pdml de TShark se filtra, almacenando los detalles deun unico paquete en el fichero de salida. Esto puede hacerse ya que solo se muestra al mismo tiempola informacion del paquete seleccionado entre todos los del sumario. Ademas, aunque serıa masrapido de procesar – no habrıa que solicitar los datos al servidor y ejecutar TShark cada vez que seselecciona otro paquete – no serıa viable guardar la informacion de todos al mismo tiempo. Comopuede verse en C.8, la descripcion de cada uno de los paquetes es extensa, haciendo crecer muyrapido el tamano del fichero si se guardase la informacion pdml de todos ellos.

Hexadecimal y ascii

Estos datos se reciben en texto plano, ası que la unica diferencia en este caso es que, en vez derecorrer arboles XML, se ha de procesar los datos con funciones de tratamiento de cadenas, comopuede verse en 5.14.

1 for (var i = 0; i < 16; i++)2 { // 16 hex values per file

3 text = aux.substr(0, aux.indexOf(" "));4 aux = aux.substr(aux.indexOf(" ") + 1);5 if (!(text == ""))6 {7 var spanText = document.createTextNode(text);8 span = document.createElement("span");9 span.setAttribute("class", "h");

10 span.setAttribute("id", "h" + (i + index)); // used to select this packets when needed

11 span.appendChild(spanText);12 pre.appendChild(span);13 text = " ";14 spanText = document.createTextNode(text);15 pre.appendChild(spanText);16 }

Codigo 5.14: io.js, bucle para escribir los valores hexadecimales que forman el paquete en formatoHTML.

En la lınea 3 se selecciona el valor hexadecimal a escribir y en la 4 avanza la cadena al proximoelemento a procesar en la siguiente vuelta del bucle. Las etiquetas son distintas pero el procedi-miento es el mismo al de los dos casos anteriores. En el apendice (codigo C.10) puede verse que elprocedimiento para parsear el ascii es similar (lıneas 79 a 91). Cada uno de los valores tiene que iren etiquetas independientes para poder ser referenciado ya que, cuando se selecciona un campo enparticular del paquete, se marca con otro color solo los valores ascii y hexadecimal que lo codifican.

70


5.4.2. Actualizacion de informacion en el navegador

Existen multiples eventos que provocan cambios en la interfaz de la aplicacion, desde seleccionaropciones en el menu hasta desplegar la informacion de un paquete en particular. Por ello, noscentraremos en explicar tres casos particulares que son especialmente importantes.

Seleccion de un nuevo paquete en el sumario

Al seleccionar un paquete nuevo, la lınea del sumario se resalta en color azul y se debe cambiarla region de la interfaz con los detalles del paquete para que refleje los nuevos datos. Se ha deactualizar tambien el fichero pdml ya que solo contiene los detalles de un unico paquete.

1 function eventPDML() {23 if (numEvents == 1) {4 updatingPDML = true;5 deleteTable("detail-div");6 deleteTable("tab-0");7 updateFile(CaptureNet, CaptureFilter);8 showLoadingDetails();9 setTimeout("newPacketDetails()", 1000);

10 }11 else if ((numEvents == 2)&&(updatingPDML)) {12 setTimeout("eventPDML()", 1000);13 }14 else numEvents−−;1516 }1718 function newPacketDetails() {19 // writes details and ascii tables with the info of new packet selected

2021 if (fileReady) {22 deleteTable("detail-div");23 var xmlDoc = loadXMLDoc(path + 'pdml.xml');24 if (numEvents == 1) {25 writePDML('packet', xmlDoc, 0);26 writeAscii();27 }2829 numEvents−−;30 updatingPDML = false;31 }32 else setTimeout("newPacketDetails()", 500);3334 }3536 function packetDetails(packet) {37 // update pdml.xml with the xml info of the new packet selected

3839 if (!Capturing) {40 numEvents++;41 packetPDMLref = packet;42 pickJustThisPacket(packet, '');43 packet.setAttribute('class', 'picked');44 packet.setAttribute('id', 'picked');

71


45 packetPDML = packet.firstChild.firstChild.nodeValue; // update the packet which need to show

details

46 eventPDML();47 }48 else manageErrors("Capturing");4950 }

Codigo 5.15: Events.js, funciones para la actualizacion de la region de detalles del paquete.

En las lıneas 43 y 44 del codigo 5.15 se cambian los atributos de la lınea del sumario referente alpaquete, lo que cambia su color (a traves de CSS, codigo C.16) y lo remarca en azul. En la funcioneventPDML() se borran las etiquetas con la informacion del paquete previo y en la lınea 7 se invocaa la funcion que hara la peticion AJAX para que PHP (codigo 5.8) actualice el fichero pdml y elascii con el paquete seleccionado. Finalmente, se invoca a los metodos que se vieron en la seccionprevia (codigos 5.15 y 5.14) para reescribir el PDML y el hexadecimal/ascii en las lıneas 25 y 26.

Este evento se puede definir con la comunicacion que se muestra en el apendice B en la figuraB.3 y la explicacion asociada.

Simulacion en tiempo real de nuevos paquetes

Cuando se intercambian paquetes en la red virtual, los ficheros .pcap de captura de las diferentessubredes se actualizan con los nuevos datos. wShark monitoriza si estos ficheros han sido modificadosa traves del codigo PHP 5.16 que es llamado periodicamente.

1 $fich = ( $vnuml working dir.$ SESSION['usuari']."/capture" . $ GET['net'] . ".cap");2 $modified = filemtime($fich);3 echo $modified;

Codigo 5.16: fileModified.php, detecta si ha habido cambios en los ficheros .pcap de captura de lasredes.

La funcion filemtime de la lınea 2 devuelve el tiempo de la ultima modificacion del fichero. Si esdistinto del ultimo registrado, el fichero ha sufrido cambios y debemos actualizar los paquetes. Estoprovoca una actualizacion de los ficheros psml, pdml y ascii y desemboca en la simulacion usandojavascript de la llegada de paquetes como si se estuviesen detectando consecutivamente en tiemporeal. Esto se consigue con la funcion mostrada en el codigo 5.17.

1 function simulateCaptureLive()2 { /* Show packets one by one in the summary simulating real time capture */

3 if (fileReady)4 {5 if (!Capturing)6 {7 Capturing = true;8 xmlDocLive = loadXMLDoc("psml.xml");9 }

10 var x = xmlDocLive.getElementsByTagName("packet"); // x is the tree from <packet>

11 if (currentPacket < x.length)12 {13 var tabla = document.getElementById("SummaryTable"); // table's beggining reference

14 y = x[currentPacket].childNodes; // y tree from section

72


15 var row = document.createElement("tr");16 for (j = 1; j < y.length; j = j + 2)17 { // j + 2 because text type is in the odd positions

18 var cell = document.createElement("td");1920 if (y[j].childNodes.length != 0)2122 var cellText = document.createTextNode(y[j].childNodes[0].nodeValue); // each section's value

23 cell.appendChild(cellText);24 row.appendChild(cell);25 }26 row.setAttribute('class', '');27 row.setAttribute('onmousedown', 'packetDetails(this)');28 tabla.appendChild(row);29 currentPacket = currentPacket + 1;30 setTimeout("simulateCaptureLive()", 500);31 scrollDown();32 }33 else34 {35 updating = false;36 Capturing = false;37 if (currentPacket != 0) lastPacket = x[currentPacket − 1].childNodes[1].childNodes[0].nodeValue; //

last packet value

38 currentPacket = 0;39 setTimeout("modifyFile(CaptureNet)", 2500);40 }41 }42 else43 {44 setTimeout("simulateCaptureLive()", 500);45 }46 }

Codigo 5.17: WebShark.js, simulacion de la captura en tiempo real.

La funcion lee el nuevo arbol DOM que contiene el psml de los nuevos paquetes de la mismaforma que cuando se escribe el sumario. Sin embargo, en vez de crear toda la estructura al mismotiempo, se crean las nuevas etiquetas tr y td de cada paquete por separado y se colocan al finalde la estructura ya existente. Usando la llamada recursiva de la lınea 30, retardada 500 ms con lafuncion setTimeout, se anade un paquete nuevo al sumario cada medio segundo, simulando ası lallegada consecutiva de los paquetes nuevos.

Cambio de red

Cuando la red simulada esta formada por diferentes subredes, el menu de cambio de red permitevisualizar los paquetes propios de cada una de ellas. Para que se puedan mostrar, se ha de actualizarlos ficheros psml, pdml y ascii invocando TShark con el fichero .pcap de la nueva red elegida (deidentica manera a como se ha ensenado previamente), eliminar la informacion mostrada en la interfazy reconstruirla con los nuevos datos. El codigo 5.18 genera la ventana modal que puede verse en lafigura 5.11.

73


1 function changeNetwork() {2 var mod = document.createElement("div");3 mod.setAttribute("id","simplemodal-container");45 var headerNet = document.createElement("h3");6 headerNet.setAttribute("style","text-align: center;");7 headerNet.appendChild(document.createTextNode(manageLanguage("Red")));89 var br = document.createElement("br");

10 headerNet.appendChild(br);1112 for (var i=0 ; i<nets ; i++) {13 var buttonNet = document.createElement("button");14 buttonNet.setAttribute("type","button");15 buttonNet.setAttribute("value",i);16 buttonNet.setAttribute("onmousedown","onChange(this.value,filter); $.modal.close();");17 buttonNet.appendChild(document.createTextNode(manageLanguage("Droplist")+" "+i));18 headerNet.appendChild(buttonNet);19 }2021 mod.appendChild(headerNet);2223 $.modal(mod);2425 }

Codigo 5.18: Events.js, generacion de la ventana modal con la eleccion de las distintas subredes.

Al hacer clic en el boton de la subred escogida, se llama a la funcion onChange – como puedeverse en la lınea 16 – que actualiza los datos de la cabecera. En el siguiente fragmento de codigo,esta funcion junto con newSummary y rewriteTable son las que se encargan de volver a crear lasetiquetas y los datos que forman la informacion de los nuevos paquetes.

1 function onChange(net, filter)2 { // Network change event or filter

3 updating = true;4 CaptureNet = net;5 CaptureFilter = filter;6 deleteTable("infoNet");7 deleteTable("infoFilter");8 deleteTable("infoLang");9 infoStatus();

10 lastPacket = 0; // new net, whole new file

11 packetPDML = "1"; // first packet's details by default

12 newSummary(net);13 updating = false;14 }

Codigo 5.19: Events.js, codigo que se ejecuta al hacer clic en los botones de la ventana modal.

1 function rewriteTable()2 { // rewrite summary and details with the new information in psml and pdml

3 if (fileReady)4 {5 $("#summaryLoading").remove();6 $("#detailsLoading").remove();7 if (!manageErrors(globalError))8 { // if true, error detected

74


9 var xmlDoc = loadXMLDoc(path + "psml.xml");10 writePSML("packet", xmlDoc);11 scrollDown();12 if (!manageErrors(globalError))13 { // if there are no packets, error

14 var xmlDoc = loadXMLDoc(path + "pdml.xml");15 writePDML("packet", xmlDoc, 0);16 writeAscii();17 }18 }19 }20 else setTimeout("rewriteTable()", 500);21 }2223 function newSummary(net)24 { // info psml.xml is written together

25 deleteTable("SummaryTable");26 deleteTable("detail-div");27 deleteTable("tab-0");28 updateFile(net, CaptureFilter);29 showLoadingSummary();30 showLoadingDetails();31 setTimeout("rewriteTable()", 1000);32 }

Codigo 5.20: ManageTables.js, simulacion de la captura en tiempo real.

La funcion newSummary elimina todos los datos de la subred previa del HTML de la pagina,coloca las animaciones de carga en su lugar (ver codigo C.5) e invoca a la funcion que realizala peticion AJAX al PHP para actualizar los ficheros. La reescritura de los nuevos datos se deja arewriteTable, que invoca a las ya comentadas funciones de escribir psml, pdml y ascii. Es interesantehacer mencion especial a las lıneas 5 y 6 del codigo 5.20, donde la eliminacion dinamica del codigoHTML de la pagina se realiza usando las librerıas de jQuery.

5.4.3. Estadısticas

Existen diversas estadısticas que se pueden aplicar sobre los paquetes capturados, pero comoejemplo explicaremos la algoritmia seguida para mostrar las graficas (estaticas y dinamicas) de lasfiguras 5.18 y 5.19 al ser estas parte representativa de las estadısticas.

Graficas estaticas

Primero se hace una peticion al servidor para generar un fichero de salida de TShark en textoplano con los datos de las estadısticas. El PHP que ejecuta TShark es el 5.21 y el fichero de salidaa partir del cual se saca toda la informacion necesaria para las graficas se puede ver en (5.22).

El valor del intervalo de tiempo se calcula tomando el tiempo total y dividiendolo entre diez.Este valor se ha escogido para mantener una relacion de aspecto facil de visualizar en las graficas.

75


1 <?php23 $interval = $ GET['interval'];4 $file = "../" . $ GET['path'] . $ GET['net'];56 if (file exists($file)) {78 shell exec("tshark -r " . $file . " -q -z io,stat," . $interval . " > ../" . $ GET['path'] . "

statsDensity.txt");9 }

10 else echo "Session Expired";11 ?>

Codigo 5.21: statsDensity.php, genera el fichero de salida en texto plano que se puede ver en elcodigo 5.22

12 ===================================================================

3 IO Statistics4 Interval: 7.300 secs5 Column #0:6 | Column #07 Time |frames| bytes8 000.000−007.300 3 3389 007.300−014.600 0 0

10 014.600−021.900 0 011 021.900−029.200 4 32812 029.200−036.500 2 14013 036.500−043.800 0 014 043.800−051.100 0 015 051.100−058.400 0 016 058.400−065.700 0 017 065.700−073.000 10 75618 ===================================================================

Codigo 5.22: statsDensity.txt, fichero de salida en texto plano con la informacion para generar lasgraficas.

Estos datos se procesan con javascript y se pasan a la librerıa jQuery que genera las graficas,highcharts. El siguiente bucle (codigo 5.23) se mueve de elemento en elemento (time, frame y bytesde las lıneas 8 a 17 del texto plano anterior) y los envıa a la librerıa. En este caso, el valor 0corresponde al intervalo particular de tiempo (por eso se envıa al eje x, como se ve en la lınea 4) yel 1 al numero de frames (paquetes) en ese intervalo.

1 $.each(items, function(itemNo, item) {2 if (item != "") {3 switch (i) {4 case 0: item = item.replace("<>", "-"); options.xAxis.categories.push(item); break;5 case 1: series.data.push(parseInt(item)); break;6 }7 i++;8 }9

10 })

Codigo 5.23: Events.js, codigo que parsea parte del texto plano para generar las graficas estadısticas.

76


La grafica generada se muestra en una ventana modal usando la librerıa highcharts en conjuntocon la libreria simplemodal. Esto supone una complicacion anadida que se solventa en la funcioninitDensityGraph() que puede consultarse (ası como el resto del codigo de las graficas) en el apendiceC en el codigo C.15.

Graficas dinamicas

El caso de las graficas dinamicas es similar al anterior, pero implica la necesidad de ir actua-lizando el fichero statsDensity.txt periodicamente para reflejar los paquetes que van llegando a lared. Esto se consigue con peticiones AJAX periodicas que ejecutan el codigo PHP de 5.21.

1 events: {2 load: function() {34 // set up the updating of the chart each second

5 series = this.series[0];6 finished = true;7 setInterval(function() {8 if (newPackets) {9 $.ajax({url:"php/statsDensity.php", data:"interval=" + intervals + "&file=capture" +

CaptureNet + ".cap" + "&filter=" + lastPacketStats,10 success: function(response) {11 $.get('statsDensity.txt'+'?nocache='+Math.random(), function(data) {12 newPackets = false;13 var lines = data.split("\n");14 finished = false;15 linesStats = lines;16 });17 }18 });19 }2021 if (!finished) {22 processLinesStats(linesStats);23 }24 else {25 series.addPoint([(offset++∗intervals), 0], false, true);26 series.addPoint([(offset∗intervals−0.005),0], true, true);27 }2829 }, intervals∗1000);3031 }32 }

Codigo 5.24: Events.js, codigo a ejecutar en el momento en el que se carga (load) la grafica dinamica.

Cada intervals segundos (lınea 29) se hace una nueva peticion AJAX para actualizar la es-tadıstica de los paquetes. Ademas, la imposibilidad de usar el formato de columnas en las graficasdinamicas por limitaciones de la librerıa obliga a simularlas con las lıneas 25 y 26.

De nuevo, para obtener mas informacion sobre como se parsea y envıa la informacion, puedeconsultarse el codigo C.15 del apendice.

77


5.4.4. Stand-Alone Version

Todo lo anterior puede aplicarse de forma practicamente directa a la version stand-alone dewShark. En esta ultima seccion se incluyen ejemplos, por tanto, de algunas de las particularidadesque carecen de sentido en la version integrada en LabXar, como puede ser la subida de ficheros decaptura al servidor o la creacion de la estructura de carpetas de sesion de los distintos usuarios.

Subir ficheros

En la pagina inicial de esta version de wShark se ha anadido un plugin de jQuery que permitefacilitar la subida de ficheros multiples. En el siguiente codigo (5.25) puede verse la inicializaciondel mismo.

1 <script type="text/javascript">2 $(document).ready(function(){3 var running = 0;4 var uploader = new qq.FileUploader({5 // pass the dom node (ex. $(selector)[0] for jQuery users)

6 element: document.getElementById('file-uploader'),7 // path to server-side upload script

8 action: 'php/php.php',9 allowedExtensions: ['cap', 'pcap'],

10 sizeLimit: 1000000, // 1 MB

11 maxConnections: 12,12 onSubmit: function() {13 running++;14 },15 onComplete: function() {16 running−−;17 if (running == 0) // only trigger the event when there is no more files to upload

18 window.location.replace("WebShark.php");19 }20 });21 });

Codigo 5.25: IntroWebShark.php, inicializacion del plugin utilizado para subir los ficheros delusuario al navegador en un jQuery incrustado en el HTML de la pagina.

Pueden verse la definicion del fichero PHP que se ejecutara en el servidor para copiar los archivosen la lınea 8, las extensiones permitidas de ficheros en la 9 y el tamano maximo de los ficheros en lalınea 10. Cuando terminan de subirse todos los ficheros escogidos, se lanza la pagina con la interfazde la aplicacion, WebShark.php (lınea 18).

El esquema de la comunicacion cliente/servidor que se produce puede consultarse en la imagenB.4 de los apendices.

Generacion de la estructura de ficheros de usuario

Los ficheros de captura y los ficheros de salida generados por wShark se almacenan en una carpetapropia del usuario en el servidor. Para cada usuario unico se genera una sesion y un identificadorunico de sesion dependiente de su direccion IP y del navegador que esta utilizando para conectarse.

78


El PHP que se encarga de subir los ficheros crea tambien la carpeta de usuario con el nombre desesion, como puede verse en el siguiente fragmento.

1 $uploader = new qqFileUploader($allowedExtensions, $sizeLimit);2 mkdir("../" . session id());3 $result = $uploader−>handleUpload("../" . session id() ."/", TRUE);

Codigo 5.26: php.php, crea una carpeta con el identificador unico de sesion del usuario como nombrey la selecciona como destino de los ficheros subidos.

Cada usuario tendra su propia carpeta en el servidor, que existira mientras el usuario sigamanteniendo la sesion. La sesion puede acabarse manualmente o automaticamente si ha pasadomas de una hora desde la ultima actividad en la aplicacion. De la segunda se encarga el GarbageCollector, del que hablaremos en la ultima seccion. Si se cierra manualmente, el encargado deeliminar la carpeta, su contenido y el fichero de sesion es el codigo 5.27.

1 <?php2 session start();3 $dir = '../' . session id();4 foreach(glob($dir . '/*') as $file) {5 unlink($file);6 }7 rmdir($dir);89 unlink('../sess_' . session id());

10 ?>

Codigo 5.27: deleteUserFolder.php, elimina en el bucle todos los ficheros de la carpeta, en la lınea7 la propia carpeta y finalmente el fichero de sesion en la 9.

Garbage Collector

Para acabar, existe el caso particular en que el usuario cierra la aplicacion de forma brusca,cerrando el navegador directamente o apagando el ordenador. Este evento no se puede detectar, yaque una vez el navegador se cierra, no existe la parte del cliente que ejecute codigo javascript. Si estono se tuviese en cuenta, las carpetas de sesion de esos usuarios se almacenarıan indefinidamenteen el servidor. Para evitarlo, se ha programado un script en bash que se ejecuta periodicamentecon un cronjob (administrador de procesos de UNIX que permite programar tareas a ejecutarperiodicamente). El contenido del script puede verse en el codigo 5.28.

1 #!/bin/bash23 for session file in `find /home/aleyenda/WebShark/∗ −maxdepth 0 −iname sess ∗`4 do5 id=$(echo $session file | sed 's/sess //')"/"6 if [ −d $id ]7 then8 chown root $session file9 chmod 660 $session file

10 expire time=$(head −n 1 $session file)11 expire time=${expire time:16}12 expire time=${expire time %?}

79


1314 time=$(date + %s)15 echo $time >> /home/aleyenda/WebShark/log.txt16 diff=$(($time−$expire time))17 echo $diff >> /home/aleyenda/WebShark/log.txt1819 if [ "$diff" −gt "3600" ]20 then21 rm −rf $id22 rm −f $session file23 fi2425 else26 rm −f $session file27 fi2829 done

Codigo 5.28: GarbageCollector.sh, se encarga de eliminar las carpetas y los ficheros de sesion delespacio de usuario cuando la sesion ha expirado.

El proceso se ejecuta como superusuario ya que es preciso cambiar los permisos y el propietariodel fichero de sesion para leer los datos contenidos en el (lıneas 8 a 12). A continuacion se calculael tiempo que ha transcurrido desde la ultima actividad en la aplicacion, y si este es mayor de unahora (lınea 19), se eliminan todos los ficheros de usuario.

Es necesario anadir que cada vez que se ejecuta una accion en wShark (seleccionar un paquete,elegir alguna opcion del menu, etc), se ejecuta el codigo 5.29 a traves de AJAX para actualizar eltiempo de la ultima actividad.

1 <?php2 $path = session save path("../");3 session start();4 $ SESSION['last_activity'] = time();5 echo time();6 ?>

Codigo 5.29: session.php, actualiza el tiempo en el que realizo la ultima accion en la sesion.

80

Capıtulo 6

Conclusiones y trabajo futuro

La creacion de la aplicacion ha sido un trabajo de valor incalculable para afianzar las conoci-mientos de las asignaturas relacionadas con las redes telematicas y, en general, para comprendermejor las necesidades que comporta un proyecto de dicha magnitud. Indudablemente, los conoci-mientos necesarios de desarrollo web adquiridos son un recurso muy interesante y util de cara almercado laboral. Ademas, el hecho de haber desarrollado una aplicacion de claro valor docente y quesera utilizada de forma regular, constituye un valor anadido para nada menospreciable. Finalmente,el contacto con el mundo del software libre y las licencia de copyleft anaden otro punto a favor delproyecto.

En general, el desarrollo de wShark ha sido una experiencia muy positiva y, a mi parecer, sehan conseguido satisfacer de forma mas que correcta las metas iniciales buscadas. La aplicaciones totalmente funcional y ayuda enormemente a la comprension de las herramientas usadas y delos temas explicados en las asignaturas relacionadas por parte de los alumnos. Por ultimo, pero nopor ello menos importante, ha servido para afianzar la pasion del autor por el campo de las redestelematicas, ayudando a abrir al mismo tiempo un posible camino laboral con un gran numero deexcitantes posibilidades.

De cara a la expansion y mejora de la aplicacion en un futuro, serıa interesante explorar ciertasposibilidades como:

Nuevas funcionalidades para wShark, como nuevas estadısticas y graficas; o funciones intere-santes implementadas por Wireshark, como las reglas definibles por el usuario para diferenciarpor colores los paquetes en el sumario dependiendo de sus particularidades.

Mejorar la seguridad de la aplicacion. Este es un campo muy amplio, tremendamente mutabley que por tanto necesita constante actualizacion. Parte de los principales ataques que sepueden realizar sobre aplicaciones web de este estilo se encuentran contemplados pero sepodrıa realizar un estudio mas extenso y una mejora de estas caracterısticas.

Refactorizacion y mejora del codigo. El proyecto se ha extendido durante un largo periodode tiempo y los conocimientos iniciales de programacion en la mayor parte de los lenguajesaplicados distan mucho de los finales. Existen partes del codigo que podrıan mejorarse tantoen legibilidad como en eficiencia con un trabajo de ingenierıa del software en esta direccion.Asimismo, podrıan migrarse parte de las funciones codificadas en Javascript plano a jQuery,por simplicidad o consistencia a lo largo del codigo.

81

82 WSHARK CAPITULO 6. CONCLUSIONES Y TRABAJO FUTURO

SEO, posicionamiento en buscadores de la aplicacion. Existen diversos metodos para mejorarla visibilidad de las paginas web en los principales motores de busqueda. De cara a lograr unamayor repercusion en la red, este paso es un paso muy importante.

Migracion de ciertos elementos (como las graficas) a nuevos estandares. HTML5 es la nuevarevision del lenguaje de marcado HTML con caracterısticas muy potentes que permiten anadirdirectamente a la pagina elementos multimedia o graficas, entre otras cosas.

Todas estas opciones y muchas otras no mentadas llevarıan a mejorar cuantitativamente la pla-taforma en general y la aplicacion en particular, ofreciendo una mejor y mas productiva experienciaa los usuarios. Todas ellas, no obstante, suponen una carga de trabajo considerable, por lo que serıainteresante estudiar – desde el punto de vista ingenieril – la viabilidad de dichos proyectos.

Ademas, el mantenimiento de la version Stand-Alone de cara al futuro es un tema a considerar,teniendo que sufragar los gastos de hosting y dominio. Estos podrıan llegar a suponer una cargadependiendo del trafico que pudiese sufrir la web. Encontrar una solucion optima para todas laspartes implicadas es otra de las medidas a tener en cuenta.

82

Apendices

83

Apendices A

Estructura concisa de wShark

En este apendice se explicara como se encuentra estructurado wShark y la funcion de cada unode los ficheros de la aplicacion. La primera seccion se refiere a la estructura de la version incluida enla plataforma LabXar (figura A.1) y la segunda a la version Stand-Alone (figura A.2). Los nombresmarcados en negrita corresponden a directorios y aquellos en cursiva, a ficheros.

A.1. Version wShark de la plataforma LabXar

css: incluye todos los archivos relacionados con las hojas de estilos de las diferentes paginas ycomponentes de la aplicacion.

• skins: imagenes y hojas de estilo relacionadas con el plugin jquery dcmegamenu queimplementa el menu desplegable de la parte superior derecha de wShark.

• basic.css: hoja de estilo del plugin jquery simplemodal para las ventanas modales emer-gentes (donde van las graficas, el menu del filtro, la seleccion de red, etc).

• dcmegamenu.css: otra hoja de estilo para dcmegamenu.

• Webshark.css: la hoja de estilo que modela el aspecto principal de wShark.

images: todas las imagenes incluidas en la aplicacion, desde las flechas que indican que sepuede expandir un campo de un paquete, hasta los logos. Todos los archivos de la carpeta sonimagenes, por lo cual no precisan una explicacion mas detallada.

• ...

js: todos los ficheros javascript que manejan la interactividad de la aplicacion.

• adapters: ficheros de apoyo para el plugin jquery highcharts.

• modules: ficheros de apoyo para el plugin jquery highcharts.

• themes: ficheros de apoyo para el plugin jquery highcharts.

• Errors.js: gestiona los diferentes errores que se pueden producir en la ejecucion de wS-hark.

85

86 WSHARK APENDICES A. ESTRUCTURA CONCISA DE WSHARK

• Events.js: gestiona los eventos de javascript que ocurren en la pagina, desde un eventode clic o de teclado, hasta la peticion de una grafica dinamica. Es el modulo mas extensode wShark.

• highcharts.src.js: funciones principales del plugin highcharts.

• highcharts-more.js: funciones adicionales de highcharts

• io.js: presenta en pantalla de forma adecuada la informacion recibida en xml desde elservidor.

• jquery.dcmegamenu.1.3.2.js: funciones principales del plugin dcmegamenu.

• jquery.hoverIntent.minified.js: funciones principales del plugin hoverIntent, que anade lacaracterıstica de desplegado de dcmegamenu.

• jquery.simplemodal.js: funciones principales del plugin simplemodal.

• jquery-1.6.2.min.js: libererıa jquery para javascript.

• Language.js: gestiona los diferentes idiomas incluidos en wShark.

• ManageTables.js: se encarga de todo lo relacionado con las tres regiones de la interfaz dewShark, como borrar las listas de paquetes, reescribirlas con nuevos datos o anadir lasanimaciones de carga.

• Menu.js: escribe el HTML del menu de la esquina superior izquierda, con los diferenteseventos que lanza cada una de las opciones del mismo.

• SaveFiles.js: gestiona las opciones de guardado de las simulaciones, realizando las peti-ciones AJAX al servidor si es necesario.

• WebShark.js: javascript principal, que inicia la pagina, comprueba periodicamente si haycambios en el fichero de captura y simula la captura en vivo.

php: todos los ficheros php que se ejecutan en el servidor para actualizar datos de la pagina.

• changeFile.php: ejecuta TShark sobre el fichero de captura para crear las salidas xml quela aplicacion puede leer.

• conversationsInfo.php: ejecuta TShark solicitando estadısticas referentes a las conversa-ciones los protocolos seleccionados por el usuario para la comunicacion de la red de laque se esta capturando.

• fileModified.php: devuelve el timestamp de la ultima modificacion del fichero de capturapara comprobar si hay nuevas comunicaciones en la red o se ha cambiado de red decaptura.

• generalInfo.php: ejecuta TShark solicitando datos generales sobre el fichero de captura,como su tamano, duracion de la captura, tamano medio de los paquetes o su MD5.

• hierarchyInfo.php: ejecuta TShark solicitando informacion sobre la jerarquıa de encap-sulacion de los paquetes.

• log.txt : archivo .txt que recoge datos de salida de las ejecuciones de los ficheros .php y esutilizado para comprobar el correcto comportamiento de los mismos.

• removeSaveZip.php: elimina los .zip en los que se se han comprimido los ficheros decaptura de todas las redes para ser guardados por el usuario.

• saveAllFiles.php: envıa los ficheros de captura pcap de todas las redes al usuario compri-midos en un .zip.

86

WSHARK APENDICES A. ESTRUCTURA CONCISA DE WSHARK 87

• SaveAllFilesFilter.php: igual que el anterior, pero aplicando el filtro indicado en la interfazde wShark.

• SaveFileFilter.php: envıa el fichero de la red que se esta visualizando al usuario aplicandoel filtro escogido en la interfaz de wShark.

• statsDensity.php: ejecuta TShark solicitando estadısticas de la densidad de paquetes ybytes por cada intervalo de tiempo escogido. Se utiliza para generar las graficas.

WebShark.php: fichero HTML principal de la aplicacion que forma el esqueleto de la pagina.

A.2. Version Stand-Alone wShark

Debido a que las dos versiones comparten un numero considerable de ficheros con una finalidadsimilar (aunque no siempre con una estructura interna similar), en esta seccion se detallaran soloaquellos archivos que no aparecıan en la anterior version.

css

• fileuploader.css: hoja de estilo para el plugin jquery que permite subir los archivos esco-gidos al servidor.

• IntroWebShark.css: hoja de estilo para la pagina inicial de la version Stand-Alone dewShark.

images

• wSharkLogoWhite.png

• wSharkLogoBlack.png

js:

• fileuploader.js: funciones javascript que gestionan el evento de subida de archivos a travesde fileuploader.

• jquery.cookie.js: librerıa que facilita el uso de cookies con jquery.

php:

• alreadyInSession.php: comprueba si existe una sesion en activo para el usuario.

• defaultExample.php: crea la carpeta de sesion del usuario con el archivo pcap de ejemplo.

• deleteUserFolder.php: elimina la carpeta de la sesion del usuario, que contiene los ficherosde captura subidos y los ficheros de salida del TShark, para comenzar una sesion nuevay poder subir nuevos ficheros.

• php.php: gestiona la creacion de la carpeta de sesion del usuario y la subida de los ficherosseleccionados a dicha carpeta.

• session.php: actualiza el tiempo de ultima actividad de la sesion, para saber si el usuarioesta inactivo o si se ha cerrado el navegador sin cerrar la sesion.

87


Figura A.1: Estructura de archivos de la version de wShark incluida en LabXar.

88

WSHARK APENDICES A. ESTRUCTURA CONCISA DE WSHARK 89

default.cap: fichero de captura por defecto que se copia a la carpeta de sesion si el usuario haescogido ver el fichero de ejemplo en vez de subir sus propios ficheros.

GarbageCollector.sh: script bash que se ejecuta periodicamente con cron y comprueba si lasesion del usuario ha expirado. Si es ası, elimina la carpeta de la sesion.

IntroWebShark.php: pagina de inicio de la version Stand-Alone que permite subir los archivosque se desean visualizar en la nube al servidor.

A.3. Otros ficheros

Finalmente, en esta seccion comentaremos aquellos ficheros que no son codigo fuente del progra-ma, sino los ficheros de captura y los ficheros de salida que wShark parsea para conseguir los datosa mostrar.

capture*.cap: ficheros de captura de las diferentes subredes de la red virtual generada. En laposicion del asterisco se pondrıa el numero identificador de la subred.

psml.xml : xml con el resumen de los paquetes que se escriben en al region del sumario dewShark.

pdml.xml : xml de los detalles del paquete seleccionado en el sumario.

ascii.txt : texto plano con el hexadecimal y el ascii del paquete seleccionado en el sumario.

statsDensity.txt : texto plano con la cantidad de paquetes y bytes para cada intervalo de tiempoescogido.

89


Figura A.2: Estructura de archivos de la version Stand-Alone de wShark.

90

Apendices B

Comunicacion en wShark

B.1. Version wShark de la plataforma LabXar

B.1.1. Inicio

Cuando se genera la red virtual, los switches virtuales almacenan en el servidor, en el espacio deldisco asociado al usuario, los archivos de captura de cada una de las redes con formato pcap. Estosficheros se van actualizando conforme se intercambian paquetes a traves de las redes. Al pinchar enel enlace a wShark, se inicia la comunicacion entre el navegador del cliente o usuario y el servidor queha generado la red y la gestiona. El javascript ejecutado en el usuario para previo a las peticionesAJAX y la gestion de eventos no se incluye en el diagrama debido a que los tiempos son negligiblescomparados a los de acceso al servidor. El diagrama puede consultarse en la figura B.1.

1. Usuario −→ Servidor: Solicita la pagina WebShark.php

2. Servidor: Ejecuta el php incluido en WebShark.php, generando el html de la pagina principal.

3. Usuario ←− Servidor: Envıa el html que ha de representar el navegador, junto con lasimagenes necesarias, los archivos de estilo y los scripts.

4. Usuario −→ Servidor Envıa una peticion AJAX solicitando la generacion de los archivosde salida de TShark para la red actual.

5. Servidor: Ejecuta TShark sobre el fichero pcap y crea los ficheros psml, pdml y ascii con lainformacion de los paquetes de la comunicacion en la red.

6. Usuario ←− Servidor: Confirma la creacion de los ficheros y devuelve la salida de ascii (elhexadecimal y el ascii del paquete a mostrar) como texto plano.

7. Usuario −→ Servidor: Envıa un GET AJAX para que el servidor le envıe el XML psml.xml.

8. Usuario ←− Servidor: Responde con el contenido del fichero.

9. Usuario −→ Servidor: Envıa un GET AJAX para que el servidor le envıe el XML pdml.xml.


91

92 WSHARK APENDICES B. COMUNICACION EN WSHARK

11. Usuario −→ Servidor: Periodicamente pregunta al servidor cuando se ha modificado elfichero pcap de captura por ultima vez.

12. Usuario ←− Servidor: Responde con el timestamp de la ultima modificacion del archivo decaptura de la red.

Figura B.1: Diagrama secuencial de inicio para la version de wShark de LabXar.

B.1.2. Deteccion de nuevos paquetes en la red

Si el timestamp de la ultima modificacion del archivo de captura de red es diferente al quetenemos guardado en el usuario quiere decir que han ocurrido comunicaciones nuevas en la red.Ası pues, habra que procesar estos cambios y mostrar los nuevos paquetes enviados en wShark,simulando una comunicacion en tiempo real. Todo esto puede observarse en el diagrama de la figuraB.2.

92

WSHARK APENDICES B. COMUNICACION EN WSHARK 93

1. Usuario −→ Servidor: Pregunta al servidor cuando se ha modificado el fichero pcap decaptura por ultima vez.

2. Usuario ←− Servidor: Responde diciendo que el archivo de captura se ha modificado masrecientemente que la ultima vez que lo hemos procesado.

3. Usuario −→ Servidor Envıa una peticion AJAX solicitando la generacion de los archivosde salida de TShark para la red actual, pero solo para los paquetes nuevos.

4. Servidor: Ejecuta TShark sobre el fichero pcap y crea los ficheros psml, pdml y ascii con lainformacion de los paquetes nuevos de la comunicacion en la red.


6. Usuario −→ Servidor: Envıa un GET AJAX para que el servidor le envıe el nuevo XMLpsml.xml con solo los paquetes nuevos.


8. Usuario −→ Servidor: Envıa un GET AJAX para que el servidor le envıe el XML pdml.xmldel paquete seleccionado.


10. Usuario: Simula la recepcion en tiempo real de los nuevos paquetes mostrandolos en la interfazuno por uno.

11. Usuario −→ Servidor: Cuando termina de mostrar todos los paquetes nuevos, reinicia lasconsultas periodicas sobre si el fichero de captura ha sido modificado.


B.1.3. Eventos

En cualquier momento puede producirse un evento que javascript procesara. Estos eventos sonde diversa ındole, entre los que se encuentran, por ejemplo, clicar en un paquete para ver su infor-macion detallada, el cambio de la red de captura, la ejecucion de una estadıstica sobre los datoso la aplicacion de un filtro de captura. Algunos otros eventos, como el despliegue de algun cam-po particular del encapsulado del paquete mostrado, no precisan de consultas al servidor, por loque simplemente reportarıan la ejecucion de un script local. El siguiente diagrama (figura B.3) yexplicacion corresponde a la comunicacion de los eventos que provocan peticiones al servidor.

1. Usuario −→ Servidor: Solicita con AJAX la informacion particular sobre el evento regis-trado. Esta podrıa ser, por ejemplo, el archivo pdml de un paquete distinto seleccionado, lasalida de TShark para una estadıstica concreta o el psml filtrado segun la condicion escogida.

2. Servidor: Ejecuta el php especıfico para calcular la informacion pedida, generando los ficherosnecesarios.

93


Figura B.2: Diagrama secuencial de la llega de nuevos paquetes en la version de wShark de LabXar.

94


3. Usuario ←− Servidor: Devuelve la informacion, que sera procesada en local por javascript.

Al volver de la gestion del evento, se reanuda la consulta periodica sobre la modificacion delarchivo (obviamente, si el evento ha sido un cambio de red, la consulta se hara sobre este nuevofichero de captura). Si el evento procesado ha sido una grafica dinamica, se haran ademas peticionesperiodicas al servidor para recoger los nuevos datos y mostrarlos en la grafica.

Figura B.3: Diagrama secuencial para la gestion de eventos.

B.2. Version Stand-Alone wShark

B.2.1. Inicio

En este caso, la pagina de inicio es IntroWebShark.php, desde la que se pueden subir los fiche-ros a analizar. Cuando el usuario selecciona los ficheros de captura de su disco duro, se inicia lacomunicacion con la aplicacion (figura B.4).

1. Usuario −→ Servidor: Envıa a traves de AJAX los datos – nombre, parametros, rutas, etc– de los ficheros a subir al servidor.

2. Servidor: Comprueba que los ficheros sean validos, crea una carpeta en el servidor propiapara la sesion del usuario y, a traves de php, sube los archivos a dicha carpeta.



5. Usuario ←− Servidor: Envıa el html que ha de representar el navegador, junto con lasimagenes necesarias, los archivos de estilo y los scripts de wShark.

95


6. Usuario −→ Servidor Envıa una peticion AJAX solicitando la generacion de los archivosde salida de TShark para el fichero seleccionado.

7. Servidor: Ejecuta TShark sobre el fichero pcap y crea los ficheros psml, pdml y ascii con lainformacion de los paquetes de la comunicacion guardada en el archivo.






Figura B.4: Diagrama secuencial de inicio para la version Stand-Alone de wShark.

Notese que en este caso, el javascript del cliente consulta periodicamente por cambios (ya quelos ficheros son fijos).

96


B.2.2. Eventos

La comunicacion en los eventos se comporta de manera similar a la de la version de LabXar.

B.3. Version wShark de la plataforma LabXar

B.3.1. Inicio de la conexion

Cuando se genera la red virtual, los switches virtuales almacenan en el servidor, en el espacio deldisco asociado al usuario, los archivos de captura de cada una de las redes con formato pcap. Estosficheros se van actualizando conforme se intercambian paquetes a traves de las redes. Al pinchar enel enlace a wShark, la siguiente comunicacion ocurre entre el navegador del cliente o usuario (U)y el servidor que ha generado la red y la gestiona (S). El javascript ejecutado en el usuario paraprevio a las peticiones AJAX y la gestion de eventos no se incluye en el diagrama debido a que lostiempos son negligibles comparados a los de acceso al servidor.



3. Usuario ←− Servidor: Envıa el html que ha de representar el navegador, junto con lasimagenes necesarias, los archivos de estilo y los scripts.

4. Usuario −→ Servidor Envıa una peticion AJAX solicitando la generacion de los archivosde salida de TShark para la red actual.

5. Servidor: Ejecuta TShark sobre el fichero pcap y crea los ficheros psml, pdml y ascii con lainformacion de los paquetes de la comunicacion en la red.






11. Usuario −→ Servidor: Periodicamente pregunta al servidor cuando se ha modificado elfichero pcap de captura por ultima vez.


97


98

Apendices C

Codigo fuente de wShark

En este apendice se incluye parte del codigo fuente de la aplicacion con objeto de mostrar comoha sido codificada. Tener accesible el codigo en los apendices tambien permite referenciar fragmentosespecıficos para explicar en profundidad las decisiones de diseno tomadas. Solo se incluye el codigode algunos de los ficheros ya que la inclusion del codigo completo supondrıa ampliar demasiado laextension de la memoria.

Las diferentes secciones de este apendice no estan divididas por lenguajes de programacion, sinosegun la finalidad con la que estan escritos los fragmentos de codigo. Por ejemplo, la primera seccionincluye los distintos codigos – HTML, PHP, Javascript – que permiten iniciar wShark y mantenerloa la espera de nuevos paquetes. Debido a la longitud de los distintos codigos, se han movido los piesde figura a la parte superior de los bloques de codigo, para ası facilitar su entendimiento.

En el apendice A: Estructura concisa de wShark, puede consultarse la finalidad general de losficheros de codigo aquı mentados.

C.1. Version de wShark en LabXar

C.1.1. Inicio de la aplicacion

Codigo C.1: WebShark.php, HTML de la pagina principal de wShark

1 <?php2 $vista="webshark";3 session start();4 include("../../lt2vnuml_config/config.php");56 ?>78 <!DOCTYPE html>9 <head>

10 <title>WebShark</title>11 <meta http−equiv="content-type" content="text/html; charset=utf-8" />12 <META HTTP−EQUIV="PRAGMA" CONTENT="NO-CACHE">13 <META HTTP−EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">14 <meta http−equiv="expires" content="Fri, 5 Apr 1996 23:59:59 GMT">15 <link type="text/css" charset="utf-8" rel="Stylesheet" media="all" href="css/Webshark.css" />16 <link type="text/css" rel="stylesheet" href="css/dcmegamenu.css" />

99

100 WSHARK APENDICES C. CODIGO FUENTE DE WSHARK

17 <link type="text/css" rel="stylesheet" href="css/skins/white.css"/>18 <link type="text/css" rel="stylesheet" href="css/basic.css"/>1920 <?21 echo "<link href=\"".$url_app_root."/files/style.css\" rel=\"stylesheet\" type=\"text/css\" media=\"

screen\" />";22 ?>23 <script type="text/javascript" charset="utf-8" src="js/WebShark.js"></script>24 <script type="text/javascript" charset="utf-8" src="js/Errors.js"></script>25 <script type="text/javascript" charset="utf-8" src="js/Language.js"></script>26 <script type="text/javascript" charset="utf-8" src="js/io.js"></script>27 <script type="text/javascript" charset="utf-8" src="js/Events.js"></script>28 <script type="text/javascript" charset="utf-8" src="js/ManageTables.js"></script>29 <script type="text/javascript" charset="utf-8" src="js/SaveFiles.js"></script>30 <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>31 <script type="text/javascript" src="js/jquery.cookie.js"></script>32 <script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script> <!−− Menu −−>33 <script type='text/javascript' src='js/jquery.dcmegamenu.1.3.2.js'></script> <!−− Menu −−>34 <script type='text/javascript' src='js/Menu.js'></script> <!−− Menu −−>35 <script type='text/javascript' src='js/jquery.simplemodal.js'></script> <!−− Modal for filter

and other things −−>36 <script type="text/javascript" src="js/highcharts.js"></script>3738 <meta name="apple-mobile-web-app-capable" content="yes">3940 <script type="text/javascript">4142 if ($.cookie('lang') != null)43 language = $.cookie('lang');4445 </script>4647 </head>48 <body onload="detectBrowser(); if ('Navigator' == navigator.appName) document.forms[0].reset();

navigatePacketsKeyboard()" >49 <?50 $missatge['ca']['sessio_expirada']="Sessio expirada";51 $missatge['en']['sessio_expirada']="Expired session";52 $missatge['es']['sessio_expirada']="Sesion expirada";53 $missatge['ca']['fora_sessio']="Esteu fora de sessio. No tenieu sessio o potser el vostre temps de

sessio s'ha exhaurit.";54 $missatge['en']['fora_sessio']="You have no web session. Either you did not have one or your

session time has expired.";55 $missatge['es']['fora_sessio']="Esta fuera de sesion. O bien no tenıa sessio o su tiempo de session

se acabo.";56 $missatge['ca']['una_altra_sessio']="Per tornar a tenir sessio web fes click";57 $missatge['en']['una_altra_sessio']="To obtain a web session again, press";58 $missatge['es']['una_altra_sessio']="Para volver a tener sesion otra vez, clica";59 $missatge['ca']['aqui']="aquı";60 $missatge['en']['aqui']="here";61 $missatge['es']['aqui']="aquı";626364 $missatge['ca']['missatge_no_xarxes']="No hi ha cap xarxa";65 $missatge['en']['missatge_no_xarxes']="There is no network";66 $missatge['es']['missatge_no_xarxes']="No hay ninguna red";67 $missatge['ca']['no_xarxes']="No teniu cap xarxa disponible. Possiblement no teniu cap escenari

arrancat o be l'escenari no us permet explorar cap xarxa.";68 $missatge['en']['no_xarxes']="You have no networks to monitor. Either you did not started an

100

WSHARK APENDICES C. CODIGO FUENTE DE WSHARK 101

scenario or maybe the scenario running does not allow to monitor any of its networks";69 $missatge['es']['no_xarxes']="No tiene ninguna red disponible. Posiblemente no tenga ningun

escenario en marcha o bien el escenario no le permite explorar ninguna de sus redes";70 $missatge['ca']['tancar_missatge']="Per tancar aquest missatge, cliqueu ";71 $missatge['en']['tancar_missatge']="To close this message, please press ";72 $missatge['es']['tancar_missatge']="Para cerrar este mensaje, aprete ";7374 global $base language;75 if(!isset($ SESSION['llengua'])){76 $idioma=$base language;77 }78 else{79 $idioma=$ SESSION['llengua'];80 }8182 $out session=false;83 if( isset($ SESSION['expire_time']) ){84 if((strtotime($ SESSION['expire_time'])) < (strtotime(date()) )){85 $out session=true;86 }87 }88 else{89 $out session=true;90 }91 if($out session){92 ?>93 <script type="text/javascript">94 $.modal("<h2> <? echo($missatge[$idioma]['sessio_expirada']); ?> </h2> <p> <? echo($missatge[

$idioma]['fora_sessio']); ?> </p> <p> <? echo ($missatge[$idioma]['una_altra_sessio']); ?>

<a href=\"<? echo $url app root; ?>/\"> <? echo($missatge[$idioma]['aqui']); ?> </a> </p>",{95 overlayClose:true,96 closeClass:"tancaExpira",97 minHeight: 200,98 minWidth: 400,99 opacity:80,

100 overlayClose:false,101 focus: true,102 overlayCss: {backgroundColor:"#222222"}103 });104 </script>105 <?106 }107 ?>108 <div id='header' class='ui-widget-header' style='border:none; '>109 <img src='images/wSharkSecondaryLogo.jpg' align='left' style="margin-left: 5px" />110111 <script type="text/javascript">112113 <?php // php − detects how many networks (files) we have114 $nets=0;115 $path = $vnuml working dir.$ SESSION['usuari']."/capture";116 while (file exists($path . $nets . ".cap")) {117 $nets = $nets+1;118 }119 $path = $vnuml working dir.$ SESSION['usuari']."/";120 ?>121 nets = <?php echo $nets; ?> ;122 path = "<?php echo $path; ?>";123

101


124 if(nets==0){125 <?126 if(!$out session){127 ?>128 $.modal("<h2> <? echo($missatge[$idioma]['missatge_no_xarxes']); ?> </h2> <p> <? echo

$missatge[$idioma]['no_xarxes']; ?> </p> <p> <? echo($missatge[$idioma]['tancar_missatge']); ?> <a href=\"#\" class=\"tancaExpira\"> <? echo($missatge[$idioma]['aqui']); ?> </a>

</p>",{129 overlayClose:true,130 closeClass:"tancaExpira",131 minHeight: 200,132 minWidth: 400,133 opacity:80,134 overlayClose:false,135 overlayCss: {backgroundColor:"#222222"}136 });137 <?138 }139 ?>140 }141142 document.write("<div id='stopCaptureTitle'>");143 document.write("<span style='margin-left: 3px;'>" + manageLanguage("Status") + "</span>");144 document.write('<div><input style="float:left;" type="button" id="statusBar" class="Capturing"

value="' + manageLanguage("StatusBarPlay") + '"></input> ');145 document.write('</div></div><div id="infoNet" class="infoHeader"></div>');146 document.write('<div id="infoFilter" class="infoHeader"></div>');147 document.write('<div id="infoLang" class="infoHeader"></div>');148 infoStatus();149150 </script>151152153 <div class="white" style="float:right;">154 <ul id="mega-menu-2" class="mega-menu">155156 <script type="text/javascript">157 writeMenu();158 </script>159 </ul>160161 </div>162163164 </div>165 <!−− ”Rails” for summary −−>166167 <div id='wrapper' class='expanded' style='overflow:hidden'>168 <div class="fht_fixed_header">169 <table style="width: 100 %; height: 26px; background-color: #eee; ">170 <thead>171 <tr>172 <script type="text/javascript">173 document.write('<th class="first-cell" style="width:3.5 %"><div class="empty-cell">No.</div></

th>');174 document.write('<th style="width:8 %"><div class="empty-cell">' + manageLanguage("Time") + '</div

></th>');175 document.write('<th style="width:13 %"><div class="empty-cell">' + manageLanguage("Source") + '</

div></th>');

102


176 document.write('<th style="width:13 %"><div class="empty-cell">' + manageLanguage("Destination")+'</div></th>');

177 document.write('<th style="width:8 %"><div class="empty-cell">' + manageLanguage("Protocol") + '</div></th>');

178 document.write('<th style="width:6 %;"><div class="empty-cell">' + manageLanguage("Length") + '</div></th>');

179 document.write('<th class="last-cell" style="width:48.5 %"><div class="empty-cell">' +manageLanguage("Info") + '</div></th>');

180 </script>181182 </tr>183 </thead></table>184 </div>185 <div id="wholeSummary" class="fht_table_body" >186 <table id="summary" style="width: 100 %; margin-top: -30px; "> <!−− son los ”raıles” para que los datos

del paquete vayan en la posicion correcta −−>187 <thead>188 <tr>189 <script type="text/javascript">190 document.write('<th class="first-cell" style="width:3.6 %"><div class="empty-cell">No.</div></th>'

);191 document.write('<th style="width:8.1 %"><div class="empty-cell">Time</div></th>');192 document.write('<th style="width:13.1 %"><div class="empty-cell">Source</div></th>');193 document.write('<th style="width:13.1 %"><div class="empty-cell">Destination</div></th>');194 document.write('<th style="width:8.1 %"><div class="empty-cell">Protocol</div></th>');195 document.write('<th style="width:5.1 %;"><div class="empty-cell">Length</div></th>');196 document.write('<th class="last-cell" style="width:48.9 %"><div class="empty-cell">Info</div></th>

');197 </script>198 </tr>199 </thead>200 <tbody id="SummaryTable" tabindex="0">201202 <script type="text/javascript">203 modifyFile(CaptureNet);204 </script>205206 </tbody>207 </table>208 </div>209 <div id="detail-div" class="pane">210211 </div>212213 <div id="ascii-div" class="pane ui-widget-header"><div id="tab-0" style="top:0 !important">214215 </div></div>216217218 </body>219220 </html>

103


Codigo C.2: Events.js, funcion llamada desde la lınea 148 de WebShark.php para generar los datosde informacion de la cabecera de la aplicacion.

1 function infoStatus() {23 var spanNet = document.createElement("span");4 spanNet.setAttribute("class","infoHeader");5 spanNet.appendChild(document.createTextNode(manageLanguage("Filename")));6 var inputNet = document.createElement("input");7 inputNet.setAttribute("style","float:left");8 inputNet.setAttribute("type","button");9 inputNet.setAttribute("id","statusBar");

10 inputNet.setAttribute("class","infoNet");1112 if (CaptureNet.length > 12)13 var net = CaptureNet.substring(0,9) + "...";14 else var net = CaptureNet;1516 inputNet.setAttribute("value",net);17 inputNet.setAttribute("title",CaptureNet);1819 document.getElementById("infoNet").appendChild(spanNet);20 document.getElementById("infoNet").appendChild(inputNet);2122 var spanFilter = document.createElement("span");23 spanFilter.setAttribute("class","infoHeader");24 spanFilter.appendChild(document.createTextNode(manageLanguage("Filter")+":"));25 var inputFilter = document.createElement("input");26 inputFilter.setAttribute("style","float:left");27 inputFilter.setAttribute("type","button");28 inputFilter.setAttribute("id","statusBar");29 inputFilter.setAttribute("class","infoFilter");3031 if (filter.length > 12)32 var f = filter.substring(0,9) + "...";33 else var f = filter;3435 inputFilter.setAttribute("value",f);36 inputFilter.setAttribute("title",filter);3738 document.getElementById("infoFilter").appendChild(spanFilter);39 document.getElementById("infoFilter").appendChild(inputFilter);4041 var spanLang = document.createElement("span");42 spanLang.setAttribute("class","infoHeader");43 spanLang.appendChild(document.createTextNode(manageLanguage("MenuLanguage")+":"));44 var inputLang = document.createElement("input");45 inputLang.setAttribute("style","float:left");46 inputLang.setAttribute("type","button");47 inputLang.setAttribute("id","statusBar");48 inputLang.setAttribute("class","infoFilter");4950 if (language.length > 12)51 var lang = language.substring(0,9) + "...";52 else var lang = language;5354 inputLang.setAttribute("value",manageLanguage(language));55 inputLang.setAttribute("title",language);56

104


57 document.getElementById("infoLang").appendChild(spanLang);58 document.getElementById("infoLang").appendChild(inputLang);59 }

Codigo C.3: WebShark.js, funciones principales en javascript, que detectan cambios en los ficheros(a traves de PHP) y conectan con el server para modificar los ficheros de salida.

12 function modifyFile(net)3 { /* main js function. Detects if there is any change in .cap files that lead to

4 * update information. Loop here checking. */

56 if ((!updating) && (fileReady) && (!stopCapture))7 {8 updating = true;9 CaptureNet = net;

10 if (window.XMLHttpRequest) // ajax

11 { // code for IE7+, Firefox, Chrome, Opera, Safari


16 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");17 }18 xmlhttp.onreadystatechange = function ()19 { // Ajax. Change -> Update

20 if (xmlhttp.readyState == 4 && xmlhttp.status == 200)21 {22 updating = true;23 if (fileDate != xmlhttp.responseText)24 {25 if (lastPacket == 0)26 { // first time or net change. Update all summary together

27 fileDate = xmlhttp.responseText;28 newSummary(net);29 updating = false;30 }3132 else33 { // Simulate real time capture.

34 fileDate = xmlhttp.responseText;35 updateFile(net, CaptureFilter);36 setTimeout("simulateCaptureLive()", 500);37 return;38 }3940 }41 else updating = false;4243 //if (!(CaptureNet == "")) // if there is still files, loop.

44 //setTimeout("modifyFile(CaptureNet)", 2500); // recursive call

45 }4647 }484950 xmlhttp.open("GET", "php/fileModified.php?net=" + CaptureNet + "&path=" + path, true);

105


51 xmlhttp.send();52 }53 else setTimeout("modifyFile(CaptureNet)", 2500); // recursive call

54 }5556 function updateFile(net, filter)57 { /* Call php function that execute tshark to update psml.xml, pdml.xml and ascii.txt */

58 fileReady = false;59 if (!Capturing)60 {61 //CaptureFilter = filter; // update filter



68 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");69 }70 xmlhttp.onreadystatechange = function ()71 {72 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {73 var str = xmlhttp.responseText;7475 globalError = (str.substring(0, str.indexOf(" %")));76 ascii = str.substring(str.indexOf(" %") + 1);77 fileReady = true;78 newPackets = true;79 }80 }81 xmlhttp.open("GET", "php/changeFile.php?net=" + CaptureNet + "&path=" + path + "&lastPacket="

+ lastPacket +82 "&packet=" + packetPDML + "&filter=" + CaptureFilter, true);83 xmlhttp.send();84 }85 }

Codigo C.4: fileModified.php, detecta si ha habido cambios en los ficheros .pcap de captura de lasredes.

1 <?php23 include ("../../lt2vnuml_config/config.php");4 session start();56 $out session=false;7 if( isset($ SESSION['expire_time']) ){8 if((strtotime($ SESSION['expire_time'])) < (strtotime(date()) )){9 $out session=true;

10 }11 }12 else{13 $out session=true;14 }1516 if(!$out session){17 $fich = ( $vnuml working dir.$ SESSION['usuari']."/capture" . $ GET['net'] . ".cap");

106


18 $modified = filemtime($fich);19 echo $modified;20 }21 else{22 echo "no web session";23 }24 ?>

Codigo C.5: ManageTables.js, funciones principales en javascript, que detectan cambios en los fi-cheros (a traves de PHP) y conectan con el server para modificar los ficheros de salida.

1 function scrollDown()2 { /* scroll summary table till the end */

34 var objDiv = document.getElementById("wholeSummary");5 objDiv.scrollTop = (objDiv.scrollHeight);6 }78 function showLoadingSummary()9 { /* show loading image in the middle of the summary table */

1011 table = document.getElementById("wholeSummary"); // table's reference

12 var loading = document.createElement("img");13 loading.setAttribute("src", "images/loading.gif");14 loading.setAttribute("id", "summaryLoading");15 loading.setAttribute("style", "margin-left: 45 % ; margin-top: 5 %; ");16 table.appendChild(loading);1718 }1920 function showLoadingDetails()21 { // show loading image in the packets details table

22 tabla = document.getElementById("detail-div");23 var loading = document.createElement("img");24 loading.setAttribute("src", "images/loadingPDML.gif");25 loading.setAttribute("id", "detailsLoading");26 loading.setAttribute("style", "margin-left: 47 % ; margin-top: 3 % ; ");27 tabla.appendChild(loading);28 }2930 function deleteTable(ref)31 { // delete information in any table (xml tree structure)

3233 var Parent = document.getElementById(ref);34 while (Parent.hasChildNodes())35 {36 Parent.removeChild(Parent.firstChild);37 }3839 }4041 function rewriteTable()42 { // rewrite summary and details with the new information in psml and pdml

43 if (fileReady)44 {45 $("#summaryLoading").remove();46 $("#detailsLoading").remove();

107


47 if (!manageErrors(globalError))48 { // if true, error detected

49 var xmlDoc = loadXMLDoc(path + "psml.xml");50 writePSML("packet", xmlDoc);51 scrollDown();52 if (!manageErrors(globalError))53 { // if there are no packets, error

54 var xmlDoc = loadXMLDoc(path + "pdml.xml");55 writePDML("packet", xmlDoc, 0);56 writeAscii();57 }58 }59 }60 else setTimeout("rewriteTable()", 500);61 }6263 function newSummary(net)64 { // info psml.xml is written together

65 deleteTable("SummaryTable");66 deleteTable("detail-div");67 deleteTable("tab-0");68 updateFile(net, CaptureFilter);69 showLoadingSummary();70 showLoadingDetails();71 setTimeout("rewriteTable()", 1000);72 }

Codigo C.6: changeFile.php, si ha habido cambios, ejecuta TShark para actualizar el contenido delos ficheros psml, pdml y ascii

1 <?php2 error log("script was called, processing request changeFile...");3 include ("../../lt2vnuml_config/config.php");45 global $tshark;67 echo $tshark;89 session start();

1011 $out session=false;12 if(isset($ SESSION['expire_time']) ){13 if((strtotime($ SESSION['expire_time'])) < (strtotime(date()) )){14 $out session=true;15 }16 }17 else{18 $out session=true;19 }2021 if(!$out session){22 $file = $vnuml working dir.$ SESSION['usuari']."/capture" . $ GET['net'] . ".cap";2324 if (file exists($file)) {2526 if ( $ GET['filter'] != "" ) {27 $filter = "&& " . $ GET['filter'] ; // add the condition of the filter

108


28 }29 else $filter = ""; // if there isn't filter condition, we can't put the &&30 shell exec($tshark." -r " . $file . " -T psml -R 'frame.number > " . $ GET['lastPacket'] . " "

. $filter . "' > ".$vnuml working dir.$ SESSION['usuari']."/psml.xml";31 shell exec($tshark." -r " . $file . " -T pdml -R 'frame.number == " . $ GET['packet'] ."' > ".

$vnuml working dir.$ SESSION['usuari']."/pdml.xml";32 shell exec($tshark." -r " . $file . " -x -R 'frame.number == " . $ GET['packet'] ."' > ".

$vnuml working dir.$ SESSION['usuari']."/ascii.txt";3334 $ascii = "";35 $ascii = file get contents($vnuml working dir.$ SESSION['usuari']."/ascii.txt"); //

hexadecimal and ascii packet information36 $ascii = substr($ascii, strpos($ascii, "\n")); // delete first line (packet text information)37 $ascii = substr($ascii, strpos($ascii, "\n")); // delete second line (line break)38 $ascii = ltrim($ascii); // delete blank spaces3940 $varReturn = $log . " %" . $ascii;41 echo $varReturn;42 }43 }44 else echo "no web session";4546 ?>

Codigo C.7: psml.xml, fragmento del fichero de salida en formato XML con la informacion delsumario de wShark.

1 <?xml version="1.0"?>2 <psml version="0" creator="wireshark/1.6.7">3 <structure>4 <section>No.</section>5 <section>Time</section>6 <section>Source</section>7 <section>Destination</section>8 <section>Protocol</section>9 <section>Length</section>

10 <section>Info</section>11 </structure>1213 <packet>14 <section>1</section>15 <section>0.000000</section>16 <section>::</section>17 <section>ff02::16</section>18 <section>ICMPv6</section>19 <section>130</section>20 <section>Multicast Listener Report Message v2</section>21 </packet>2223 <packet>24 <section>2</section>25 <section>0.279999</section>26 <section>::</section>27 <section>ff02::1:ff00:101</section>28 <section>ICMPv6</section>29 <section>78</section>30 <section>Neighbor Solicitation for fe80::fcfd:ff:fe00:101</section>31 </packet>

109


Codigo C.8: pdml.xml, fichero de salida de TShark con la informacion detallada de un unico paquete.

1 <?xml version="1.0"?>2 <?xml−stylesheet type="text/xsl" href="pdml2html.xsl"?>3 <!−− You can find pdml2html.xsl in /usr/share/wireshark or at http://anonsvn.wireshark.org/trunk/wireshark/

pdml2html.xsl. −−>4 <pdml version="0" creator="wireshark/1.6.7" time="Wed Nov 21 13:02:33 2012" capture file="../5

heuslvr1sm8sj0jmn290p2qe5/default.cap">5 <packet>6 <proto name="geninfo" pos="0" showname="General information" size="130">7 <field name="num" pos="0" show="1" showname="Number" value="1" size="130"/>8 <field name="len" pos="0" show="130" showname="Frame Length" value="82" size="130"/>9 <field name="caplen" pos="0" show="130" showname="Captured Length" value="82" size="130"/>

10 <field name="timestamp" pos="0" show="May 13, 2010 16:40:11.593103000 CEST" showname="Captured

Time" value="1273761611.593103000" size="130"/>11 </proto>12 <proto name="frame" showname="Frame 1: 130 bytes on wire (1040 bits), 130 bytes captured (1040

bits)" size="130" pos="0">13 <field name="frame.time" showname="Arrival Time: May 13, 2010 16:40:11.593103000 CEST" size="0"

pos="0" show="May 13, 2010 16:40:11.593103000"/>14 <field name="frame.time_epoch" showname="Epoch Time: 1273761611.593103000 seconds" size="0" pos=

"0" show="1273761611.593103000"/>15 <field name="frame.time_delta" showname="Time delta from previous captured frame: 0.000000000

seconds" size="0" pos="0" show="0.000000000"/>16 <field name="frame.time_delta_displayed" showname="Time delta from previous displayed frame:

0.000000000 seconds" size="0" pos="0" show="0.000000000"/>17 <field name="frame.time_relative" showname="Time since reference or first frame: 0.000000000

seconds" size="0" pos="0" show="0.000000000"/>18 <field name="frame.number" showname="Frame Number: 1" size="0" pos="0" show="1"/>19 <field name="frame.len" showname="Frame Length: 130 bytes (1040 bits)" size="0" pos="0" show="

130"/>20 <field name="frame.cap_len" showname="Capture Length: 130 bytes (1040 bits)" size="0" pos="0"

show="130"/>21 <field name="frame.marked" showname="Frame is marked: False" size="0" pos="0" show="0"/>22 <field name="frame.ignored" showname="Frame is ignored: False" size="0" pos="0" show="0"/>23 <field name="frame.protocols" showname="Protocols in frame: eth:ipv6:icmpv6" size="0" pos="0"

show="eth:ipv6:icmpv6"/>24 </proto>25 <proto name="eth" showname="Ethernet II, Src: fe:fd:00:00:01:01 (fe:fd:00:00:01:01), Dst:

IPv6mcast_00:00:00:16 (33:33:00:00:00:16)" size="14" pos="0">26 <field name="eth.dst" showname="Destination: IPv6mcast_00:00:00:16 (33:33:00:00:00:16)" size="6"

pos="0" show="33:33:00:00:00:16" value="333300000016">27 <field name="eth.addr" showname="Address: IPv6mcast_00:00:00:16 (33:33:00:00:00:16)" size="6"

pos="0" show="33:33:00:00:00:16" value="333300000016"/>28 <field name="eth.ig" showname=".... ...1 .... .... .... .... = IG bit: Group address (

multicast/broadcast)" size="3" pos="0" show="1" value="1" unmaskedvalue="333300"/>29 <field name="eth.lg" showname=".... ..1. .... .... .... .... = LG bit: Locally administered

address (this is NOT the factory default)" size="3" pos="0" show="1" value="1"

unmaskedvalue="333300"/>30 </field>31 <field name="eth.src" showname="Source: fe:fd:00:00:01:01 (fe:fd:00:00:01:01)" size="6" pos="6"

show="fe:fd:00:00:01:01" value="fefd00000101">32 <field name="eth.addr" showname="Address: fe:fd:00:00:01:01 (fe:fd:00:00:01:01)" size="6" pos=

"6" show="fe:fd:00:00:01:01" value="fefd00000101"/>33 <field name="eth.ig" showname=".... ...0 .... .... .... .... = IG bit: Individual address (

unicast)" size="3" pos="6" show="0" value="0" unmaskedvalue="fefd00"/>34 <field name="eth.lg" showname=".... ..1. .... .... .... .... = LG bit: Locally administered

address (this is NOT the factory default)" size="3" pos="6" show="1" value="1"

unmaskedvalue="fefd00"/>

110


35 </field>36 <field name="eth.type" showname="Type: IPv6 (0x86dd)" size="2" pos="12" show="0x86dd" value="86

dd"/>37 </proto>38 <proto name="ipv6" showname="Internet Protocol Version 6, Src: :: (::), Dst: ff02::16 (ff02::16)

" size="48" pos="14">39 <field name="ipv6.version" showname="0110 .... = Version: 6" size="1" pos="14" show="6" value="6

" unmaskedvalue="60">40 <field name="ip.version" showname="0110 .... = This field makes the filter "ip.version

== 6" possible: 6" size="1" pos="14" show="6" value="6" unmaskedvalue="60"/>41 </field>42 <field name="ipv6.class" showname=".... 0000 0000 .... .... .... .... .... = Traffic class: 0

x00000000" size="4" pos="14" show="0x00000000" value="0" unmaskedvalue="60000000">43 <field name="ipv6.traffic_class.dscp" showname=".... 0000 00.. .... .... .... .... .... =

Differentiated Services Field: Default (0x00000000)" size="4" pos="14" show="0x00000000"

value="0" unmaskedvalue="60000000"/>44 <field name="ipv6.traffic_class.ect" showname=".... .... ..0. .... .... .... .... .... = ECN-

Capable Transport (ECT): Not set" size="4" pos="14" show="0" value="0" unmaskedvalue="

60000000"/>45 <field name="ipv6.traffic_class.ce" showname=".... .... ...0 .... .... .... .... .... = ECN-

CE: Not set" size="4" pos="14" show="0" value="0" unmaskedvalue="60000000"/>46 </field>47 <field name="ipv6.flow" showname=".... .... .... 0000 0000 0000 0000 0000 = Flowlabel: 0

x00000000" size="4" pos="14" show="0x00000000" value="0" unmaskedvalue="60000000"/>48 <field name="ipv6.plen" showname="Payload length: 76" size="2" pos="18" show="76" value="004c"/

>49 <field name="ipv6.nxt" showname="Next header: IPv6 hop-by-hop option (0x00)" size="1" pos="20"

show="0x00" value="00"/>50 <field name="ipv6.hlim" showname="Hop limit: 1" size="1" pos="21" show="1" value="01"/>51 <field name="ipv6.src" showname="Source: :: (::)" size="16" pos="22" show="::" value="

00000000000000000000000000000000"/>52 <field name="ipv6.addr" showname="Address: :: (::)" hide="yes" size="16" pos="22" show="::" value

="00000000000000000000000000000000"/>53 <field name="ipv6.src_host" showname="Source Host: ::" hide="yes" size="16" pos="22" show="::"

value="00000000000000000000000000000000"/>54 <field name="ipv6.host" showname="Host: ::" hide="yes" size="16" pos="22" show="::" value="

00000000000000000000000000000000"/>55 <field name="ipv6.dst" showname="Destination: ff02::16 (ff02::16)" size="16" pos="38" show="

ff02::16" value="ff020000000000000000000000000016"/>56 <field name="ipv6.addr" showname="Address: ff02::16 (ff02::16)" hide="yes" size="16" pos="38"

show="ff02::16" value="ff020000000000000000000000000016"/>57 <field name="ipv6.dst_host" showname="Destination Host: ff02::16" hide="yes" size="16" pos="38"

show="ff02::16" value="ff020000000000000000000000000016"/>58 <field name="ipv6.host" showname="Host: ff02::16" hide="yes" size="16" pos="38" show="ff02::16"

value="ff020000000000000000000000000016"/>59 <field name="ipv6.hop_opt" showname="Hop-by-Hop Option" size="8" pos="54" show="" value="">60 <field name="" show="Next header: ICMPv6 (0x3a)" size="1" pos="54" value="3a"/>61 <field name="" show="Length: 0 (8 bytes)" size="1" pos="55" value="00"/>62 <field name="" show="Router alert: MLD (4 bytes)" size="4" pos="56" value="05020000"/>63 <field name="ipv6.opt.padn" showname="PadN: 2 bytes" size="2" pos="60" show="2" value="0100"/>64 </field>65 </proto>66 <proto name="icmpv6" showname="Internet Control Message Protocol v6" size="68" pos="62">67 <field name="icmpv6.type" showname="Type: Multicast Listener Report Message v2 (143)" size="1"

pos="62" show="143" value="8f"/>68 <field name="icmpv6.code" showname="Code: 0" size="1" pos="63" show="0" value="00"/>69 <field name="icmpv6.checksum" showname="Checksum: 0x6955 [correct]" size="2" pos="64" show="0

x6955" value="6955"/>70 <field name="icmpv6.reserved" showname="Reserved: 0000" size="2" pos="66" show="00:00" value="

111


0000"/>71 <field name="icmpv6.mldr.nb_mcast_records" showname="Number of Multicast Address Records: 3"

size="2" pos="68" show="3" value="0003"/>72 <field name="icmpv6.mldr.mar" showname="Multicast Address Record Changed to exclude: ff02::1:

ff00:0" size="20" pos="70" show="" value="">73 <field name="icmpv6.mldr.mar.record_type" showname="Record Type: Changed to exclude (4)" size=

"1" pos="70" show="4" value="04"/>74 <field name="icmpv6.mldr.mar.aux_data_len" showname="Aux Data Len: 0" size="1" pos="71" show="

0" value="00"/>75 <field name="icmpv6.mldr.mar.nb_sources" showname="Number of Sources: 0" size="2" pos="72"

show="0" value="0000"/>76 <field name="icmpv6.mldr.mar.multicast_address" showname="Multicast Address: ff02::1:ff00:0 (

ff02::1:ff00:0)" size="16" pos="74" show="ff02::1:ff00:0" value="

ff0200000000000000000001ff000000"/>77 </field>78 <field name="icmpv6.mldr.mar" showname="Multicast Address Record Changed to exclude: ff02::2"

size="20" pos="90" show="" value="">79 <field name="icmpv6.mldr.mar.record_type" showname="Record Type: Changed to exclude (4)" size=

"1" pos="90" show="4" value="04"/>80 <field name="icmpv6.mldr.mar.aux_data_len" showname="Aux Data Len: 0" size="1" pos="91" show="

0" value="00"/>81 <field name="icmpv6.mldr.mar.nb_sources" showname="Number of Sources: 0" size="2" pos="92"

show="0" value="0000"/>82 <field name="icmpv6.mldr.mar.multicast_address" showname="Multicast Address: ff02::2 (ff02

::2)" size="16" pos="94" show="ff02::2" value="ff020000000000000000000000000002"/>83 </field>84 <field name="icmpv6.mldr.mar" showname="Multicast Address Record Changed to exclude: ff02::1:

ff00:101" size="20" pos="110" show="" value="">85 <field name="icmpv6.mldr.mar.record_type" showname="Record Type: Changed to exclude (4)" size=

"1" pos="110" show="4" value="04"/>86 <field name="icmpv6.mldr.mar.aux_data_len" showname="Aux Data Len: 0" size="1" pos="111" show=

"0" value="00"/>87 <field name="icmpv6.mldr.mar.nb_sources" showname="Number of Sources: 0" size="2" pos="112"

show="0" value="0000"/>88 <field name="icmpv6.mldr.mar.multicast_address" showname="Multicast Address: ff02::1:ff00:101

(ff02::1:ff00:101)" size="16" pos="114" show="ff02::1:ff00:101" value="

ff0200000000000000000001ff000101"/>89 </field>90 </proto>91 </packet>929394 </pdml>

Codigo C.9: ascii.txt, fichero de salida en texto plano con la informacion en hexadecimal y en asciique devuelve TShark sobre el paquete seleccionado.

1 1 0.000000 :: −> ff02::16 ICMPv6 130 Multicast Listener Report Message v223 0000 33 33 00 00 00 16 fe fd 00 00 01 01 86 dd 60 00 33............`.4 0010 00 00 00 4c 00 01 00 00 00 00 00 00 00 00 00 00 ...L............5 0020 00 00 00 00 00 00 ff 02 00 00 00 00 00 00 00 00 ................6 0030 00 00 00 00 00 16 3a 00 05 02 00 00 01 00 8f 00 ......:.........7 0040 69 55 00 00 00 03 04 00 00 00 ff 02 00 00 00 00 iU..............8 0050 00 00 00 00 00 01 ff 00 00 00 04 00 00 00 ff 02 ................9 0060 00 00 00 00 00 00 00 00 00 00 00 00 00 02 04 00 ................

10 0070 00 00 ff 02 00 00 00 00 00 00 00 00 00 01 ff 00 ................11 0080 01 01 ..

112


Codigo C.10: io.js, se encarga de escribir, en formato HTML con los atributos necesarios, la infor-macion de los ficheros de salida de TShark.

1 function loadXMLDoc(dname) {2 // ajax. Load XML structure in xhttp.responseXML

34 if (window.XMLHttpRequest)5 {6 xhttp = new XMLHttpRequest();7 }8 else9 {

10 xhttp = new ActiveXObject("Microsoft.XMLHTTP");11 }12 xhttp.open("GET", dname+"?nocache="+ Math.random(), false); // random() needed to avoid cache in

Firefox

13 xhttp.send();14 return xhttp.responseXML;1516 }1718 function writeAscii()19 { // write, according to the right structure, ascci and hexadecimal info in the third table

20 index = 0;21 var lastLine = false;22 var aux = ascii;23 var table = document.getElementById("tab-0");24 var pre = document.createElement("pre");2526 while (aux != "")27 {28 var text = aux.substr(0, aux.indexOf(" ") + 2);29 aux = aux.substr(aux.indexOf(" ") + 2);3031 var preText = document.createTextNode(text);32 pre.appendChild(preText);3334 for (var i = 0; i < 16; i++)35 { // 16 hex values per file

36 text = aux.substr(0, aux.indexOf(" "));37 aux = aux.substr(aux.indexOf(" ") + 1);38 if (!(text == ""))39 {40 var spanText = document.createTextNode(text);41 span = document.createElement("span");42 span.setAttribute("class", "h");43 span.setAttribute("id", "h" + (i + index)); // used to select this packets when needed

44 span.appendChild(spanText);45 pre.appendChild(span);46 text = " ";47 spanText = document.createTextNode(text);48 pre.appendChild(spanText);49 }50 else51 {52 lastLine = true;53 break;54 }55 }

113


5657 if (!lastLine)58 {59 text = aux.substr(0, 2); // blank spaces

60 aux = aux.substr(2);61 var spanText = document.createTextNode(text);62 pre.appendChild(spanText);63 }64 else65 {66 while ((text == "") || (text == " "))67 {68 text = " ";69 var spanText = document.createTextNode(text);70 pre.appendChild(spanText);71 text = aux.substr(1, 1);72 aux = aux.substr(1);73 }74 text = " ";75 var spanText = document.createTextNode(text);76 pre.appendChild(spanText);77 }7879 for (var j = 0; j < 16; j++)80 { // after 16 hex and 2 blank spaces, 16 ascii simbols

81 if (aux == "") break;8283 text = aux.substr(0, 1);84 aux = aux.substr(1);85 var spanText = document.createTextNode(text);86 span = document.createElement("span");87 span.setAttribute("class", "d");88 span.setAttribute("id", "d" + (j + index)); // used to select this packets when needed

89 span.appendChild(spanText);90 pre.appendChild(span);91 }9293 index = index + 16;94 }9596 table.appendChild(pre);97 }9899 function writePSML(branch name, xmlDOC)

100 // writes in html summary information of packets included in psml.xml

101 { // branch_name -> branch where looking for values <packet> <section> 1 </section> </packet>

102 x = xmlDOC.getElementsByTagName(branch name); // x tree from <packet>

103 tabla = document.getElementById("SummaryTable"); // table reference

104 // lastPacket = x.length; // Number of packets in file

105 var numPackets = x.length;106 if (numPackets != 0) lastPacket = x[numPackets − 1].childNodes[1].childNodes[0].nodeValue; // when file

non continuous (filters)

107 else globalError = "NoPackets";108109 if (document.getElementById('Red') == "")110 {111 var error = document.createElement("img");112 error.setAttribute('src', 'images/error.png');113 tabla.appendChild(error);

114


114 }115116 for (i = 0; i < x.length; i++)117 { // all <packet> from file

118 y = x[i].childNodes; // y tree from section

119 var row = document.createElement("tr");120 row.setAttribute("class", "");121 for (j = 1; j < y.length; j = j + 2)122 { // j + 2 because text type is in the odd positions

123 var cell = document.createElement("td");124125 if (y[j].childNodes.length != 0)126127 var cellText = document.createTextNode(y[j].childNodes[0].nodeValue); // Each section's value

128 cell.appendChild(cellText);129130 row.appendChild(cell);131 }132 row.setAttribute('onmousedown', 'packetDetails(this)');133 if (i == 0) {134 row.setAttribute('class', 'picked'); // pdml details from first packet by default

135 row.setAttribute('id','picked'); // needed to navigate packets

136 }137 tabla.appendChild(row);138 }139 }140141 function writePDML(branch name, xmlDOC, packet)142 { /* writes in html info of the packet included in pdml.xml */

143 var x = xmlDOC.getElementsByTagName(branch name);144 var tabla = document.getElementById("detail-div"); // details table's reference

145 try146 { // empty pdml.xml or no file -> error

147 var y = x[packet].childNodes;148149 for (protos = 3; protos < y.length; protos = protos + 2)150 {151 var divProtos = document.createElement("div");152 divProtos.setAttribute('id', y[protos].getAttribute("name"));153 divProtos.setAttribute('size', y[protos].getAttribute("size"));154 divProtos.setAttribute('pos', y[protos].getAttribute("pos"));155 divProtos.setAttribute('class', 'protocol');156 //divProtos.setAttribute('onmouseup', 'selectAscii(this)');157 var spanProtos = document.createElement("span");158 spanProtos.setAttribute('onmousedown', 'expandClass(this.parentNode)');159 spanProtos.setAttribute('class', 'protoLabel');160 spanProtos.setAttribute('style', 'cursor:pointer');161 var spanProtosText = document.createTextNode(y[protos].getAttribute("showname"));162163 spanProtos.appendChild(spanProtosText);164 divProtos.appendChild(spanProtos);165166167 var z = y[protos].childNodes;168169 for (fields = 1; fields < z.length; fields = fields + 2)170 {171 if (z[fields].childNodes.length != 0)172 {

115


173 z2 = z[fields].childNodes.length;174175 if (z[fields].getAttribute("name") == "")176 {177 z[fields].setAttribute("name", "changed" + fields);178 var divFields = document.createElement("div");179 divFields.setAttribute('id', z[fields].getAttribute("name"));180 divFields.setAttribute('size', z[fields].getAttribute("size"));181 divFields.setAttribute('pos', z[fields].getAttribute("pos"));182 divFields.setAttribute('class', 'parent field');183 //divFields.setAttribute('onmouseup', 'selectAscii(this)');184 var imgFields = document.createElement("img");185 imgFields.setAttribute('src', 'images/arrow-rigth12px.png');186 imgFields.setAttribute('align', 'left');187 imgFields.setAttribute('class', '');188189 var spanFields = document.createElement("span");190 spanFields.setAttribute('onmousedown', 'expandClass(this.parentNode)');191 spanFields.setAttribute('class', 'fieldLabel');192 spanFields.setAttribute('style', 'cursor:pointer');193 var spanFieldsText = document.createTextNode(z[fields].getAttribute("show"));194195 divFields.appendChild(imgFields); // here, 'cause could be or not be

196 }197 else198 {199 var divFields = document.createElement("div");200 divFields.setAttribute('id', z[fields].getAttribute("name"));201 divFields.setAttribute('size', z[fields].getAttribute("size"));202 divFields.setAttribute('pos', z[fields].getAttribute("pos"));203 divFields.setAttribute('class', 'parent field');204 //divFields.setAttribute('onmouseup', 'selectAscii(this)');205 var imgFields = document.createElement("img");206 imgFields.setAttribute('src', 'images/arrow-rigth12px.png');207 imgFields.setAttribute('align', 'left');208 imgFields.setAttribute('class', '');209210 var spanFields = document.createElement("span");211 spanFields.setAttribute('onmousedown', 'expandClass(this.parentNode)');212 spanFields.setAttribute('class', 'fieldLabel');213 spanFields.setAttribute('style', 'cursor:pointer');214 var spanFieldsText = document.createTextNode(z[fields].getAttribute("showname"));215216 divFields.appendChild(imgFields); // here, 'cause could be or not be

217 }218219 spanFields.appendChild(spanFieldsText);220 divFields.appendChild(spanFields);221222 for (subfields = 1; subfields < z2; subfields = subfields + 2)223 {224 var divSubFields = document.createElement("div");225 if (z[fields].childNodes[subfields].getAttribute("name") == "") divSubFields.setAttribute('

id', "changed" + fields + "_" + subfields);226 else227 divSubFields.setAttribute('id', z[fields].childNodes[subfields].getAttribute("name"));228229 divSubFields.setAttribute('size', z[fields].childNodes[subfields].getAttribute("size"));230 divSubFields.setAttribute('pos', z[fields].childNodes[subfields].getAttribute("pos"));

116


231 divSubFields.setAttribute('class', 'field');232 //divSubFields.setAttribute('onmouseup', 'selectAscii(this)');233 if (z[fields].childNodes[subfields].getAttribute("name") == "")234 {235 var spanSubFields = document.createElement("span");236 spanSubFields.setAttribute('onmousedown', 'expandClass(this.parentNode)');237 spanSubFields.setAttribute('class', 'fieldLabel');238 var spanSubFieldsText = document.createTextNode(z[fields].childNodes[subfields].

getAttribute("show"));239 }240 else241 {242 var spanSubFields = document.createElement("span");243 spanSubFields.setAttribute('onmousedown', 'expandClass(this.parentNode)');244 spanSubFields.setAttribute('class', 'fieldLabel');245 var spanSubFieldsText = document.createTextNode(z[fields].childNodes[subfields].

getAttribute("showname"));246 }247 spanSubFields.appendChild(spanSubFieldsText);248 divSubFields.appendChild(spanSubFields);249 divFields.appendChild(divSubFields);250251 }252253 }254 else255 {256 if (z[fields].getAttribute("name") != 'data')257 {258259 var divFields = document.createElement("div");260 divFields.setAttribute('id', z[fields].getAttribute("name"));261 divFields.setAttribute('size', z[fields].getAttribute("size"));262 divFields.setAttribute('pos', z[fields].getAttribute("pos"));263 divFields.setAttribute('class', 'field');264 //divFields.setAttribute('onmouseup', 'selectAscii(this)');265 if (z[fields].getAttribute("name") == "")266 {267 var spanFields = document.createElement("span");268 spanFields.setAttribute('onmousedown', 'expandClass(this.parentNode)');269 spanFields.setAttribute('class', 'fieldLabel');270 var spanFieldsText = document.createTextNode(z[fields].getAttribute("show"));271 }272 else273 {274 var spanFields = document.createElement("span");275 spanFields.setAttribute('onmousedown', 'expandClass(this.parentNode)');276 spanFields.setAttribute('class', 'fieldLabel');277 var spanFieldsText = document.createTextNode(z[fields].getAttribute("showname"));278 }279 spanFields.appendChild(spanFieldsText);280 divFields.appendChild(spanFields);281 }282 }283284 divProtos.appendChild(divFields);285 }286 tabla.appendChild(divProtos);287 }

117


C.1.2. Simulacion de captura en tiempo real

Codigo C.11: WebShark.js, funciones principales en javascript, que detectan cambios en los ficheros(a traves de PHP) y conectan con el server para modificar los ficheros de salida.

1 function simulateCaptureLive()2 { /* Show packets one by one in the summary simulating real time capture */

3 if (fileReady)4 {5 if (!Capturing)6 {7 Capturing = true;8 xmlDocLive = loadXMLDoc("psml.xml");9 }

10 var x = xmlDocLive.getElementsByTagName("packet"); // x is the tree from <packet>

11 if (currentPacket < x.length)12 {13 var tabla = document.getElementById("SummaryTable"); // table's beggining reference

14 y = x[currentPacket].childNodes; // y tree from section

15 var row = document.createElement("tr");16 for (j = 1; j < y.length; j = j + 2)17 { // j + 2 because text type is in the odd positions

18 var cell = document.createElement("td");1920 if (y[j].childNodes.length != 0)2122 var cellText = document.createTextNode(y[j].childNodes[0].nodeValue); // each section's value

23 cell.appendChild(cellText);24 row.appendChild(cell);25 }26 row.setAttribute('class', '');27 row.setAttribute('onmousedown', 'packetDetails(this)');28 tabla.appendChild(row);29 currentPacket = currentPacket + 1;30 setTimeout("simulateCaptureLive()", 500);31 scrollDown();32 }33 else34 {35 updating = false;36 Capturing = false;37 if (currentPacket != 0) lastPacket = x[currentPacket − 1].childNodes[1].childNodes[0].nodeValue; //

last packet value

38 currentPacket = 0;39 setTimeout("modifyFile(CaptureNet)", 2500);40 }41 }42 else43 {44 setTimeout("simulateCaptureLive()", 500);45 }46 }

118


C.1.3. Guardar ficheros

Codigo C.12: SaveFiles.js, gestiona las diferentes peticiones AJAX para guardar los ficheros de cap-tura.

1 function saveFile() {23 var url = window.location.href;4 url = url.substr(0,url.lastIndexOf("/")+1); // delete the reference to current page

5 url = url.concat("capture" + CaptureNet + ".cap");6 window.location.replace(url);7 }89 function saveAllFiles() {

1011 var url = window.location.href;12 url = url.substr(0,url.lastIndexOf("/")+1); // delete the reference to current page



20 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");21 }22 xmlhttp.onreadystatechange = function ()23 {24 if (xmlhttp.readyState == 4 && xmlhttp.status == 200)25 {26 var zipfile = xmlhttp.responseText;27 url = url.concat(zipfile);28 window.location.replace(url);29 //removeSaveZip(zipfile);

30 }31 }3233 xmlhttp.open("GET", "php/saveAllFiles.php?nets=" + nets, true);34 xmlhttp.send();35 }3637 function saveFileFilter() {38 var url = window.location.href;39 url = url.substr(0,url.lastIndexOf("/")+1); // delete the reference to current page



47 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");48 }49 xmlhttp.onreadystatechange = function ()50 {51 if (xmlhttp.readyState == 4 && xmlhttp.status == 200)52 {53 var name = xmlhttp.responseText;54 url = url.concat(name);

119


55 window.location.replace(url);56 removeSaveZip(zipfile);57 }58 }5960 xmlhttp.open("GET", "php/saveFileFilter.php?filter=" + CaptureFilter + "&net=" + CaptureNet,

true);61 xmlhttp.send();62 }6364 function saveAllFilesFilter() {6566 var url = window.location.href;67 url = url.substr(0,url.lastIndexOf("/")+1); // delete the reference to current page



75 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");76 }77 xmlhttp.onreadystatechange = function ()78 {79 if (xmlhttp.readyState == 4 && xmlhttp.status == 200)80 {81 var zipfile = xmlhttp.responseText;82 url = url.concat(zipfile);83 window.location.replace(url);84 removeSaveZip(zipfile);85 }86 }8788 xmlhttp.open("GET", "php/saveAllFilesFilter.php?filter=" + CaptureFilter + "&nets=" + nets, true);89 xmlhttp.send();90 }9192 function removeSaveZip(zipfile) {9394 if (window.XMLHttpRequest)95 { // code for IE7+, Firefox, Chrome, Opera, Safari


100 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");101 }102 xmlhttp.onreadystatechange = function ()103 {104 if (xmlhttp.readyState == 4 && xmlhttp.status == 200)105 {106 }107 }108109 xmlhttp.open("GET", "php/removeSaveZip.php?zipfile=" + zipfile, true);110 xmlhttp.send();111112 }

120


Codigo C.13: SaveAllFilesFilter.php, guarda en un zip todos los ficheros de todas las redes de cap-tura

1 <?php2 $num nets = $ GET['nets'];3 $filter = $ GET['filter'];4 $time now = time();5 $zipfile = "net_" . $filter . "_" . date('Y-m-d_G:i:s', $time now) . '.zip';67 for ($i=0; $i<$num nets; $i++) {8 $file = "../capture" . $i . ".cap";9 $file out = "../net" . $i . "-" . $filter . ".cap";

10 shell exec("tshark -r " . $file . " " . $filter . " -w " . $file out);11 shell exec("zip -g ../" . $zipfile . " " . $file out);12 unlink($file out);13 }1415 echo $zipfile;1617 ?>

Codigo C.14: removeSaveZip.php, elimina el fichero cuyo nombre se le pasa en la variable zipfile

1 <?php2 $file = $ GET('zipfile');3 shell exec("rm ../" . $zipfile);4 ?>

C.1.4. Estadısticas

Codigo C.15: Events.js, codigo que comprende todas las funciones necesarias para generar las es-tadısticas, tanto estaticas como dinamicas.

1 function initDensityGraph() {23 var capDuration = $("#SummaryTable tr:last td:eq(1)").html();4 capDuration = Math.ceil(capDuration);56 intervals = capDuration / 10;7 intervals = Math.round(intervals ∗ 100) / 100;89 var divStats = document.createElement("div");

10 divStats.setAttribute("id","graph");11 divStats.setAttribute("class","graph");1213 $.modal(divStats);14 centerModal();151617 options = {18 chart: {19 renderTo: 'graph',20 type: 'column',21 plotBackgroundColor: null,22 plotBorderWidth: null,23 plotShadow: false

121


24 },25 title: {26 text: "",27 },28 xAxis: {29 categories: [],30 title: {31 text: ""32 }33 },34 yAxis: {35 min: 0,36 title: {37 text: ""38 }39 },40 legend: {41 enabled: false42 },43 credits: {44 enabled: false45 },4647 tooltip: {48 formatter: function() {49 return "<b>" + manageLanguage("Interval") +":</b> [" + this.x +"]<br/><b>" + manageLanguage(

this.series.name) + ":</b> " + this.y;50 }51 },5253 series:[]5455 };565758 }5960 function densityOptions(dynamic) {6162 var mod = document.createElement("div");63 mod.setAttribute("id","simplemodal-container");6465 var headerNet = document.createElement("h3");66 headerNet.setAttribute("style","text-align: center;");67 if (dynamic) {68 headerNet.appendChild(document.createTextNode(manageLanguage("DensityMod") + ":"));69 }70 else headerNet.appendChild(document.createTextNode(manageLanguage("DensityMod") + ":"));7172 var br = document.createElement("br");73 headerNet.appendChild(br);7475 var buttonNet = document.createElement("button");76 buttonNet.setAttribute("type","button");77 buttonNet.setAttribute("value","Packets");78 if (dynamic) {79 buttonNet.setAttribute("onmousedown","$.modal.close(); dynamicDensity();");80 }81 else buttonNet.setAttribute("onmousedown","$.modal.close(); densityPackets();");

122


82 buttonNet.appendChild(document.createTextNode(manageLanguage("Packets")));83 headerNet.appendChild(buttonNet);8485 buttonNet = document.createElement("button");86 buttonNet.setAttribute("type","button");87 buttonNet.setAttribute("value","Bytes");88 if (dynamic) {89 buttonNet.setAttribute("onmousedown","$.modal.close(); dynamicDensity();");90 }91 else buttonNet.setAttribute("onmousedown","$.modal.close(); densityBytes();");92 buttonNet.appendChild(document.createTextNode(manageLanguage("Bytes")));93 headerNet.appendChild(buttonNet);9495 mod.appendChild(headerNet);9697 $.modal(mod);98 }99 function densityPackets() {

100101 initDensityGraph();102103 $.ajax({url:"php/statsDensity.php", data: { interval: intervals, path: path, net: CaptureNet},104 success: function(response) {105 if (response != "Session Expired") {106 $.get(path+'statsDensity.txt'+'?nocache='+Math.random(), function(data) {107 var lines = data.split("\n");108 var series = {109 name: "",110 data: []111 };112 var lineIntervals = 7;113 var symbol = " ";114115 $.each(lines, function(lineNo, line) {116 if (lineNo == 2) {117 if (line != "IO Statistics") { // new version tshark

118 lineIntervals = 11;119 symbol = "|";120 }121122 }123124 if (lineNo >= lineIntervals) { // not interesting lines before

125 var items = line.split(symbol);126 var i=0;127128 $.each(items, function(itemNo, item) {129 if (item != "") {130 switch (i) {131 case 0: item = item.replace("<>", "-"); options.xAxis.categories.push(item); break;132 case 1: series.data.push(parseInt(item)); break;133 }134 i++;135 }136137 })138139 }140

123


141 });142143 series.name = "Packets";144 options.series.push(series);145 options.title.text = manageLanguage("DensityMod") + " " + manageLanguage("Packets") + " " +

CaptureNet;146 options.yAxis.title.text = manageLanguage("Num") + manageLanguage("Packets");147 options.xAxis.title.text = manageLanguage("Interval")+"s (s)";148 var chart = new Highcharts.Chart(options);149 });150 }151 else manageErrors("Session Expired");152 }153 });;154 }155156 function densityBytes() {157158 initDensityGraph();159160 $.ajax({url:"php/statsDensity.php", data: { interval: intervals, path: path, net: CaptureNet},161 success: function(response) {162 if (response != "Session Expired") {163 $.get(path+'statsDensity.txt'+'?nocache='+Math.random(), function(data) {164 var lines = data.split("\n");165 var series = {166 data: []167 };168169 var lineIntervals = 7;170 var symbol = " ";171172 $.each(lines, function(lineNo, line) {173 if (lineNo == 2) {174 if (line != "IO Statistics") { // new version tshark

175 lineIntervals = 11;176 symbol = "|";177 }178179 }180181 if (lineNo >= lineIntervals) { // not interesting lines before

182 var items = line.split(symbol);183 var i=0;184185 $.each(items, function(itemNo, item) {186 if (item != "") {187 switch (i) {188 case 0: item = item.replace("<>", "-"); options.xAxis.categories.push(item); break;189 case 2: series.data.push(parseInt(item)); break;190 }191 i++;192 }193194 })195196 }197 });198

124


199200 series.name = "Bytes";201 options.series.push(series);202 options.title.text = manageLanguage("DensityMod") + " " + manageLanguage("Bytes") + " " +

CaptureNet;203 options.yAxis.title.text = manageLanguage("Num") + manageLanguage("Bytes");204 options.xAxis.title.text = manageLanguage("Interval")+"s (s)";205 var chart = new Highcharts.Chart(options);206 });207 }208 else manageErrors("Session Expired");209 }210 });211212 }213214 function processLinesStats(lines) {215 $.each(lines, function(lineNo, line) {216 if (lineNo >= (7+offset)) { // not interesting lines before

217 if (line != "") {218 var items = line.split(" ");219 var i=0;220 var x = 0, y = 0, x1 = 0, x2 = 0;221222 $.each(items, function(itemNo, item) {223 if (item != "") {224 switch (i) {225 case 0: x = (offset++∗intervals∗10)/10; break;226 case 2: y = parseInt(item);227 break;228 }229 i++;230 }231232233 })234235 series.addPoint([x, y], false, true);236 series.addPoint([(offset∗intervals−0.01),y], false, true);237 series.addPoint([(offset∗intervals−0.005),0], true, true);238 return false;239240 }241 else finished = true;242 }243 });244 }245246 function initDynamicDensity() {247248 var capDuration = $("#SummaryTable tr:last td:eq(1)").html();249 capDuration = Math.ceil(capDuration);250251 intervals = capDuration / 10;252 intervals = Math.round(intervals ∗ 100) / 100;253254 var divStats = document.createElement("div");255 divStats.setAttribute("id","graph");256 divStats.setAttribute("class","graph");

125


257258 $.modal(divStats);259 centerModal();260261262 options = {263 chart: {264 renderTo: 'graph',265 type: 'area',266 plotBackgroundColor: null,267 plotBorderWidth: null,268 plotShadow: false,269 events: {270 load: function() {271272 // set up the updating of the chart each second

273 series = this.series[0];274 finished = true;275 setInterval(function() {276 if (newPackets) {277 $.ajax({url:"php/statsDensity.php", data:"interval=" + intervals + "&file=capture" +

CaptureNet + ".cap" + "&filter=" + lastPacketStats,278 success: function(response) {279 $.get('statsDensity.txt'+'?nocache='+Math.random(), function(data) {280 newPackets = false;281 var lines = data.split("\n");282 finished = false;283 linesStats = lines;284 });285 }286 });287 }288289 if (!finished) {290 processLinesStats(linesStats);291 }292 else {293 series.addPoint([(offset++∗intervals), 0], false, true);294 series.addPoint([(offset∗intervals−0.005),0], true, true);295 }296297 }, intervals∗1000);298299 }300 }301 },302 title: {303 text: "",304 },305 xAxis: {306 //categories: [],

307 title: {308 text: ""309 }310 },311 yAxis: {312 min: 0,313 title: {314 text: ""

126


315 }316 },317 legend: {318 enabled: false319 },320 credits: {321 enabled: false322 },323324 tooltip: {325 //shared: true,

326327 formatter: function() {328 var start = (Math.round(this.x∗100)/100);329 if (start % intervals == 0)330 return "<b>" + manageLanguage("Interval") +":</b> [" + Math.round(this.x∗10)/10 + " - " +

Math.round((this.x+intervals)∗10)/10+"]<br/><b>" + manageLanguage(this.series.name) + ":</b>

" + this.y + " ";331 else return false; //"<b>" + manageLanguage("Interval") +":</b> [" + this.key + " - " + (this.

key+intervals)+"]<br/><b>" + manageLanguage(this.series.name) + ":</b> " + this.y;

332 }333 },334335 series:[]336337338 };339 }340341342 function dynamicDensity() {343344 initDynamicDensity();345346 $.ajax({url:"php/statsDensity.php", data:"interval=" + intervals + "&file=capture" + CaptureNet + ".cap

",347 success: function(response) {348 $.get('statsDensity.txt'+'?nocache='+Math.random(), function(data) {349 newPackets = false;350 lastPacketStats = lastPacket;351 var lines = data.split("\n");352 var series = {353 data: [],354 marker: {355 enabled: false356 }357 };358359 $.each(lines, function(lineNo, line) {360 if (lineNo >= 7) { // not interesting lines before

361 var items = line.split(" ");362 var i=0;363 var x = 0, y = 0, x1 = 0, x2 = 0;364365 $.each(items, function(itemNo, item) {366 if (item != "") {367 switch (i) {368 case 0: x = (offset++∗intervals∗10)/10; break;//offset*intervals+"s - "+(offset+1)*intervals

+"s"); break;

127


369 case 2: y = parseInt(item);370 series.data.push({371 x: x,372 y: y,373 name: "Start"374 }); break;375 }376 i++;377 }378379 })380 x1 = (offset∗intervals)−0.01;381 series.data.push({382 x: x1,383 y: y,384 name: x385386 });387 x2 = (offset∗intervals)−0.005;388 series.data.push({389 x: x2,390 y: 0,391 name: x392 });393394395 }396 });397398399 series.name = "Bytes";400 options.series.push(series);401 options.title.text = manageLanguage("DensityMod") + " " + manageLanguage("Bytes") + " capture" +

CaptureNet + ".cap";402 options.yAxis.title.text = manageLanguage("Num") + manageLanguage("Bytes");403 options.xAxis.title.text = manageLanguage("Interval")+"s (s)";404 var chart = new Highcharts.Chart(options);405 });406 }407 });408409 }

C.1.5. Hoja de estilo CSS

Codigo C.16: Webshark.css, hoja de estilo principal de wShark.

1 body { font: 12px Verdana;}2 div.info { height: 37px; width: 100px; float: left; margin−left: 15px;}3 span.info { font−size: 12px; margin: 3px 0px 0px 5px; float:left; width: 100px; }45 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ PACKETS TABLE (Summary & Details) ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/67 .fht table body {8 position: relative;9 float: left;

10 margin: 0;11 padding: 0;12 overflow−y:auto;

128


13 overflow−x:auto;14 border−top: 1px solid #000;15 background−color: #fff;16 }1718 .fht table body table thead tr th, .fht table body table tbody tr td, .fht fixed header table thead tr th, table thead

tr th, table tbody tr td {19 padding: 2px 5px;20 }2122 .fht table body table thead tr th, .fht fixed header table thead tr th, table thead tr th {23 padding: 5px;24 }25 .fht fixed header th { border−right: 2px inset #ddd }2627 .empty−cell {28 overflow:hidden;29 }3031 table { font−family: monospace; color: #000; border−top:2px solid black; border−collapse: collapse; border−

spacing: 10px !important; }32 th { font−family:Helvetica; text−align:left !important; padding: 5px; font−weight: bold; vertical−align:bottom;}33 th:last−child { border−right: none; }34 table#summary td:last−child { white−space: nowrap; overflow: hidden; position: absolute; }35 #summary { width: 100 %; }36 #summary tbody td { cursor: pointer; font−size: 14px; overflow: auto !important }3738 tr.picked { background−color: rgb(167, 203, 253); border: 1px solid #3691FB; }3940 #wholeSummary { width: 100 %; height: 50 %; overflow−x: auto; overflow−y: auto; }4142 .pane { overflow−y: auto; font−family: monospace; min−width: 1000px;}4344 #filter−field { font−size: 1.2em; position: relative; top: 1px}4546 #header { position: absolute; top: 0px; height: 70px; left: 0; right: 0; border−bottom: 1px solid #aaa; font−size: 0.9

em; min−width: 1000px;}4748 #wrapper { position: absolute; top: 43px; bottom: 0; left: 0; right:0; overflow: hidden }4950 #detail−div {51 height: 25 %; /∗ +13 % − 2 % quitado del ascii−div ∗/52 border−top: 1px solid #666;53 background−color: #fff;54 cursor: default;55 }5657 #ascii−div { position:relative; height: 20 %; overflow: hidden;}58 #ascii−div #tab−0, #ascii−div #tab−1 {59 position: absolute;60 top: 21px;61 right:0;62 left: 0;63 bottom: 0;64 padding−left: 10px;65 overflow−y: auto;66 background−color:#fff !important;67 border−top: 1px solid #666;68 margin−bottom: 7px;

129


69 }7071 pre { margin:2px}7273 /∗ Drop−down menu indentation ∗/74 div.protocol { padding−left: 25px !important; }75 div.protocol div { padding−left: 25px }76 div.protocol ∗ div { padding−left: 25px }77 div.protocol > div { display: none; }78 div.expanded > div { display: block !important;}79 div.parent > div { display: none; }8081 #detail−div div:first−child { margin−top: 2px; }82 #detail−div span.protoLabel { background−color: #e5e5e5; display:block; margin−bottom: 2px}83 #detail−div span.fieldLabel { display:block; }84 /∗div.parent { background: url(/images/shark−right.gif) 2px 0 no−repeat}∗/85 #detail−div { border−top: 2px solid black; margin: 10px; font−size: 14px }8687 /∗ Selected packets ∗/88 tr.picked td, div.picked > span.fieldLabel, div.picked > span.protoLabel {89 background: #a7cbfd !important;90 color: #000;91 }9293 span.ascii−selection { background−color: #b6d6fe; color: #000 }949596 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ BUTTONS ∗∗∗∗∗∗∗∗∗∗∗∗∗/9798 .ui−button { display: inline−block; position: relative; padding: 0; margin−right: .05em; text−decoration: none !

important; cursor: pointer; text−align: center; zoom: 1; overflow: visible; }99 .ui−button .ui−button−text { display: block; line−height: 1.4; }

100 .ui−button−text−icon .ui−button−text { padding: .4em 1em .4em 2.1em; }101102103 .Capturing { margin−left: 3px; padding: 1px; font−size: 100 %; width: 100 %; color: Black; font−weight: bold;

background−color : GreenYellow; −moz−border−radius: 4px; −webkit−border−radius: 4px; border−radius: 4px; border: 1px solid #cbc7bd; }

104 .stopped { margin−left: 3px; padding: 1px; font−size: 100 %; width: 100 %; color: White; font−weight: bold;background−color : Tomato; −moz−border−radius: 4px; −webkit−border−radius: 4px; border−radius: 4px;border: 1px solid #cbc7bd; }

105 .File { margin−left: 3px; padding: 1px; font−size: 100 %; width: 100 %; color: Black; font−weight: bold; background−color : Skyblue; −moz−border−radius: 4px; −webkit−border−radius: 4px; border−radius: 4px; border: 1pxsolid #cbc7bd; }

106107108 #stopCaptureTitle { font−size: 12px; margin: 3px 0px 0px 10px; float:left; width: 100px; }109 .captureButtonPlay { float:left; height: 21px; width: 30px; margin: 0px 0px 0px 3px; cursor:pointer; }110 .captureButtonStop { height: 21px; width: 30px; margin: 0px 0px 0px 3px; cursor:pointer;}111112 .infoNet { margin−left: 3px; padding: 1px; font−size: 100 %; width: 100 %; background−color: ; color: Black ; font−

weight: bold; −moz−border−radius: 4px; −webkit−border−radius: 4px; border−radius: 4px; border: 1px solid#cbc7bd; }

113 .infoFilter { margin−left: 3px; padding: 1px; font−size: 100 %; width: 100 %; background−color: ; color: Black ; font−weight: bold; −moz−border−radius: 4px; −webkit−border−radius: 4px; border−radius: 4px; border: 1pxsolid #cbc7bd; }

114 .infoLang { margin−left: 3px; padding: 1px; font−size: 100 %; width: 100 %; background−color: ; color: Black ; font−weight: bold; −moz−border−radius: 4px; −webkit−border−radius: 4px; border−radius: 4px; border: 1pxsolid #cbc7bd; }

130


C.2. Version Stand-Alone de wShark

En esta seccion se incluyen algunos ejemplos de los cambios en los ficheros de la aplicacion paraadaptarla a esta version.

C.2.1. Inicio de la aplicacion

Codigo C.17: IntroWebShark.php, HTML de la pagina principal de esta version de wShark, dondese seleccionan los archivos a subir

1 <?php2 ?>34 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

5 "http://www.w3.org/TR/html4/strict.dtd">6 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">7 <head>8 <meta http−equiv="Content-Type" content="text/html; charset=utf-8" />9 <title>IntroWebShark</title>

10 <meta name="author" content="Agustın Leyenda" />11 <!−− Date: 2012−02−20 −−>12 <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>13 <script type="text/javascript" src="js/jquery.cookie.js"></script>14 <script type="text/javascript" src="js/WebShark.js"></script>15 <script type="text/javascript" src="js/Language.js"></script>16 <script type="text/javascript" src="js/Events.js"></script>17 <script type="text/javascript" src="js/introMenu.js"></script>18 <script type="text/javascript" src="js/uploadFiles.js"></script>19 <script type="text/javascript" src="js/fileuploader.js"></script>20 <script type='text/javascript' src='js/jquery.simplemodal.js'></script> <!−− Modal for

filter and other things −−>21 <link type="text/css" charset="utf-8" rel="Stylesheet" media="all" href="css/

IntroWebShark.css" />22 <link type="text/css" charset="utf-8" rel="Stylesheet" media="all" href="css/

fileuploader.css" />23 <link type="text/css" rel="stylesheet" href="css/basic.css"/>2425 <script type="text/javascript">26 $(document).ready(function(){27 var running = 0;28 var uploader = new qq.FileUploader({29 // pass the dom node (ex. $(selector)[0] for jQuery users)30 element: document.getElementById('file-uploader'),31 // path to server−side upload script32 action: 'php/php.php',33 allowedExtensions: ['cap', 'pcap'],34 sizeLimit: 1000000, // 1 MB35 maxConnections: 12,36 onSubmit: function() {37 running++;38 },39 onComplete: function() {40 running−−;41 if (running == 0) // only trigger the event when there is no more files to upload42 window.location.replace("WebShark.php");43 }44 });

131


45 });4647 if ($.cookie('lang') == null )48 $.cookie('lang', 'English', { expires: 7});4950 language = $.cookie('lang');5152 </script>535455 </head>56 <body>57 <div id="header">58 <img src="images/entel_logo.jpg" style="float: left;" alt=""/>59 <img src="images/ETSETB2.jpg" style="float: right;" alt="" />60 </div>6162 <div id="body">63 <img src="images/wSharkLogoBlack.png" id="wLogo" alt="" />64 <div id="dialog">65 <h1>66 <script type="text/Javascript">67 document.write(manageLanguage("Welcome") + "wShark! ");68 </script>69 </h1>70 <div id="file-uploader">71 </div>7273 </div>74 </div>75 <div id="foot">7677 <script type="text/javascript">78 document.write(manageLanguage("Browse"));79 </script>8081 </div>82 <div id="default">8384 <span id="defaultSpan" onmousedown='$.ajax({85 type: "GET",

86 async: false,

87 url: "php/defaultExample.php"

88 });

89 window.location.replace("WebShark.

php")'>90 <script type="text/javascript">document.write(manageLanguage("Default"));

</script>91 </span>92 <span id="lang" onmousedown='modalChangeLanguage();'>93 <script type="text/javascript">document.write(manageLanguage("Change") +

" " + manageLanguage("MenuLanguage"));</script>9495 </span>969798 </div>99

100 <script type="text/javascript">

132


101 $.get("php/alreadyInSession.php", function(data) {102 if (data == "True") { // already in Session103 alert(manageLanguage("AlreadySession"));104 window.location.replace("WebShark.php");105 }106 });107 </script>108109110 </body>111 </html>

Codigo C.18: WebShark.php, HTML de la pagina de la aplicacion de wShark en esta version

1 <?php2 $path = session save path(".");3 session start();4 $ SESSION['last_activity'] = time();5 ?>67 <!DOCTYPE html>8 <head>9 <title>WebShark</title>

10 <meta http−equiv="content-type" content="text/html; charset=utf-8" />11 <META HTTP−EQUIV="PRAGMA" CONTENT="NO-CACHE">12 <META HTTP−EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">13 <meta http−equiv="expires" content="Fri, 5 Apr 1996 23:59:59 GMT">14 <link type="text/css" charset="utf-8" rel="Stylesheet" media="all" href="css/Webshark.css" />15 <link type="text/css" rel="stylesheet" href="css/dcmegamenu.css" />16 <link type="text/css" rel="stylesheet" href="css/skins/white.css"/>17 <link type="text/css" rel="stylesheet" href="css/basic.css"/>18 <script type="text/javascript" charset="utf-8" src="js/WebShark.js"></script>19 <script type="text/javascript" charset="utf-8" src="js/Errors.js"></script>20 <script type="text/javascript" charset="utf-8" src="js/Language.js"></script>21 <script type="text/javascript" charset="utf-8" src="js/io.js"></script>22 <script type="text/javascript" charset="utf-8" src="js/Events.js"></script>23 <script type="text/javascript" charset="utf-8" src="js/ManageTables.js"></script>24 <script type="text/javascript" charset="utf-8" src="js/SaveFiles.js"></script>25 <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>26 <script type="text/javascript" src="js/jquery.cookie.js"></script>27 <script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script> <!−− Menu −−>28 <script type='text/javascript' src='js/jquery.dcmegamenu.1.3.2.js'></script> <!−− Menu −−>29 <script type='text/javascript' src='js/Menu.js'></script> <!−− Menu −−>30 <script type='text/javascript' src='js/jquery.simplemodal.js'></script> <!−− Modal for filter

and other things −−>31 <script type="text/javascript" src="js/highcharts.js"></script>3233 <meta name="apple-mobile-web-app-capable" content="yes">3435 <script type="text/javascript">3637 if ($.cookie('lang') != null)38 language = $.cookie('lang');3940 </script>4142 </head>

133


43 <body onload="detectBrowser(); if ('Navigator' == navigator.appName) document.forms[0].reset();

navigatePacketsKeyboard()" >4445 <div id='header' class='ui-widget-header' style='border:none; '>46 <img src='images/wSharkSecondaryLogo.jpg' align='left' style="margin-left: 5px" />4748 <script type="text/javascript">4950 <?php // detects the uploaded files and their names51 $path = session id() . "/";52 $filenames = array();53 // Open a known directory, and proceed to read its contents54 foreach(glob($path . "*") as $filename) {55 $ext = pathinfo($filename, PATHINFO EXTENSION);56 if (($ext == "cap") || ($ext == "pcap"))57 $filenames[] = substr($filename, strpos($filename,"/")+1);58 }5960 ?>61 files = ["<?php echo join("\", \"", $filenames); ?>"];62 path = "<?php echo $path; ?>";63 CaptureNet = files[0];6465 document.write("<div id='stopCaptureTitle'>");66 document.write("<span style='margin-left: 3px;'>" + manageLanguage("Status") + "</span>");67 document.write('<div><input style="float:left;" type="button" id="statusBar" class="File" value="

' + manageLanguage("File") + '"></input> ');68 document.write('</div></div><div id="infoNet" class="info"></div>');69 document.write('<div id="infoFilter" class="info"></div>');70 document.write('<div id="infoLang" class="info"></div>');71 infoStatus();7273 </script>747576 <div class="white" style="float:right;">77 <ul id="mega-menu-2" class="mega-menu">7879 <script type="text/javascript">80 writeMenu();81 </script>82 </ul>8384 </div>858687 </div>88 <!−− ”Rails” for summary −−>8990 <div id='wrapper' class='expanded' style='overflow:hidden'>91 <div class="fht_fixed_header">92 <table style="width: 100 %; height: 26px; background-color: #eee; ">93 <thead>94 <tr>95 <script type="text/javascript">96 document.write('<th class="first-cell" style="width:3.5 %"><div class="empty-cell">No.</div></

th>');97 document.write('<th style="width:8 %"><div class="empty-cell">' + manageLanguage("Time") + '</div

></th>');

134


98 document.write('<th style="width:13 %"><div class="empty-cell">' + manageLanguage("Source") + '</div></th>');

99 document.write('<th style="width:13 %"><div class="empty-cell">' + manageLanguage("Destination")+'</div></th>');

100 document.write('<th style="width:8 %"><div class="empty-cell">' + manageLanguage("Protocol") + '</div></th>');

101 document.write('<th style="width:6 %;"><div class="empty-cell">' + manageLanguage("Length") + '</div></th>');

102 document.write('<th class="last-cell" style="width:48.5 %"><div class="empty-cell">' +manageLanguage("Info") + '</div></th>');

103 </script>104105 </tr>106 </thead></table>107 </div>108 <div id="wholeSummary" class="fht_table_body" >109 <table id="summary" style="width: 100 %; margin-top: -30px; "> <!−− rails to write the packet data in

the right position −−>110 <thead>111 <tr>112 <script type="text/javascript">113 document.write('<th class="first-cell" style="width:3.6 %"><div class="empty-cell">No.</div></th>'

);114 document.write('<th style="width:8.1 %"><div class="empty-cell">Time</div></th>');115 document.write('<th style="width:13.1 %"><div class="empty-cell">Source</div></th>');116 document.write('<th style="width:13.1 %"><div class="empty-cell">Destination</div></th>');117 document.write('<th style="width:8.1 %"><div class="empty-cell">Protocol</div></th>');118 document.write('<th style="width:5.1 %;"><div class="empty-cell">Length</div></th>');119 document.write('<th class="last-cell" style="width:48.9 %"><div class="empty-cell">Info</div></th>

');120 </script>121 </tr>122 </thead>123 <tbody id="SummaryTable" tabindex="0">124125 <script type="text/javascript">126 modifyFile(CaptureNet);127 </script>128129 </tbody>130 </table>131 </div>132 <div id="detail-div" class="pane">133134 </div>135136 <div id="ascii-div" class="pane ui-widget-header"><div id="tab-0" style="top:0 !important">137138 </div></div>139140141 </body>142143 </html>

Codigo C.19: changeFile.php, ejecuta TShark para actualizar el contenido de los ficheros psml, pdmly ascii al inicio o cuando se cambia de fichero a visualizar

135


1 <?php2 $file = "../" . $ GET['path'] . $ GET['net'];34 if (file exists($file)) {56 if ( $ GET['filter'] != "" ) {7 $filter = "&& " . $ GET['filter'] ; // add the condition of the filter8 }9 else $filter = ""; // if there isn't filter condition, we can't put the &&

1011 shell exec("tshark -r " . $file . " -T psml -R 'frame.number > " . $ GET['lastPacket'] . " " . $filter .

"' > ../" . $ GET['path'] . "psml.xml");12 shell exec("tshark -r " . $file . " -T pdml -R 'frame.number == " . $ GET['packet'] ."' > ../" .

$ GET['path'] . "pdml.xml");13 shell exec("tshark -r " . $file . " -x -R 'frame.number == " . $ GET['packet'] ."' > ../" . $ GET['

path'] . "ascii.txt");1415 $ascii = "";16 $ascii = file get contents("../" . $ GET['path'] . "ascii.txt"); // hexadecimal and ascii packet

information17 $ascii = substr($ascii, strpos($ascii, "\n")); // delete first line (packet text information)18 $ascii = substr($ascii, strpos($ascii, "\n")); // delete second line (line break)19 $ascii = ltrim($ascii); // delete blank spaces2021 $varReturn = $log . " %" . $ascii;22 echo $varReturn;23 }24 else echo "Session Expired";2526 ?>

C.2.2. Hoja de estilo CSS

Codigo C.20: IntroWebShark.css, hoja de estilo para la pagina principal de esta version de wShark.

1 body {2 /∗font−family: Verdana, Arial, Helvetica, sans−serif; ∗/3 text−align: center;4 margin: 1em 0 0 0;5 vertical−align: middle;6 }78 div#header {9 position: relative;

10 width: 1200px;11 height: 100px;12 margin: 0 auto;13 }1415 div#body#dialog {16 position:relative;17 width: 1200px;18 margin: 0 auto;19 }2021 div#foot {22 position: relative;

136


23 width: 1200px;24 margin: 40px auto;25 }2627 div#default {28 position: relative;29 width: 1200px;30 font−size: 0.9em;31 margin: 40px auto;32 }3334 span#defaultSpan {35 color: blue;36 text−decoration: underline;37 cursor: pointer;38 }3940 span#defaultSpan:hover {41 color: red;42 }434445 span#lang {46 color: blue;47 text−decoration: underline;48 cursor: pointer;49 margin−left: 50px;50 }5152 span#lang:hover {53 color: red;54 }5556 h1 {text−align: center;}5758 button {width:200px; margin: 10px 5px;}

137


138

Apendices D

Logos

El logo principal de wShark esta formado por dos elementos que juntos representan la filosofıade la aplicacion. Por un lado, tenemos el escudo de HTML5 (ver figura D.1), que representa lafuncionalidad web de wShark, y por otro los colores y la aleta del logo de Wireshark (ver figuraD.2), por su funcion de analizador de redes basado en Wireshark. Juntos forman el logo de la figuraD.3

Figura D.1: Logo HTML5 que representa la parte web de la aplicacion.

139

140 WSHARK APENDICES D. LOGOS

Figura D.2: Logo de Wireshark que representa la parte de analizador de redes de la aplicacion.

Figura D.3: Combinacion de los dos logos previos que muestran las dos caracterısticas principalesde wShark.

140

WSHARK APENDICES D. LOGOS 141

Por otro lado, el logo pequeno para la propia interfaz de captura de paquetes (que puede verse,por ejemplo, en la figura 5.20) se trata de un rediseno del logo similar de Wireshark, como puedeapreciarse en las figuras D.4 y D.5.

Figura D.4: Segundo Logo de Wireshark.

Figura D.5: Adaptacion del segundo logo de Wireshark para su uso en la interfaz grafica de capturade paquetes.

D.1. Logos descartados

Diferentes modificaciones sobre el logo principal fueron contempladas como posibilidades parael puesto. Entre ellas, se incluyen a continuacion (figuras D.6 y D.7) los dos mas firmes candidatosprevios de la eleccion final.

Figura D.6: Modificacion del logo principal con la aleta en blanco.

141

142 WSHARK APENDICES D. LOGOS

Figura D.7: Modificacion del logo principal sin bordes.

142

Apendices E

Licencia GPL

GNU GENERAL PUBLIC LICENSECopyright © 2007 Free Software Foundation, Inc. http://fsf.org/

Everyone is permitted to copy and distribute verbatim copies of this

license document, but changing it is not allowed.

The GNU General Public License is a free, copyleft license for software and other kinds of works.

The licenses for most software and other practical works are designed to take away your free-dom to share and change the works. By contrast, the GNU General Public License is intended toguarantee your freedom to share and change all versions of a program–to make sure it remains freesoftware for all its users. We, the Free Software Foundation, use the GNU General Public Licensefor most of our software; it applies also to any other work released this way by its authors. You canapply it to your programs, too.

When we speak of free software, we are referring to freedom, not price. Our General PublicLicenses are designed to make sure that you have the freedom to distribute copies of free software(and charge for them if you wish), that you receive source code or can get it if you want it, thatyou can change the software or use pieces of it in new free programs, and that you know you cando these things.

To protect your rights, we need to prevent others from denying you these rights or asking youto surrender the rights. Therefore, you have certain responsibilities if you distribute copies of thesoftware, or if you modify it: responsibilities to respect the freedom of others.

For example, if you distribute copies of such a program, whether gratis or for a fee, you mustpass on to the recipients the same freedoms that you received. You must make sure that they, too,receive or can get the source code. And you must show them these terms so they know their rights.

Developers that use the GNU GPL protect your rights with two steps: (1) assert copyright onthe software, and (2) offer you this License giving you legal permission to copy, distribute and/ormodify it.

For the developers’ and authors’ protection, the GPL clearly explains that there is no warrantyfor this free software. For both users’ and authors’ sake, the GPL requires that modified versions be

143

144 WSHARK APENDICES E. LICENCIA GPL

marked as changed, so that their problems will not be attributed erroneously to authors of previousversions.

Some devices are designed to deny users access to install or run modified versions of the softwareinside them, although the manufacturer can do so. This is fundamentally incompatible with the aimof protecting users’ freedom to change the software. The systematic pattern of such abuse occursin the area of products for individuals to use, which is precisely where it is most unacceptable.Therefore, we have designed this version of the GPL to prohibit the practice for those products.If such problems arise substantially in other domains, we stand ready to extend this provision tothose domains in future versions of the GPL, as needed to protect the freedom of users.

Finally, every program is threatened constantly by software patents. States should not allowpatents to restrict development and use of software on general-purpose computers, but in thosethat do, we wish to avoid the special danger that patents applied to a free program could make iteffectively proprietary. To prevent this, the GPL assures that patents cannot be used to render theprogram non-free.

The precise terms and conditions for copying, distribution and modification follow.

Terms and Conditions

0. Definitions.

“This License” refers to version 3 of the GNU General Public License.

“Copyright” also means copyright-like laws that apply to other kinds of works, such as semi-conductor masks.

“The Program” refers to any copyrightable work licensed under this License. Each licensee isaddressed as “you”. “Licensees” and “recipients” may be individuals or organizations.

To “modify” a work means to copy from or adapt all or part of the work in a fashion requiringcopyright permission, other than the making of an exact copy. The resulting work is called a“modified version” of the earlier work or a work “based on” the earlier work.

A “covered work” means either the unmodified Program or a work based on the Program.

To “propagate” a work means to do anything with it that, without permission, would make youdirectly or secondarily liable for infringement under applicable copyright law, except executingit on a computer or modifying a private copy. Propagation includes copying, distribution (withor without modification), making available to the public, and in some countries other activitiesas well.

To “convey” a work means any kind of propagation that enables other parties to make orreceive copies. Mere interaction with a user through a computer network, with no transfer ofa copy, is not conveying.

An interactive user interface displays “Appropriate Legal Notices” to the extent that it inclu-des a convenient and prominently visible feature that (1) displays an appropriate copyrightnotice, and (2) tells the user that there is no warranty for the work (except to the extent thatwarranties are provided), that licensees may convey the work under this License, and how toview a copy of this License. If the interface presents a list of user commands or options, suchas a menu, a prominent item in the list meets this criterion.

1. Source Code.

144

WSHARK APENDICES E. LICENCIA GPL 145

The “source code” for a work means the preferred form of the work for making modificationsto it. “Object code” means any non-source form of a work.

A “Standard Interface” means an interface that either is an official standard defined by arecognized standards body, or, in the case of interfaces specified for a particular programminglanguage, one that is widely used among developers working in that language.

The “System Libraries” of an executable work include anything, other than the work as awhole, that (a) is included in the normal form of packaging a Major Component, but whichis not part of that Major Component, and (b) serves only to enable use of the work withthat Major Component, or to implement a Standard Interface for which an implementationis available to the public in source code form. A “Major Component”, in this context, meansa major essential component (kernel, window system, and so on) of the specific operatingsystem (if any) on which the executable work runs, or a compiler used to produce the work,or an object code interpreter used to run it.

The “Corresponding Source” for a work in object code form means all the source code neededto generate, install, and (for an executable work) run the object code and to modify thework, including scripts to control those activities. However, it does not include the work’sSystem Libraries, or general-purpose tools or generally available free programs which are usedunmodified in performing those activities but which are not part of the work. For example,Corresponding Source includes interface definition files associated with source files for thework, and the source code for shared libraries and dynamically linked subprograms that thework is specifically designed to require, such as by intimate data communication or controlflow between those subprograms and other parts of the work.

The Corresponding Source need not include anything that users can regenerate automaticallyfrom other parts of the Corresponding Source.

The Corresponding Source for a work in source code form is that same work.

2. Basic Permissions.

All rights granted under this License are granted for the term of copyright on the Program, andare irrevocable provided the stated conditions are met. This License explicitly affirms yourunlimited permission to run the unmodified Program. The output from running a coveredwork is covered by this License only if the output, given its content, constitutes a coveredwork. This License acknowledges your rights of fair use or other equivalent, as provided bycopyright law.

You may make, run and propagate covered works that you do not convey, without conditionsso long as your license otherwise remains in force. You may convey covered works to others forthe sole purpose of having them make modifications exclusively for you, or provide you withfacilities for running those works, provided that you comply with the terms of this License inconveying all material for which you do not control copyright. Those thus making or runningthe covered works for you must do so exclusively on your behalf, under your direction andcontrol, on terms that prohibit them from making any copies of your copyrighted materialoutside their relationship with you.

Conveying under any other circumstances is permitted solely under the conditions statedbelow. Sublicensing is not allowed; section 10 makes it unnecessary.

3. Protecting Users’ Legal Rights From Anti-Circumvention Law.

145


No covered work shall be deemed part of an effective technological measure under any appli-cable law fulfilling obligations under article 11 of the WIPO copyright treaty adopted on 20December 1996, or similar laws prohibiting or restricting circumvention of such measures.

When you convey a covered work, you waive any legal power to forbid circumvention oftechnological measures to the extent such circumvention is effected by exercising rights underthis License with respect to the covered work, and you disclaim any intention to limit operationor modification of the work as a means of enforcing, against the work’s users, your or thirdparties’ legal rights to forbid circumvention of technological measures.

4. Conveying Verbatim Copies.

You may convey verbatim copies of the Program’s source code as you receive it, in any me-dium, provided that you conspicuously and appropriately publish on each copy an appropriatecopyright notice; keep intact all notices stating that this License and any non-permissive termsadded in accord with section 7 apply to the code; keep intact all notices of the absence of anywarranty; and give all recipients a copy of this License along with the Program.

You may charge any price or no price for each copy that you convey, and you may offer supportor warranty protection for a fee.

5. Conveying Modified Source Versions.

You may convey a work based on the Program, or the modifications to produce it from theProgram, in the form of source code under the terms of section 4, provided that you also meetall of these conditions:

a) The work must carry prominent notices stating that you modified it, and giving a relevantdate.

b) The work must carry prominent notices stating that it is released under this Licenseand any conditions added under section 7. This requirement modifies the requirement insection 4 to “keep intact all notices”.

c) You must license the entire work, as a whole, under this License to anyone who comesinto possession of a copy. This License will therefore apply, along with any applicablesection 7 additional terms, to the whole of the work, and all its parts, regardless of howthey are packaged. This License gives no permission to license the work in any other way,but it does not invalidate such permission if you have separately received it.

d) If the work has interactive user interfaces, each must display Appropriate Legal Notices;however, if the Program has interactive interfaces that do not display Appropriate LegalNotices, your work need not make them do so.

A compilation of a covered work with other separate and independent works, which are notby their nature extensions of the covered work, and which are not combined with it such asto form a larger program, in or on a volume of a storage or distribution medium, is called an“aggregate” if the compilation and its resulting copyright are not used to limit the access orlegal rights of the compilation’s users beyond what the individual works permit. Inclusion ofa covered work in an aggregate does not cause this License to apply to the other parts of theaggregate.

6. Conveying Non-Source Forms.

146


You may convey a covered work in object code form under the terms of sections 4 and 5,provided that you also convey the machine-readable Corresponding Source under the termsof this License, in one of these ways:

a) Convey the object code in, or embodied in, a physical product (including a physicaldistribution medium), accompanied by the Corresponding Source fixed on a durablephysical medium customarily used for software interchange.

b) Convey the object code in, or embodied in, a physical product (including a physicaldistribution medium), accompanied by a written offer, valid for at least three years andvalid for as long as you offer spare parts or customer support for that product model,to give anyone who possesses the object code either (1) a copy of the CorrespondingSource for all the software in the product that is covered by this License, on a durablephysical medium customarily used for software interchange, for a price no more thanyour reasonable cost of physically performing this conveying of source, or (2) access tocopy the Corresponding Source from a network server at no charge.

c) Convey individual copies of the object code with a copy of the written offer to provide theCorresponding Source. This alternative is allowed only occasionally and noncommercially,and only if you received the object code with such an offer, in accord with subsection 6b.

d) Convey the object code by offering access from a designated place (gratis or for a charge),and offer equivalent access to the Corresponding Source in the same way through the sameplace at no further charge. You need not require recipients to copy the CorrespondingSource along with the object code. If the place to copy the object code is a network server,the Corresponding Source may be on a different server (operated by you or a third party)that supports equivalent copying facilities, provided you maintain clear directions nextto the object code saying where to find the Corresponding Source. Regardless of whatserver hosts the Corresponding Source, you remain obligated to ensure that it is availablefor as long as needed to satisfy these requirements.

e) Convey the object code using peer-to-peer transmission, provided you inform other peerswhere the object code and Corresponding Source of the work are being offered to thegeneral public at no charge under subsection 6d.

A separable portion of the object code, whose source code is excluded from the CorrespondingSource as a System Library, need not be included in conveying the object code work.

A “User Product” is either (1) a “consumer product”, which means any tangible personalproperty which is normally used for personal, family, or household purposes, or (2) anythingdesigned or sold for incorporation into a dwelling. In determining whether a product is aconsumer product, doubtful cases shall be resolved in favor of coverage. For a particularproduct received by a particular user, “normally used” refers to a typical or common use ofthat class of product, regardless of the status of the particular user or of the way in whichthe particular user actually uses, or expects or is expected to use, the product. A product is aconsumer product regardless of whether the product has substantial commercial, industrial ornon-consumer uses, unless such uses represent the only significant mode of use of the product.

“Installation Information” for a User Product means any methods, procedures, authorizationkeys, or other information required to install and execute modified versions of a covered workin that User Product from a modified version of its Corresponding Source. The informationmust suffice to ensure that the continued functioning of the modified object code is in no caseprevented or interfered with solely because modification has been made.

147


If you convey an object code work under this section in, or with, or specifically for use in, aUser Product, and the conveying occurs as part of a transaction in which the right of possessionand use of the User Product is transferred to the recipient in perpetuity or for a fixed term(regardless of how the transaction is characterized), the Corresponding Source conveyed underthis section must be accompanied by the Installation Information. But this requirement doesnot apply if neither you nor any third party retains the ability to install modified object codeon the User Product (for example, the work has been installed in ROM).

The requirement to provide Installation Information does not include a requirement to con-tinue to provide support service, warranty, or updates for a work that has been modified orinstalled by the recipient, or for the User Product in which it has been modified or installed.Access to a network may be denied when the modification itself materially and adverselyaffects the operation of the network or violates the rules and protocols for communicationacross the network.

Corresponding Source conveyed, and Installation Information provided, in accord with thissection must be in a format that is publicly documented (and with an implementation availableto the public in source code form), and must require no special password or key for unpacking,reading or copying.

7. Additional Terms.

“Additional permissions” are terms that supplement the terms of this License by makingexceptions from one or more of its conditions. Additional permissions that are applicable tothe entire Program shall be treated as though they were included in this License, to the extentthat they are valid under applicable law. If additional permissions apply only to part of theProgram, that part may be used separately under those permissions, but the entire Programremains governed by this License without regard to the additional permissions.

When you convey a copy of a covered work, you may at your option remove any additionalpermissions from that copy, or from any part of it. (Additional permissions may be writtento require their own removal in certain cases when you modify the work.) You may placeadditional permissions on material, added by you to a covered work, for which you have orcan give appropriate copyright permission.

Notwithstanding any other provision of this License, for material you add to a covered work,you may (if authorized by the copyright holders of that material) supplement the terms ofthis License with terms:

a) Disclaiming warranty or limiting liability differently from the terms of sections 15 and16 of this License; or

b) Requiring preservation of specified reasonable legal notices or author attributions in thatmaterial or in the Appropriate Legal Notices displayed by works containing it; or

c) Prohibiting misrepresentation of the origin of that material, or requiring that modifiedversions of such material be marked in reasonable ways as different from the originalversion; or

d) Limiting the use for publicity purposes of names of licensors or authors of the material;or

e) Declining to grant rights under trademark law for use of some trade names, trademarks,or service marks; or

148


f ) Requiring indemnification of licensors and authors of that material by anyone who con-veys the material (or modified versions of it) with contractual assumptions of liabilityto the recipient, for any liability that these contractual assumptions directly impose onthose licensors and authors.

All other non-permissive additional terms are considered “further restrictions” within themeaning of section 10. If the Program as you received it, or any part of it, contains a noticestating that it is governed by this License along with a term that is a further restriction,you may remove that term. If a license document contains a further restriction but permitsrelicensing or conveying under this License, you may add to a covered work material governedby the terms of that license document, provided that the further restriction does not survivesuch relicensing or conveying.

If you add terms to a covered work in accord with this section, you must place, in the relevantsource files, a statement of the additional terms that apply to those files, or a notice indicatingwhere to find the applicable terms.

Additional terms, permissive or non-permissive, may be stated in the form of a separatelywritten license, or stated as exceptions; the above requirements apply either way.

8. Termination.

You may not propagate or modify a covered work except as expressly provided under thisLicense. Any attempt otherwise to propagate or modify it is void, and will automaticallyterminate your rights under this License (including any patent licenses granted under thethird paragraph of section 11).

However, if you cease all violation of this License, then your license from a particular copyrightholder is reinstated (a) provisionally, unless and until the copyright holder explicitly and finallyterminates your license, and (b) permanently, if the copyright holder fails to notify you of theviolation by some reasonable means prior to 60 days after the cessation.

Moreover, your license from a particular copyright holder is reinstated permanently if thecopyright holder notifies you of the violation by some reasonable means, this is the first timeyou have received notice of violation of this License (for any work) from that copyright holder,and you cure the violation prior to 30 days after your receipt of the notice.

Termination of your rights under this section does not terminate the licenses of parties whohave received copies or rights from you under this License. If your rights have been terminatedand not permanently reinstated, you do not qualify to receive new licenses for the samematerial under section 10.

9. Acceptance Not Required for Having Copies.

You are not required to accept this License in order to receive or run a copy of the Program.Ancillary propagation of a covered work occurring solely as a consequence of using peer-to-peer transmission to receive a copy likewise does not require acceptance. However, nothingother than this License grants you permission to propagate or modify any covered work.These actions infringe copyright if you do not accept this License. Therefore, by modifying orpropagating a covered work, you indicate your acceptance of this License to do so.

10. Automatic Licensing of Downstream Recipients.

Each time you convey a covered work, the recipient automatically receives a license from theoriginal licensors, to run, modify and propagate that work, subject to this License. You arenot responsible for enforcing compliance by third parties with this License.

149


An “entity transaction” is a transaction transferring control of an organization, or substantiallyall assets of one, or subdividing an organization, or merging organizations. If propagation of acovered work results from an entity transaction, each party to that transaction who receivesa copy of the work also receives whatever licenses to the work the party’s predecessor ininterest had or could give under the previous paragraph, plus a right to possession of theCorresponding Source of the work from the predecessor in interest, if the predecessor has itor can get it with reasonable efforts.

You may not impose any further restrictions on the exercise of the rights granted or affirmedunder this License. For example, you may not impose a license fee, royalty, or other charge forexercise of rights granted under this License, and you may not initiate litigation (including across-claim or counterclaim in a lawsuit) alleging that any patent claim is infringed by making,using, selling, offering for sale, or importing the Program or any portion of it.

11. Patents.

A “contributor” is a copyright holder who authorizes use under this License of the Programor a work on which the Program is based. The work thus licensed is called the contributor’s“contributor version”.

A contributor’s “essential patent claims” are all patent claims owned or controlled by thecontributor, whether already acquired or hereafter acquired, that would be infringed by somemanner, permitted by this License, of making, using, or selling its contributor version, but donot include claims that would be infringed only as a consequence of further modification ofthe contributor version. For purposes of this definition, “control” includes the right to grantpatent sublicenses in a manner consistent with the requirements of this License.

Each contributor grants you a non-exclusive, worldwide, royalty-free patent license under thecontributor’s essential patent claims, to make, use, sell, offer for sale, import and otherwiserun, modify and propagate the contents of its contributor version.

In the following three paragraphs, a “patent license” is any express agreement or commitment,however denominated, not to enforce a patent (such as an express permission to practice apatent or covenant not to sue for patent infringement). To “grant” such a patent license to aparty means to make such an agreement or commitment not to enforce a patent against theparty.

If you convey a covered work, knowingly relying on a patent license, and the CorrespondingSource of the work is not available for anyone to copy, free of charge and under the terms ofthis License, through a publicly available network server or other readily accessible means,then you must either (1) cause the Corresponding Source to be so available, or (2) arrange todeprive yourself of the benefit of the patent license for this particular work, or (3) arrange,in a manner consistent with the requirements of this License, to extend the patent license todownstream recipients. “Knowingly relying” means you have actual knowledge that, but forthe patent license, your conveying the covered work in a country, or your recipient’s use ofthe covered work in a country, would infringe one or more identifiable patents in that countrythat you have reason to believe are valid.

If, pursuant to or in connection with a single transaction or arrangement, you convey, orpropagate by procuring conveyance of, a covered work, and grant a patent license to some ofthe parties receiving the covered work authorizing them to use, propagate, modify or convey aspecific copy of the covered work, then the patent license you grant is automatically extendedto all recipients of the covered work and works based on it.

150


A patent license is “discriminatory” if it does not include within the scope of its coverage,prohibits the exercise of, or is conditioned on the non-exercise of one or more of the rightsthat are specifically granted under this License. You may not convey a covered work if you area party to an arrangement with a third party that is in the business of distributing software,under which you make payment to the third party based on the extent of your activity ofconveying the work, and under which the third party grants, to any of the parties who wouldreceive the covered work from you, a discriminatory patent license (a) in connection with copiesof the covered work conveyed by you (or copies made from those copies), or (b) primarily forand in connection with specific products or compilations that contain the covered work, unlessyou entered into that arrangement, or that patent license was granted, prior to 28 March 2007.

Nothing in this License shall be construed as excluding or limiting any implied license or otherdefenses to infringement that may otherwise be available to you under applicable patent law.

12. No Surrender of Others’ Freedom.

If conditions are imposed on you (whether by court order, agreement or otherwise) thatcontradict the conditions of this License, they do not excuse you from the conditions of thisLicense. If you cannot convey a covered work so as to satisfy simultaneously your obligationsunder this License and any other pertinent obligations, then as a consequence you may notconvey it at all. For example, if you agree to terms that obligate you to collect a royalty forfurther conveying from those to whom you convey the Program, the only way you could satisfyboth those terms and this License would be to refrain entirely from conveying the Program.

13. Use with the GNU Affero General Public License.

Notwithstanding any other provision of this License, you have permission to link or combineany covered work with a work licensed under version 3 of the GNU Affero General Public Li-cense into a single combined work, and to convey the resulting work. The terms of this Licensewill continue to apply to the part which is the covered work, but the special requirements ofthe GNU Affero General Public License, section 13, concerning interaction through a networkwill apply to the combination as such.

14. Revised Versions of this License.

The Free Software Foundation may publish revised and/or new versions of the GNU GeneralPublic License from time to time. Such new versions will be similar in spirit to the presentversion, but may differ in detail to address new problems or concerns.

Each version is given a distinguishing version number. If the Program specifies that a certainnumbered version of the GNU General Public License “or any later version” applies to it,you have the option of following the terms and conditions either of that numbered versionor of any later version published by the Free Software Foundation. If the Program does notspecify a version number of the GNU General Public License, you may choose any versionever published by the Free Software Foundation.

If the Program specifies that a proxy can decide which future versions of the GNU General Pu-blic License can be used, that proxy’s public statement of acceptance of a version permanentlyauthorizes you to choose that version for the Program.

Later license versions may give you additional or different permissions. However, no additionalobligations are imposed on any author or copyright holder as a result of your choosing to followa later version.

151


15. Disclaimer of Warranty.

THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BYAPPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPY-RIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM “AS IS” WIT-HOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING,BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY ANDFITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITYAND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAMPROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,REPAIR OR CORRECTION.

16. Limitation of Liability.

IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRI-TING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIESAND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOUFOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSE-QUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THEPROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEINGRENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIESOR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBI-LITY OF SUCH DAMAGES.

17. Interpretation of Sections 15 and 16.

If the disclaimer of warranty and limitation of liability provided above cannot be given locallegal effect according to their terms, reviewing courts shall apply local law that most closelyapproximates an absolute waiver of all civil liability in connection with the Program, unlessa warranty or assumption of liability accompanies a copy of the Program in return for a fee.

End of Terms and Conditions

How to Apply These Terms to Your New Programs

If you develop a new program, and you want it to be of the greatest possible use to the public,the best way to achieve this is to make it free software which everyone can redistribute andchange under these terms.

To do so, attach the following notices to the program. It is safest to attach them to the startof each source file to most effectively state the exclusion of warranty; and each file should haveat least the “copyright” line and a pointer to where the full notice is found.

<one line to give the program’s name and a brief idea of what it does.>

Copyright (C) <textyear> <name of author>

This program is free software: you can redistribute it and/or modify

it under the terms of the GNU General Public License as published by

the Free Software Foundation, either version 3 of the License, or

(at your option) any later version.

152


This program is distributed in the hope that it will be useful,

but WITHOUT ANY WARRANTY; without even the implied warranty of

MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

GNU General Public License for more details.

You should have received a copy of the GNU General Public License

along with this program. If not, see <http://www.gnu.org/licenses/>.

Also add information on how to contact you by electronic and paper mail.

If the program does terminal interaction, make it output a short notice like this when it startsin an interactive mode:

<program> Copyright (C) <year> <name of author>

This program comes with ABSOLUTELY NO WARRANTY; for details type ‘show w’.

This is free software, and you are welcome to redistribute it

under certain conditions; type ‘show c’ for details.

The hypothetical commands show w and show c should show the appropriate parts of theGeneral Public License. Of course, your program’s commands might be different; for a GUIinterface, you would use an “about box”.

You should also get your employer (if you work as a programmer) or school, if any, to sign a“copyright disclaimer” for the program, if necessary. For more information on this, and howto apply and follow the GNU GPL, see http://www.gnu.org/licenses/.

The GNU General Public License does not permit incorporating your program into proprie-tary programs. If your program is a subroutine library, you may consider it more usefulto permit linking proprietary applications with the library. If this is what you want to do,use the GNU Lesser General Public License instead of this License. But first, please readhttp://www.gnu.org/philosophy/why-not-lgpl.html.

153


154

Bibliografıa

[1] Perez Querol, Gustau. Disseny i implementacio d’un laboratori de xarxes de comunicacio virtualamb acces remot i conformacio de trafic. Facultat d’Informatica de Barcelona. Proyecto Finalde Carrera. Febrero de 2011.

[2] Munoz, Jose L.; Alins, Juanjo; Mata, Jorge; Esparza, Oscar. Virtual Networks with Linux:VNUML. UPC Telematics Department.

[3] VMware. Virtualization. Virtualizacion Basics. What is a Virtual Machine? [en lınea]. 2012.[consulta: 25 de agosto 2012]. Disponible en http://www.vmware.com/virtualization/

virtual-machine.html.

[4] Smith, James; Nair, Ravi. The Architecture of Virtual Machines. Computer (IEEE ComputerSociety) 38 (5): 32–38. 2005

[5] Dike, Jeff. User Mode Linux. Prentice Hall: first edition, April 22, 2006.

[6] Davoli, Renzo. VDE: Virtual Distributed Ethernet. Department of Computer Science, Univer-sity of Bologna. Technical Report UBLCS-2004-12. Junio 2004.

[7] Departamento de Ingenierıa de Sistemas Telematicos de la Universidad Politecnica de Madridy Telefonica I+D. VNUML Project Documentation [en lınea]. Madrid, 3 de noviembre de 2008[consulta: 23 de agosto de 2012]. Disponible en http://neweb.dit.upm.es/vnumlwiki/index.

php/Docintro.

[8] Sanders, Chris. Practical Packet Analysis: Using Wireshark to Solve Real-World Network Pro-blems. No Starch Press: Second Edition, July 6, 2011.

[9] Lamping, Ulf. Wireshark’s Developer’s Guide [en lınea]. 2004-2012 [consulta 23 agosto de 2012].Disponible en https://www.wireshark.org/docs/wsdg_html_chunked/.

[10] Martın Malo, Esteban. Creacion de nuevas funcionalidades para la herramienta VNUML. Uni-versidad Politecnica de Madrid. Proyecto Fin de Carrera, junio 2006.

155

http://www.vmware.com/virtualization/virtual-machine.html

http://www.vmware.com/virtualization/virtual-machine.html

http://neweb.dit.upm.es/vnumlwiki/index.php/Docintro

http://neweb.dit.upm.es/vnumlwiki/index.php/Docintro

https://www.wireshark.org/docs/wsdg_html_chunked/

Documents

Aplicaci on web para la monitorizaci on de redes virtuales