Trabajo de Fin de Grado - UOCopenaccess.uoc.edu › webapps › o2 › bitstream › 10609 ›...

LocalizadorGráficodeDireccionesIP

MarcosMirandaRuiz 1

Trabajo de Fin de Grado Localizador Gráfico de Direcciones IP Grado de Ingeniera Informática Autor: Marcos Miranda Ruiz Consultora: María Isabel March Fecha: Junio de 2017


MarcosMirandaRuiz 2

© Marcos Miranda Ruiz Reservados todos los derechos. Está prohibido la reproducción total o parcial de esta obra por cualquier medio o procedimiento, comprendidos la impresión, la reprografía, el microfilme, el tratamiento informático o cualquier otro sistema, así como la distribución de ejemplares mediante alquiler y préstamo, sin la autorización escrita del autor o de los límites que autorice la Ley de Propiedad Intelectual.


MarcosMirandaRuiz 3

ResumenElproyectoquesehallevadoacaboeseldelacreacióndeunlocalizadorgráficodedireccionesIP.EsteproyectopertenecealámbitodelasredesdecomputadoresyalacarreradegradoenIngenieríainformáticaimpartidaenlaUOC.Conestaherramientaloquesepretendeesqueunusuariopuedalocalizarundominioo IP en el mapa mundial y que de esta manera obtener información acerca de laubicación físicadeaquelloque sequierebuscar. Laherramienta tambiénpermite laopciónderealizarlabúsquedamediantetraceroute,lacualesunadelasbasesdedeesteproyectoyquenospermitenosolamentevisualizarenelmapaladirecciónfinalsino que también los saltos que ha dado en cada dispositivo y su ubicacióncorrespondienteenelmapa,estonosayudaavisualizarlarapidezderespuestadeloscontenidosdeInternetyelviajequesetienequehacerhastallegaraellos.La herramienta tiene dos partes generales que podemos distinguir claramente, unainterfazgráficaclarayfácildemanejarparaelusuarioquenospermitirávisualizarlasconsultasquerealicemosyunapartedeservidorqueseencargaradeprocesartodaslaspeticionesyhacernosllegarlainformaciónquepidamos.Unaveznosadentremosenelproyectoexplicaremosambaspartesendetalle.Sinmáspreámbuloscomencemosconlamemoria,queesperoqueresulteentretenidaytambiéncargadadeconocimientosydatosinteresantes.


MarcosMirandaRuiz 4

Índice

Resumen..............................................................................................................................3

Ilustraciones.........................................................................................................................5

1. Introducción................................................................................................................61.1 PuntodePartida..............................................................................................................61.2 Objetivos.........................................................................................................................71.3 Enfoque...........................................................................................................................71.4 Planificación....................................................................................................................81.5 ProductosObtenidos.....................................................................................................101.6 OtrosCapítulos..............................................................................................................11

2. TecnologíasyConceptosTeóricos............................................................................122.1 Traceroute.....................................................................................................................122.1.1 FuncionamientoInterno................................................................................................122.2 Geolocalización.............................................................................................................152.2.1 MaxMind.......................................................................................................................152.3 DNS................................................................................................................................17

3. Implementación.........................................................................................................181.1 ComponentesdeTerceros............................................................................................181.2 AmazonWebServices...................................................................................................191.3 PaginaWeb...................................................................................................................241.3.1 ConfiguraciónPaginaWeb............................................................................................241.3.2 DesarrolloPaginaWeb..................................................................................................271.4 Servidor.........................................................................................................................321.5 TraceroutePropio.........................................................................................................36

4. Pruebas......................................................................................................................391.1 PruebasdeDominio......................................................................................................391.2 PruebasdeTraceroute..................................................................................................39

5. Conclusiones..............................................................................................................41

6. Glosario......................................................................................................................42

7. Bibliografía.................................................................................................................43


MarcosMirandaRuiz 5

IlustracionesIlustración1-DiseñoProductoObtenido.......................................................................11Ilustración2-EstructuraDatagrama..............................................................................13Ilustración3-RespuestaTTL...........................................................................................14Ilustración4-PreciosMaxMind......................................................................................16Ilustración5-UsoGratiutoMaxMind.............................................................................17Ilustración6-ResumenGastosAWS..............................................................................23Ilustración7-AlmacenamientoS3.................................................................................25Ilustración8-ConfiguracionesCloudFront.....................................................................25Ilustración9-RedireccióndeDominio...........................................................................26Ilustración10-CORSCloudFront....................................................................................26Ilustración11-CORSS3..................................................................................................27Ilustración12-PáginaBienvenida.................................................................................28Ilustración13-PáginaPrincipal......................................................................................28Ilustración14-ZoomBotones........................................................................................29Ilustración15-JsonTreesinexpandir.............................................................................30Ilustración16-JsonTreeexpandido................................................................................30Ilustración17-JsonTreeBúsqueda.................................................................................31Ilustración18-RepresentaciónBusquedaTraceroute...................................................32Ilustración19-VisionInstanciasEC2..............................................................................33Ilustración20-ConexiónSSH..........................................................................................33Ilustración21-ConfiguraciónNginx...............................................................................34Ilustración22-App.js......................................................................................................35Ilustración23-RepositorioGitlab...................................................................................36Ilustración24-CódigoTraceroutepropio......................................................................38Ilustración25-ImagenError...........................................................................................39Ilustración26-Búsquedaipv6........................................................................................40Ilustración27-Búsquedaipv4........................................................................................40Ilustración28-RevisiónTraceroute................................................................................40


MarcosMirandaRuiz 6

1. IntroducciónPara iniciarnos en el proyecto es bueno que tengamos una idea general de cómofuncionalageolocalización,queesyparaqueseutiliza,yaqueenmiopiniónesunaherramientamuyutilizada, peroque casi pasadesapercibida apesarde serde granimportanciayofrecerunaltovalorañadidoadistintosproyectosennumerososcampos.La geolocalización explicada demanera sencilla consiste en detectar desde donde ohaciadondevadestinadaunapetición,ydependiendodelaubicaciónqueconsigamosextraer de esta dirección de origen o destino seremos capaces de tomar decisionesespecificas,personalizandolarespuestaparadistintasregiones.Lamayoríadewebsdehoyendíadisponedeunaherramientadeestetipo,siempretrabajandoy siemprecomprobandodesdedonde se conectan losusuarios,hastaenalgunoscasosalmacenandoestainformación.Lapreguntaquenospuedesurgirahoraes¿Porqué?y¿Paraquenossirveestainformación?.Puesesrelativamentesencillo,larespuestapasadesdeofreceraesteusuariolapaginaenunidiomauotrodependiendodesdedondeséesteconectando,hastaallegaracasosmáscomplejoscomopuedenserlaslimitacionesdecontenidoporregiónoestadísticasdeventasparasaberenquepaísoregióninvertirmásodesplegarunacampañademarketingmáspotente.Conesta introducciónpodemospasaradescribir lospasos inicialesquesehandadoparallevaracaboesteproyecto,exponiendotambiénlasideasyrazonamientosparadecantarseporunatecnologíauotra.

1.1 PuntodePartida

Como ya hemos anticipado en la introducción, existen miles de casos de usodistintosparalalocalizaciónmedianteIP,yenrealidadesunaherramientanecesariaymuyactualyaqueespecialmenteconelcrecimientodelosserviciosdestreamingylanube,lasempresascomoNetflixestáninvirtiendograndescantidadesdedineroenpoderdetectardedondeprovienelaconexióndeunusuario,inclusoatravésdeproxies, para ofrecerle el catalogo que le corresponde y ahorrarse posiblesproblemasdecopyright.Nosotros en este proyecto no llegaremos tan a fondo como los casos descritosanteriormente,sinoqueutilizaremosestatecnologíaparamostrardeunamaneravisual ymás sencilla los pasos y saltos de servidor que se producen cuando nosconectamosconalgúnsitioweb.La decisión por decantarme a realizar este proyecto fue tomada a raíz de queconsidero que es un temamuy interesante, y que sin duda es una opción paraentendermejorelfuncionamientointernodecómofuncionanloscomponentesqueutilizamosyvemosadiario.


MarcosMirandaRuiz 7

Otrodelospuntosquemellamólaatenciónesqueyonoconocíaningúntipodeherramientadeestetipoquetuvieseunaspectovisual,siemprelohabíaconocidocomounaseriedecomandosatravésdeunaterminal,unarepresentaciónmásquenada orientada para informáticos o personal técnico que la pudiese utilizar yentender,enestecasomegustaelretodepoderacercarestatecnologíaalalcancedecualquierpersona,paraquelapuedanprobaryverconsuspropiosojos.Para poder hacer accesible esta tecnología a todo elmundo, he pensado que lamejorformadellevarloacaboseriahacerloatravésdeunapaginaweb,yaqueasítodo elmundo podrá acceder a ella sin importar si quiera el sistema operativo,bastaracontenerunnavegadorinstalado.CreoqueeslaopciónacertadayaqueenlostiemposquevivimostodoseempiezaaimplementarenlanubeylosserviciosdeSaaSestánalaordendeldía.

1.2 ObjetivosComo objetivo principal de este proyecto se quiere lograr que la herramientadiseñadapuedaserfuncional,atractivaysencilladeutilizaryquedeestamaneralogrelocalizargráficamenteenelmapalaubicaciónmásaproximadaposibledeunadirección IPodominio. Sedará la opción al usuariode seleccionar y utilizar unafuncionalidadmásavanzadacomoloeslaopcióndetraceroute,laquemostraralossaltos que se han dado de servidor en servidor y al igual que la opción básica,tambiénlosrepresentaraenelmapa.Elcontextoglobaldeesteproyectosebasaraenlasredesdecomputadores,siendoesta la base de el funcionamiento, pero que a su vez implicará el aprendizaje ydesarrollodetareasrelacionadosconlaprogramaciónydiseñodepaginasweb,alavezqueconocimientosdearquitecturayservidores.Algunosdelosobjetivosmarcadosquesehandecumplirson:

• Aplicaciónsencillaeintuitiva.• FuncionamientogarantizadoennavegadoresChromeyFirefox.• Menormantenimientoposible.• Menorcosteposiblededesarrollo.• Aplicaciónágilyderespuestarápida.• Aspectovisualatractivo.

1.3 Enfoque

Antesdepoderplanificarelproyectosehannecesitadorealizarunospasospreviosparaobtenerunaideageneraldecómoenfocarlaherramienta.He comenzado por investigar que herramientas podría utilizar y cuales serán lasmejores, comparando varios aspectos como rendimiento, coste y facilidad deutilización,todoestoconlasuitedeAmazonWebServices(AWS)enmente,yaquequeríaqueelproyectofuesenovedosoencuantoatecnologíasutilizadas.Dentrode


MarcosMirandaRuiz 8

esteconjuntodeherramientassehaninvestigadovariasopcionesyaquenoexistíasolouncaminoparapoderrealizarlo.Desde el comienzo de el proyecto se tenia claro que tenia que existir unarepresentaciónvisualdelainformaciónporloqueinvestigueenvariassolucionesdemapasyseescogióunarutayunproveedordemapasconcretoconelquesepodríanrealizarlasfuncionesnecesariasparaestatarea.Asímismosetomoladecisióndequeotroselementosolibreríasutilizarquefuesenlasmásapropiadasparaelproyectosiemprefijándonosenutilizarcomponentesconlicenciasdeusocompletamentegratuitasylibresdeuso.Con estas tecnologías escogidas y herramientas auxiliares estaba seguro de quepodía satisfacer todas las necesidades de la herramienta y que podría construirtodosloscomponentesquesehabíanprevistoyespecificado.Sabiendoestopudeseguir con la fase de diseño del proyecto, en la que decidí como estaríanentrelazados los elementos que compondrían la herramienta en el ámbito de laarquitectura,asícomolosprimerosdiseñosbásicosyesbozosdelaspectoglobalquetendríalaherramienta.Durante la fase de implementación se pusieron estas tecnologías escogidas enpracticaparadesarrollartodaslasfuncionalidadesqueerannecesariasparallevaracaboesteproyecto.Aquíyadefiniríamosdospartesfundamentalesparaelproyecto,una destinada para la interfaz con la que el usuario final interactuará y otraencargadaderealizartodalagestióndelaspeticiones.Una vez tuviese la implementación lista, podría realizar varias pruebas paraasegurarmedequeelresultadoqueobtenemoseselquesedesea.

1.4 Planificación

Enestepasosedescribirálaplanificacióninicialqueserealizoantesdecomenzaradesarrollarlaaplicación.Deestaplanificacióninicialalaqueluegosehallevadoacabo existen pequeñas diferencias ya que se han ido encontrado problemasinesperadosyquehan supuestouna ligeradesviaciónde losplanesoriginales.Apesardeestohasidounabuenaguíaparamantenermeenlosplazospropuestosyestablecerunacargadetrabajoequilibradaalolargodelcuatrimestre.Tarea1:Duración:2semanas(5Marzo-19Marzo)Descripción: Proceso de búsqueda de información, identificación de posiblesobstáculos,escogerlasmejorestecnologíasygenerarlaideaglobaldelproyecto:1.1 – Tema relacionado con servidor donde crear la pagina web que acople

correctamenteellocalizadorgráfico.1.2 –Búsquedadeautomatizacióndedesarrolloparaunamayorfacilidadalahora

dehacereldeployenelservidor.


MarcosMirandaRuiz 9

1.3 –Posibilidaddecrear lapaginawebbasadaeneventosconunaarquitecturaserverless.(PensandoenlasuitedeherramientasdeAWS)

1.4 –Escogerlenguajedeprogramacióndelapagina,dondeacoplarellocalizadorgráfico.

1.5 –Búsquedadeopcionespararealizarlarepresentacióndelmapaglobal(GoogleMaps,OpcionesOpenSource…)

1.6 – Obtención de la información a representar, ya sea a través de Tracert,MaxMind,whoami,DnsLookupuotrasposiblessoluciones.

Objetivos:Asentarlasbasesyescogerlastecnologíasautilizarquenospuedandarelmejorresultadoparaesteproyecto.Tarea2:Duración:3semanas(19Marzo–9Abril)Descripción:Creacióndelservidoryprocesodeautomatizaciónconrepositorios:2.1–CreacióndelservidoryfuncionamientodeaccesoyvisitadesdeunaIPPublica.2.2–Automatizacióndeservidorparaquecojaelultimocódigodesdeelrepositorio.2.3–Asegurarelfuncionamientocorrectodelservidor2.4–PosiblesincronizacióndelBackendconalgunabasededatostemporalparatenerporejemplolosresultadosdelas10ultimasIP’s.Objetivos: Tener el Backend, la parte de servidores y todas las configuracionesrealizadasparasercapazdehacerelhostingalapaginaweb.

Tarea3:Duración:5Semanas(Abril9–14Mayo)Descripción:Comienzoprogramacióndelapaginaweb,unaprimeraversión,conlaposibilidaddeutilizarunbootstrapgratuito:3.1–Comienzodelaprogramaciónweb.3.2–Conseguirmostrarunmapa.3.3–IntegrarunbotóndellamadaparaelrastreodeIPquemuestrelosresultadosObjetivos:Enesteperiododetiempoesperoobtenerunaprimeraimplementacióndelapagina,muybásica,sinadornos,meramentefuncional,conposibilidaddequeelrastreonosemuestretodavíaenelmapaTarea4:Duración:2Semanas(14Mayo–28Mayo)Descripción: Finalización de la pagina web, añadir detalles y asegurar elfuncionamientoyelplotdelasIP’senelmapa:4.1–Mostrarlosresultadosobtenidosporelbotónenelmapa.4.2–Mejorarpresentaciónyvisualización.


MarcosMirandaRuiz 10

Objetivos: Obtener una pagina web presentable y funcional, casi lista para laentrega.Tarea5:Duración:2Semana(28Mayo–11Junio)Descripción:Repasogeneraldelapaginayposiblesoluciónaerroresquesepuedanencontrarporelcamino.Estetiempotambiénsepodráutilizarcomocomodínencasodequealgunadelastareasanterioresnecesitealgomásdetiempo.5.1–Repasocompletodelapagina5.2–Comprobacióndefuncionamientoycorrectoaccesodesdeotrosequipos5.3–Preparacióndelaentregadelproducto.5.4–Laideaesquelamemoriadelelproyectosevayacompletandopocoapocosegúnsevaavanzandoconeltrabajoparaquenoquedeparaelultimominuto,enestasdossemanastambiénsedaráunrepasoalamemoria,correccióndeerroresycompletaralgúndetallequepuedafaltar.Objetivos:Entregadeproductoymemoriaparael11deJunio.Tarea6:Duración:1Semana(11Junio–18Junio)Descripción:EntregadelaPresentación.6.1–Dedicaciónexclusivaalacreacióndelvideodepresentacióndelelproyectoparasuposteriorentrega.6.2–SeutilizaralacapturadepantallaQuickTimeparagrabarelvideoalavezquesevacomentandoyexplicando.Objetivos:Realizar la entregade laPresentación cumpliendo todos los requisitosexigidos.

1.5 ProductosObtenidos

Despuésdeeldesarrollodeesteproyectoseesperaobtenerunproductoenformatodepaginaweb, enella encontraremos la herramientadesarrolladadesde la cualseremoscapacesderealizarbúsquedastantodedominioscomodedireccionesIPyen cuestiónde segundosobtenerun resultadovisualdeestabúsqueda,quenosmuestre información sobre la búsqueda introducida, incluida la representacióngráficaenelmapaquenosofreceráunamejorexperienciadeusuario.En la herramienta podremos escoger varias opciones, según queramos realizarbúsquedasmáscomplejasincluyendolaopcióndetracerouteosinella.

Aquí tenemos una imagen de el producto final obtenido. Su funcionamiento ycomportamientoaldetalle sedescribiránenotroscapítulosmásavanzadosde lamemoria.



Comopodemosvereldiseñoesbastantedirectoysencillo,tenemosunasecciónparaintroducirlabúsqueda,elmapaquerepresentaraelresultadodeestamismayuna tabla que nos mostrara nuestras ultimas búsquedas así como detalles y laposibilidaddevolveraverenelmapaestamismabúsquedasintenerquevolverarealizarla.1.6 OtrosCapítulos

En el capitulo dos de esta memoria “Tecnologías y Conceptos Teóricos”describiremos un poco las tecnologías utilizadas, así como el porque de escogerprecisamente cada una de estas tecnologías. Muchos de estas serán las que seutilicendurantelaelaboracióndelproyecto.En el capitulo tres, llamado “Implementación” encontraremos la explicación decómosehanrealizadolasdistintaspartesdelproyecto,abordandolaspartesmástécnicas y dividiendo la herramienta en varias partes para una explicación mássencillaymodular.

Ilustración1-DiseñoProductoObtenido



Enelcapitulocuatro,llamado“Pruebas”encontraremosunaseriedepruebasparalademostracióndelfuncionamientodelaplataformaeselcorrecto,asícomounaseriedecomprobacionesdeerrores,quedeberánaparecercuandoelusuariorealicealgunaacciónincorrectaElultimocapitulocorrespondea las“Conclusiones“dondeseexpondrás las ideasgeneradasapartirdelacreacióndeestaherramienta.

2. TecnologíasyConceptosTeóricos.En este apartado trataremos de explicar en mayor profundidad las tecnologías yconceptosteóricosqueformanlapartefundamentaldelproyecto.

2.1 Traceroute

TraceroutealigualquelasuitedeherramientadeAmazonWebServiceshasidounode los pilares entorno al cual se ha construido el proyecto. Traceroute es unaherramientaquenospermitedesgranarlossaltosdeservidorquedaunabúsquedadedirecciónalserrastreada,enesteapartadoexplicaremosenprofundidadestaherramientaysufuncionamientoaniveldeprotocolosdered.En los tramos finales de elaboración de este proyecto se me comunicó que seesperaba la implementación del traceroute a nivel de sockets. Inicialmente losobjetivosquedefiníestabancentradosenotrastareasporloquenohealcanzadoaintegrarestapartedentrodelproyecto.Trassuanálisissedecidiódejaresteaspectocomounamejora futura, aunqueesta explicadaen la página38 como sepodríahaberrealizadoademásdeextractosdecódigoquesimularanelfuncionamientoasícomolaslibreríasnecesariasdesocketsyconexionesparallevarestafuncionalidadacabo.

Comenzaremos por explicar el funcionamiento interno del traceroute yposteriormentecontinuaremosexplicandoelrestodetecnologías.2.1.1 FuncionamientoInternoLaherramientatraceroutealcomunicardatagramasyperteneceraunsistemadecomunicaciónabstraídoencapasobedeceelmodeloTCP/IP.Loquesignificaquecomocualquierotropaquetequecirculaporinternetposeeunaestructuradeenvíodedatagramaspredefinida.Deberemosentenderprimeroestaestructuraparapodercontinuarconlaexplicacióninternadeeltraceroute.Acontinuacióntenemosundiagramadelaestructurainternadeundatagramadelosenviadosportraceroute:



Deestediagramayparaestaexplicación,elcampoquemásnosinteresaydelquemáshablaremoseselcampode8bitsllamadoTiempodevidaoTimetoliveeningles,queapartirdeahorallamaremosTTL.

ElcampoTTLapesardellamarseTiempodevidanonosindicaeltiempodevidaensegundosdeestedatagrama,sinoquenosindicaenmáximonumerodesaltosqueestepaquetepuededarhastaserdescartado.

PorloquesiunpaquetesaledenuestroordenadorconunvalordeTTL=15dará15saltosantesdeserdescartado,encadasaltointermedioqueserealiceelvalordeTTLserádisminuidoporuno,asíhastaobien llegaraldestinofinalobienqueelpaquete sea descartado. Cuando el paquete es descartado, el ultimo dispositivodondeseencontrabaseráelencargadoenenviarunarespuestaalladireccióndeorigen que leerá “ICMP TTL excedido en transito” de estamanera sabremos ladireccióndeelultimosaltodondesehaquedadoelpaquete.

Lapreguntaquenospuedesurgirahoraes,comosabetraceroutelasdireccionesdetodosestossaltosintermedioscuandosoloelultimodeellosmandaunarespuestaqueincluyesudirección.LarespuestaesqueutilizamosestafuncionalidadquetieneTTLdemandarunarespuestaconunmensajeparapasarindividualmenteportodoslosdispositivosintermediosdeformaquecreamosunbuclequevayaaumentandogradualmenteelvalordeTTLdesalidadesdenuestroordenador,deestamanera

Ilustración2-EstructuraDatagrama



sabremos cada uno de los saltos ya que todos ellos fallaran y devolverán sucorrespondienterespuesta,hasta llegaralfinalquenosdevolveráun“ICMPEchoReply”,unaimagenexplicativapodríaserlasiguiente:

Ilustración3-RespuestaTTL

AlirincrementandoelTTLvemosqueelpaquetecadavezllegamáslejosyvamosformadounlistadodedispositivosporlosqueyahapasado,yasíseguiráhastaelnumero máximo de TTL que hayamos puesto o hasta obtener una respuestapositiva.

EnlaexplicaciónhastaahoranoshemosbasadoendescribirelconceptoTTL,perodebemos saber que existen distintos tipos de traceroute que utilizan distintosprotocolospara llevaracabolafunción.Duranteelcomienzode laexplicaciónyhastaahorahemosasumidoutilizarelprotocoloICMP,peroexistenotrasopcionesquevaríanligeramentedefuncionamiento,aunquetodassebasanenTTL.

Diferentesprotocolosparatraceroute:

• UDP:

ElprotocoloUDPfuncionadeunamaneramuysimilaralprotocoloICMP,yesquecuandoagotalossaltosTTLdevuelveelmensajede“TTLTimeExceeded” y cuando llega a destino final devuelve “ICMPDestination/PORT unreachable”. UDP es el protocolo por defectoutilizadoporeltraceroutedeLinuxyporlotantoelquesepondráenusoenesteproyecto.

• ICMP:ElprotocoloICMPesmuysimilaralUDPdescritoanteriormente,loúnicoquecambiaeselmensajedevueltounavezsehallegadoadestino,enestecasosedevuelveun“ICMPEchoReply”. ICMPeselprotocolopordefectoutilizadoporeltraroute(tracert)deWindows.

• TCPElprotocoloTCPseutilizayaquelamayoríadedispositivosentremediasnospermitenutilizarelpuerto80utilizadoparatraficoTCPyestonosaseguraquelospaquetesenviadosnoseanbloqueadosporelfirewall.EstaopcióndetraceroutesebajaenmandarpeticionesTCPSYNporelpuerto80.



2.2 Geolocalización

LageolocalizaciónesunadelasbasestambiéndeesteproyectoyespecíficamentetrataremoscongeolocalizaciónbasadasendireccionesIP.Esto consiste en asignar a una dirección IP una ubicación geográfica, por lo quecuandodestinamoscierta IPaundispositivo,este tieneasociadoaelunpaísdeprocedencia,unaregiónoestado,unaciudade inclusoenocasiones informaciónmás detallada como puede ser el barrio o la calle, incluso puede contenercoordenadas pertenecientes a localización GPS. Existen otras opciones degeolocalización como puede ser DNS LOC, la cual funciona demanera que cadadominiotieneasignadounparámetroLOCqueindicasuubicaciónencoordenadas,aunquesehaoptadopornoutilizarestatecnologíayaquenotodoslosdominiostieneasignadosunregistroLOC.Existen varios centros o empresas en el mundo encargados de asignar estainformaciónquesonalasqueluegopodemosconsultaraquienpertenececiertosdominiosopodemosbuscarinformaciónacercadeellos.TodaestainformaciónacercadelageolocalizacióndeciertasIP’sestáalmacenadaenbasesdedatos,existennumerosasopcionesybasesdedatosdelasquepodemosescogerparaintentargeolocalizarunaIP.Existenalgunasopcionesdepago,yotrasgratuitastododependiendodelgradodeexactitudquequeramosobtener,paraesteproyectoheoptadoporlaopcióngratuitadeunadelasempresasmásconocidasquenosproporcionasolucionesdeestetipo,llamadaMaxMind.2.2.1 MaxMind

MaxMindcomocomentabaantesofrecedistintosgradosdeprecisión,aquídejounaimagenconlospreciosquenosofrecenlosserviciosdepagoyelniveldeexactitudque sepuede conseguir con lasbúsquedas, paranuestroproyecto cualquieradeestosniveleserademasiadocostosocomoparapoderutilizarlo,estámásorientadoaempresas.



ParanuestrocasohemosutilizadolaversióncompletamentegratuitadelabasedadatosquenosofreceMaxMind,yquehemosacabadoincorporandocomolibreríaal proyectodespuésde compilarladebidamente, en supaginawebexistenotrosejemplos de cómo utilizar la versión gratuita de su base de datos con variosejemplos.

Ilustración4-PreciosMaxMind



Una vez tengamos la librería cargada, lo único que deberíamos es llamar a losmétodoscorrespondientesparaquedeunaIPpodamosobtenerunaubicación.

2.3 DNS

DurantetodaestamemoriayalolargodelproyectovamosahablarmuchasvecesdeIP’sodominiosyparecequeseanlomismoysetratendelamismamanera,peroenrealidadnoescompletamenteverdad.EsprecisamentegraciasaelDNS(DomainNameSystem)quepodemospermitirnosel lujo de comparar IP’s con dominios. DNS es una base de datos que almacenanombresdedominio,cadaunoasignadoaunaIP,poresocuandopreguntamosporunadirecciónespecifica, loque sucedeesque seaccedea labasededatosquecontienelosDNSyenellasebuscaaqueIPcorrespondeestenombrededominioparapodernavegarhastaél.Cuandonavegamospor internete introducimosunadireccióna laquequeremosnavegar no pensamos que esta dirección, una vez introducida, se traduce a unadirecciónIPqueeslaqueposteriormentecontactaconelservidoradecuadoynosdevuelvelainformaciónasociada.

Ilustración5-UsoGratiutoMaxMind



Esta tecnología también la hemos implementado en el proyecto y cuandointroducimos un dominio este es traducido para posteriormente poder hacer eltraceroutesobreél.

3. ImplementaciónElplanteamientoinicialdelproyectosequisoorientardetalmaneraqueelproductofinalobtenidofueseyobedecieseunaarquitecturaserverless,lacualdescribiremosyexplicaremosunpocomásadelanteenestaseccióndeimplementación.Estoimplicabacrear una pagina web estática, que activase eventos cada vez que un usuariointeractuabaconella.Este primera visión duro poco ya que se encontraron algunos problemas eincompatibilidades entre la arquitectura serveless que se pretendía utilizar y lasherramientasdetraceroutequeibanaserlabasedeelproyecto,porloqueseoptoporlacreacióndeunservidortradicionalparalaejecucióndelastareasdelapaginaweb.TodoestoseenfocodesdeunprincipioutilizandolasuitedeherramientasdeAmazon(AWS),lacualhasidotambiénunadelaspiezasclavesparajuntartodaslaspartesdelproyecto.ParaeldesarrollodelapaginawebestáticaseutilizaranloslenguajesdeHTMLyCSS,juntoconpartesdeJavaScript,pertenecientesaNodeJSyjQuery.ParalapartedeservidorseutilizaratambiénNodeJS,únicayexclusivamente.Se han escogido estos lenguajes porque creo que son los quemejor se adaptan encuantoapesadez,ligerezayvelocidaddeejecución,aprovechandoqueJavaScriptesunlenguaje que no necesita compilado y que funciona realmente bien para tratar lasrespuestasdeobjetosdeunamaneramásrápidaycómoda.Acontinuaciónexplicaremoslasimplementacionesquesehandebidorealizarparaelconjuntoglobaldeesteproyecto,analizandodetalladamenteeltrabajorealizado.

1.1 ComponentesdeTerceros

Parallevaracabolatotalidaddeelproyectosehanutilizadovariasfuentes,libreríasyherramientasdeterceros.Paratodasellassehaaseguradoqueséestatrabajandobajo la licenciaMIT,quenospermiteutilizardeunamanera totalmentegratuitaestaslibreríasosoftware.Todasellasserántambiéncitadascomocorrespondealfinal de lamemoria en la bibliografía, con un enlace a la fuente en cuestión. Acontinuaciónrealizareunlistadodelosdistintoscomponentesdetercerosqueheutilizadoasícomoconunapequeñadescripcióndeloquehanaportadoalproyecto:

• AWS(AmazonWebServices)



Se han utilizado varias herramientas de la suite de Amazon para esteproyecto:o S3:Utilizadoparaalmacenajeyalojamientodelapaginawebestática.o DynamoDB:Basededatosnorelacionalutilizadaparaalmacenartodas

lasbúsquedasquesehacenatravésdelaaplicaciónypoderofrecerelhistorialdeellas.

o EC2: Instancias de servidores de diferentes tamaños y sistemasoperativos, utilizada para el procesado de todo el back-end de laaplicación.

o CloudFront: Servicio de red de entrega de contenidos globales, paraacelerarlaentregademisitiowebatodoelmundo.

• Freenom: Proveedor de dominios web donde he escogidowww.marcosmirandatfg.tkpararedirigirelCloudfrontyquelapaginatengaunaURLdelaquenospodamosacordar.

• Leaflet: Librería de JavaSript totalmente open-source y gratuita que nosservirádemapainteractivoparamostrarlasubicacionesdelasbúsquedas.

• Bootstap:FrameworkenJavaScriptquenosayudaadesarrollarpaginaswebconunpocomásdeestiloyfacilidadalutilizarfilasycolumnaspredefinidas.

• MaxMind: Es el servicio en este caso en formato de librería que nosproporcionaconunabasededatosqueesdedondesacaremoslaubicaciónylarespuestaalasbúsquedasintroducidas.

• Gitlab:Serviciodealmacenajedecódigo,comocualquierotrorepositoriogit,quenossirveparamantenernuestrocódigoalmacenadoenlanube,deestaforma me ha sido más fácil sincronizar los cambios en el código con elservidor.

• DataTables:PlugindejQueryquenosayudaamostrarlatabladebúsquedasdespuésderecogerladelservidoroderealizaralgúncambiosobreella.

• SweetAlert2:LibreríaJavaScriptparapersonalizarlasalertasdemensajesdeerroresydeoperaciones.

• Traceroute:Libreríaparaayudadeutilizacióndetraceroute,que invocaalcomandotraceroutedelsistema.Sehautilizadoparaconseguirylimitarlostiemposdeltracerouteparaquefuncionedelamaneramásrápidaposible,yaqueelprocesopordefectoesunpocolento.

• Particles.js:JavaScriptenformatodecanvasqueayudaaaplicarelestilodelpunteroenlapaginadebienvenida.

1.2 AmazonWebServices

LautilizacióndeAWSenelproyectohasidoclaveyaquealquererorientareldiseñoaunapaginaweb,necesitabavariasherramientas,lascualesnodisponía.MiideainicialerautilizarunacombinacióndeherramientasdeAmazonparagenerarunproyectoqueobedecieselaarquitecturaserverless,esdecir,quetuviésemosunapaginawebsinningúntipodeservidorcorriendodetrásdeella.Elplanteamientodeesta idea generaba una gran cantidad de beneficios para el proyecto, como porejemplo la alta velocidad que nos proporcionaría utilizar las herramientas deAmazondetrásdeunaVPC (VirtualPrivateCloud), yaqueal seruna red interna



privada,laspeticionesentrelapaginawebyelgeneradordeeventosLambda,quees la parte que nos facilitaría que la arquitectura fuese serverless, serian casiinstantáneas.Otraventaja seríael ahorroencostesymantenimiento, yaquenoexistenservidoresquemantener.Explicandounpocomásenprofundidadestatecnologíaserverlessylaherramientaque nos lo proporciona, podemos decir que el servicio Lambda de la suite deherramientasdeAmazonnosproporcionaunaopciónmuynovedosadeconstruiraplicaciones, elementos y paginas web si tener la necesidad de usar servidores.Simplementeelusuariointeractuaríaconlapaginawebcomosiempre,sinembargocuandorealizaseunaacción,estoinvocaríaunaLambda(unevento)quedesplegaríatoda la infraestructura necesaria para llevar a cabo la operación y una vez hayaconcluidoyretornadolarespuesta,esteeventodesaparecería.Comocomentaba,enuninicioestaideameparecíalamejorparallevaracaboelproyecto,ycomencéinclusoaelaborarla,peroprontomedicuentadequeexistíaunfalloconelquenocontaba,esteserviciodeeventosoLambdanomepermitíaejecutarlasfuncionesnecesariaspararealizareltraceroute,lacualeralabasedelproyecto, así que tuve que rectificar y replantearme un poco la estructura yarquitecturaquedebíautilizar.Trasestefallo,penséencualserialasegundamejoropcióndisponibleconlaqueproceder.Trasvalorarmúltiplesposibilidadesestaresultoserseguirutilizandounade las herramientas que utilizaba inicialmente, S3, que es un servicio dealmacenamientodenosofrecealmacenarficherosdentrodeélyalaveznosdalaposibilidaddecrearunapaginawebestáticaalojadaenestemismoservicioformadaporlosarchivosalmacenadosenella.LaherramientadeS3estuvopresenteenmiplanteamientoinicialporlorealmentenosufrióningúncambioysepudomantener.LaherramientadeS3enelcasodealojarunapaginawebestáticatambiénintegraotroservicioqueesindispensableparaqueelcontenidodeestapaginaweb,quehadeserpublicollegueatodoslosrinconesdelmundoyseavisibledesdenuestrosnavegadores, este servicio se encarga de cachear contenidos, distribuirlos, ynumerosasopcionesmásquepodemosimplementarcomopuedensercontrolderegionesobloqueodeaccesosindeseadosyprevencióndeataques.EsteserviciosellamaCloudFront,ycomoveniacomentandoesunserviciodereddeentregadecontenidoglobal(CDN)quecomoventajapodemosobservarquenodispone de ningún limite de uso, lo podemos usar tanto como queramos, yobviamentepagaremosporelusoquerealicemosdeello,aligualquecontodaslasherramientasdeAWS.En lapropuesta inicialera lapaginawebalojadaenS3 laqueeraresponsabledecontactareinvocaralserviciodelambdas,enviandounosdatosyesperandootrosde respuesta, en cambio ahora con esta segunda versión arquitectónicaintroduciremosunservidormástradicional,queharálasfuncionesdelambda.



EsteservidorpertenecealaherramientatambiéndeAmazonllamadaEC2,laquenos ofrece crear una serie de servidores con distintas capacidades y distintascaracterísticas,segúneltraficoylasprestacionesquevayamosanecesitar.Yoparaesteproyectoheoptadoporlaopciónmáspequeñaposiblellamadat2.microquecuentacon1CPUde2.5GHzIntelXeonFamilyy1GBdememoria.Enestainstanciadeservidortambiénsenosdalaopcióndeescogerquetipodesistemaoperativoqueremos,desdeunaversiónpropiadeAmazonLinuxhastaWindows,pasandoporlasmásconocidascomoUbuntu.Estaultimaeslaqueyoheescogidoparaalojarmiback-endytodoelcódigoqueresponderáalasllamadasdetracerouteydiferentesfuncionalidades. En el apartado de implementación explicare más a fondo lainstalacióndelservidorysuproceso.Las diferencias entre la arquitectura mediante lambdas y la más tradicionalutilizandoservidoressaltanalavistayesqueenlaprimeranuestraarquitecturasegeneracuandoesnecesariaypermanecedurmienteysinningúntipodecostesinoseutiliza, yen la segunda totalmente loopuesto, siempre tendremosel servidorcorriendoyalertaesperandollamadasparaproducirunarespuesta,conelcostedemantenimientoqueestosupone.Poresodesdeuniniciodecidíorientarmeporlaarquitecturaserverless,hastaverquenoibaaserposible.LaultimaherramientadeAmazondelaquehablaremosesDynamoDBqueesunabase de datos no relacional que hemos utilizado para guardar las búsquedasrealizadas a través de la pagina web. A cada búsqueda realizada le estamosasignando un uuid auto generado para que cada búsqueda sea únicaindependientementedesi loquesehabuscadoes lomismoono.Unuuidesunidentificadorúnicouniversalqueseutilizaprecisamenteparapoderdiferenciartodotipodebúsquedasoparámetros.EnnuestrabasededatosporlotantoutilizaremoscomoclaveestecampoalquehemosdenominadoID.Sinoloutilizásemosasínosabríamosdiferenciardosbúsquedasiguales.Tambiéncadaunadelasbúsquedascuenta con su sello horario, que luego a la hora de mostrarlas en la tabla nospermitirá que la ultima búsqueda siempre este arriba, ordenándolas demaneradescendenteporhora.HabiendohabladodelastecnologíasutilizadasdentrodelasuitedeherramientasdeAmazonWebServicesmepareceinteresantesaberqueprecioyquecostestieneutilizarestainfraestructura.AntesdecomenzaradesgranarcifraporcifraloscostesquetienenlasherramientasutilizadasdebemossaberalgomuyimportanteyquehasidocienporcienlarazóndeorientaresteproyectohacialasuitedeAWS.EstarazónesqueAmazoncuentaconunserviciodecapagratuitaporelcualmuchasdesusherramientasnotienenuncostepasadociertogastooconsumoendatos,uotrasquetambiénseleañadeelfactortiempodepoderutilizarunserviciogratuitamentehastatalfecha.Estomehapermitidocrearelproyectocasideformacompletamentegratuita.Acontinuacióndescribiréloslimitesdelacapagratuitadecadaunodelosserviciosutilizados:



• S3:

o 5GBdealmacenamientoestándar.o 20.000SolicitudesGet.o 2.000SolicitudesPut.o Esta capa gratuita vence a los 12 meses a partir de la fecha de

inscripción.

• EC2:o 750Horaspormesdeusodeinstanciat2.micro(laqueseutilizaen

esteproyecto)paraLinux,RHELoSLES.o 750Horaspormesdeusodeinstanciat2.microdeWindows.o Esta capa gratuita vence a los 12 meses a partir de la fecha de

inscripción.

• DynamoDB:o 25GBdealmacenamientoo 25 Unidades de escritura y lectura ( trafico de datos medido en

unidades).o Suficienteparamanejarhasta200millonesdesolicitudesalmes.o Novence.

• CloudFront

o 50GBdetransferenciasalientededatos.o 2.000.000SolicitudesHTTPoHTTPS.o Esta capa gratuita vence a los 12 meses a partir de la fecha de

inscripción.



EnlasiguienteIlustraciónpodemoscomprobarqueenAbril,meexcedíentraficoenlosS3-Putsyaquefuelaépocaenlaqueestabarealizandograndescambiosenlapaginawebysobrepasepormuypocoéllimitedelacapagratuita.

Ilustración6-ResumenGastosAWS



Lospreciosapartirdelacapagratuitasonmuybajosparalaenvergaduradeesteproyecto ya que miden el gasto comenzando en los primeros 50 TB/mes deconsumo, lo cual para este proyecto es una exageración y nunca alcanzara esosniveles.Paraquenoshagamosunaidealosprimeros50TB/messecobrana0.023$por GB de uso, lo que significa que podremos hacer uso de exhaustivo de laaplicaciónyquizásnollegarapagarmásdeuncéntimo.Obviamenteestasherramientasestánpensadasparaproyectosyempresasconunconsumo de datos astronómico como puede ser el ejemplo de Netflix, paraproyectosdefinaldecarreraestasherramientasnosquedanunpocograndes,peroestonoquitanqueseanunbuenaopción,ademásdeeconómicaparallevarloacabo.

1.3 PaginaWeb

Enesteapartadonosdedicaremosalaexplicacióndeelprocesodecreacióndelapágina web, desde el diseño sencillo y apto para todos los usuarios hasta lasfuncionalidadesmáscomplejasquehansidodesarrolladas.1.3.1 ConfiguraciónPaginaWebLa paginaweb creada es una paginaweb estática almacenada en el servicio dealmacenamientodeficherosdeS3,allíesdondesehansubidotodoslosarchivospertenecientes y donde se ha configurado para que junto con el servicio deCloudFrontseaunapaginavisibleatodoelmundo.El la siguiente imagen podemos ver que aspecto tiene el sistema de ficheros dealmacenamiento:



Enlapestaña“Properties”deberemosseleccionarelindex.htmlcomoarchivoparaque el servicio sepa en que fichero comienza la pagina web. A partir de aquícrearemos una distribución de CloudFront que será la encargada de distribuir elcontenidodelapaginawebportodointernet,paraquetodoelmundotengaacceso.CloudFront nos permite una gran cantidad de configuraciones de las cualesrealmente no necesitamos todas, sino que para este proyecto utilizaremos unascaracterísticas relativamente estándar, aquí tenemos un vistazo al número deposibilidadesquenosofreceesteservicio:

Ilustración7-AlmacenamientoS3

Ilustración8-ConfiguracionesCloudFront



UnaveztenemosCloudFrontconfiguradoanuestrogustoobtendremosun“domainname”queseráladireccióndenuestrapaginaweb.Esteserviciocreadireccionesquesoncasiimposiblesdeacordarseparautilizarcomopaginaweb,ennuestrocasohttp://dtx7c0yplvrkb.cloudfront.net, por lo que he optado por crear mi propiodominioqueseaunpocomásdescriptivo,queredirijaaeste“domainname”.Paraescogerel dominio, y siguiendo la tónicadelproyectodeabaratar costesoinclusoeliminarlos,heoptadoporundominiogratuitoduranteunaño,ofrecidoporel servicio de hosting llamado Freenom, aquí he optado por escoger el dominiowww.marcosmirandatfg.tk. En la siguiente ilustración muestro como redirijo eltraficodeestedominioalCloudFrontdeAmazon:

Después de esto ya tendríamos una pagina web visitable y accesible desde undominiodelquefácilmentenospodemosacordar.

Al igualquepara lapartede servidor, tendremosqueconfigurarelCORS (Cross-OriginResourceSharing)tambiénenelserviciowebparaqueambaspartespuedancomunicarse. Este proceso lo realizaremos tanto desde S3 como desde ladistribucióndeCloudFront.PrepararemoslasiguienteconfiguraciónparaCloudFront,comosiempreañadiendolascabecerasnecesariasparalacomunicación.

Ilustración9-RedireccióndeDominio

Ilustración10-CORSCloudFront



YcontinuaremosconelmismoprocesoparaS3,dondeconfiguraremosotravezlascabecerasnecesarias.

Conestasconfiguracionesyadeberíamosestarlistosparapoderrealizarpeticionesdesde la pagina web, que lleguen correctamente al servidor y obtengamos unarespuestavalida,aquífinalizaríaelapartadodeconfiguracióndelapaginaweb1.3.2 DesarrolloPaginaWeb

Lapaginawebsecomenzóadiseñarconunosprimerosesbozosapapel,dondemásomenosquedoclarolasfuncionalidadesquesequeríanimplementarycomoibanaircolocadas.Secomenzóadesarrollarporlapaginainicialdevisita,buscandolaideageneralylas tonalidadesque se iban autilizar para la paginaweb. Poco apoco se fueronañadiendo elementos como elmapamundi del fondo, los estilos, los colores, losbotonesytambiénelcanvasaplicadoalcursordelratónsoloenestapáginainicialquesimulaunpococonelmovimiento lossaltosderedqueseproducenconuntraceroute.En esta página encontraremosunbotónquenos permitirá dirigirnos a la paginaprincipaldelaaplicación.

Ilustración11-CORSS3



Unavezdentropodremosverqueelusodelaaplicaciónesmuyintuitivo,yaquesolodispondremosdeunacajitadondeintroduciremosladirecciónquedeseamosbuscaryposteriormentetendremoslaopcióndebuscarincluidotracerouteosinel.Esta es la visión general de el espacio donde introducir la búsqueda y donde serepresentaraenelmapa.

Ilustración13-PáginaPrincipal

Ilustración12-PáginaBienvenida



A parte de representar correctamente las búsquedas tenemos unas cuantasfuncionalidadesañadidascomoquecuandoserealiceunabúsquedaestaquedararegistradaennuestrabasededatosypodremosverlaalmacenadaenlalista“LastTraces” al igual quepodemos ver la búsquedadewww.uoc.eduen la ilustraciónanterior.En la tabla de “Last Traces” podremos hacer numerosas operaciones con unabúsquedaanterior,desdever la informacióndirectamentecorrespondienteaesabúsquedaen lamismatablahastadistintas funcionalidadesquenospermites losbotones incorporados a cada una de las filas. Comenzaremos a describir susfuncionesdederechaaizquierda.

Comenzaremosconeliconoquerepresentaaunapapelera,esteiconoclaramenteeliminaestabúsquedadelabasededatos,eliminandocompletamentelafilaytodalainformaciónasociadaaestabúsqueda.Elsiguientebotónquelee“Plot”seencargadevolverarepresentardenuevounabúsquedarealizadaconanterioridad,esdecir,siqueremosvolveraverenelmapalaubicacióndeciertadirecciónharemosclickenestebotón,yelsoloseencargaradecentrarnosenelmapaymostrarnoselresultadorepresentadoquebuscábamos.El ultimo botón que lee “Summary” ha sido sin duda el más complejo deimplementar, teniendo en cuenta que si hacemos una búsqueda incluyendo laopciónde traceroute, la informaciónqueobtenemoses extensiva, de cada saltotendremoscoordenadas,país,continente,cuidadyotrosdatosysisuponemosqueeltracerouterealizaquincesaltos,tendremosquincevecesestainformacióndecadauno de los saltos. Representar esto de una forma que fuese visualmentecomprensible ha sido extremadamente complicado, pero al final he optado porrepresentarlo en formato JSON formando un árbol donde cada nodo se puedaexpandirocontraersegúnlainformaciónquebusquemos.Parabúsquedastambiénhe incluidounacajaexplícitamenteparaesto,dondepodremos introducir loquebusquemos y el árbol se encargara donde podemos encontrar esa informaciónsubrayandoenrojoelcaminoquehemosdeseguir.Enlassiguientesimágenespodemosvercomoseriaelresultadorepresentadoenmodoárbol,ellaprimeraimagen,conelresultadodelabúsquedacontraídoyenlasegundaexpandido,cadanodoquesigaencolorazulsigueconteniendoinformacióndentrodeelporloquesepodráexpandiraúnmás.

Ilustración14-ZoomBotones



Siqueremoshacerunabúsquedadentrodelárbol,simplementedeberemosdarunclickalbotóndelalupayescribirloquebuscamos,sielcampoestárepetidodentrodelárbolpodremosavanzaroretrocederconelusodelasflechasyelárbolseiraabriendoporlosnodoscorrectosquecontenganesoquebuscamos.Unarepresentacióndebúsquedapodríaserlasiguiente:

Ilustración15-JsonTreesinexpandir Ilustración16-JsonTreeexpandido



Conestaherramientapodremosleerdemaneracómodatodalainformaciónquesehaobtenido,sintenerquerealizarunatablamuycompleja.Esposiblequedeciertasbúsquedasquedencamposenblancosegúnlaefectividaddelabúsqueda,estoesnormal ya que no podemos controlar la exactitud de la geolocalización,dependiendodeenquepaíssebusque,existemásinformaciónalmacenadaenlabasededatosqueenotros.Apartedeestasfuncionalidades,enelmapapodremosverinformaciónsobrelossaltosqueserealizanparallegarhastaeldestinosihemosseleccionadolaopcióndetraceroute,encadaunode losmarcadoresqueveremosenelmapanos indicaraque numero de salto es y que dirección de IP tiene ese salto. En el salto finalpodremosvertodaestainformaciónincluyendotambiéneltextoEnd,indicandoquelabúsquedatraceroutehaterminadoaquí,aquítenemoscomoserepresentaríaunabúsquedacontracerouteenelmapa.

Ilustración17-JsonTreeBúsqueda



Como comentábamos antes, si nos interesa saber la ubicación de un saltointermedio,notendremosmásquehacerclicksobreelpequeñoicono,copiarlaIPcorrespondienteaestesalto,yenelresumendelabúsqueda(“Summary”)buscaresaIP,parapoderveraqueciudad,paísycontenientepertenece.A parte de esta página donde se encuentra la funcionalidad completa de laherramientatambiéntendremosdospestañasmásennuestrapaginaweb,unaqueseráel“About”,quenosdaráunpocodeinformaciónacercadequeesestapáginayporquesehacreado,dondetambiénadjuntarelamemoriayotraquesellamara“Contact”dondedejaraunpocodeinformaciónacercademiycomocontactarme.1.4 Servidor

Comenzaremosconlaexplicacióndelacreacióndelservidorquenosvaagestionarlaspeticionesrealizadasporlapaginaweb,esteservidorseencargaraderealizarlasfuncionesdetraceroute,asícomotodaslascomprobacionesdesiunadireccionesintroducidaesvalidaosihaocurridounerrorenlaejecución.Tambiénseencargarade establecer la conexión con la base de datos para tanto añadir comoeliminarelementos.LacreacióndelservidorfueatravésdelserviciodeinstanciasEC2deAmazondondeseseleccionolaopcióngratuitadet2.microconelsistemaoperativoUbuntu.Enlasiguienteimagenpodemosverlasinstanciasquetenemoscreadasylasqueestáncorriendo,lallamadaUbuntueslaqueseránuestroservidorylaquesellamaAWS-LINUXesuna instanciaquehemosutilizadoparacompilarcorrectamente la

Ilustración18-RepresentaciónBusquedaTraceroute



base de datos de geoIP2 que nos proporciona el servicio de ubicación de lasdireccionesintroducidas:

Medianteunaconexiónsshaladirecciónsubrayadaenlaimagennosconectamosalservidorycomenzamosainstalartodolonecesarioparaquepuedaresponderanuestraspeticiones.

EmpezamosconlascosasfundamentalesybásicascomoinstalarNodeJSqueseránuestrolenguajepordefecto,continuamosconotrasherramientascomoPM2,queloutilizaremosde servidor local corriendoenelpuerto3000demanera interna,otras herramientas pueden ser el repositorio git, para tener nuestro códigoorganizadoyseguro,elcualpodremosactualizarconsimplescomandosyporúltimoycasilaherramientamásimportanteunNginx,queesunservidorqueutilizaremosdeservidorwebproxyconectadoanuestroPM2interno.

Ilustración19-VisiónInstanciasEC2

Ilustración20-ConexiónSSH



Acontinuaciónprocederéadetallarunpocomáslaexplicaciónacompañándoladepantallazosparaenseñartodaslasconfiguracionesquesehanrealizado,comenzareenordeneiréexplicandodesdeelexteriorhaciadentrohastallegaralapartemásinternadelservidor.LapartemásexteriordelservidoreselpropioNginx,queactúadeservidorydeproxyalavezyqueunavezconfiguradocorrectamenteseencargaradetransmitirnuestraspeticioneshaciacomponentesmásinternos.

Todas las peticiones que lleguen serán recibidas por el Nginx por el puerto 80(determinado en la configuración por el “listen 80”) que es el puerto decomunicaciónnormalutilizadoparalacomunicaciónHTTP,unavezlapeticiónhayasidorecibida,Nginxactuaradeproxyyredirigiráestapeticiónquelehallegadoylareenviaraporelpuerto3000,queesunpuertointernoennuestrolocalhost.Estepuerto3000estaactivodemanerainternayaquegraciasaPM2podemosarrancarnuestrocódigoygenerarunpequeñoservidorinterno,parasermásprecisoslaclaseapp.jseslaencargadadearrancarseycrearesteservidorinternograciasalalibreríaexpress.Podemosverclaramentequeestaclasedeloúnicoqueseencargaesdecrearesteminiservidoryderepartirlaspeticionesalcódigocorrespondientesegúnloquesepida.

Ilustración21-ConfiguraciónNginx



Altratarsedeunproyectopequeño,lautilizacióndeexpressparadefinirlaspocasrutasqueexistenquizásseaexcesivo,peroestonospermiteunafácilestructuraciónsielproyectocrecieramásdeloesperado.SimplementehabríaqueañadirnuevasclasesparadefinirrutasqueproporcionasennuevasAPI’salasquelapaginawebpudiesellamarparaobtenerinformación.Otro de los puntos claves del servidor y del proyecto en global ha sido lafuncionalidad CORS (Cross-Origin Resource Sharing), necesaria para poderestablecerlacomunicaciónentrelapaginawebyelservidor.Quizásseaestepuntodondemás problemashepodido encontrar, ya quepara establecer este tipodeconexiónhedebidoadaptaryagregarnuevascabecerasalasllamadasHTTPtantoen el proxy (como podemos ver en la Ilustración 6), como al utilizar express yobviamenteconfigurandoestomismoenlapartedelapaginawebquemostraremosmásadelante.Una posible solución hubiese sido utilizar solamente el protocolo HTTPS,configurandocertificadosparasuuso,ademásdeadaptarelrestodelproyectoyaque cambiaríamos del puerto 80 al puerto 443 comúnmente utilizado por esteprotocolo.EstonospermitiríaobteneruncifradoSSLdelacomunicaciónyhubiesesolucionado todos los problemas aparecidos por el CORS, ya que son motivosprecisamentedeseguridadlosquenosproporcionabanestosproblemas.Como funcionalidad implementada dentro del servidor podemos diferenciar dosmétodos principales: El primero, que se encarga de la geo localización de unadirecciónsinretornarinformaciónacercadeltraceroute,simplementenosllevaraaldestino final de donde se encuentra la dirección introducida representada en elmapa.Lasegunda,queeslamáscompleja,eslaqueseencargaderealizarlafuncióncompletadeltraceroute,llamandoparacadasaltodeservidoralafuncióndegeolocalizar,parapodermostrarcadapuntoposteriormenteenelmapa.Ademásdelasanterioresexistenotrosmétodosauxiliaresqueseencargandelrestode funciones que podemos ver en la pagina web, desde llamadas de inserción,

Ilustración22-App.js



borradoy listadoa labasededatoshasta funcionesdecomprobacióndeque ladirecciónintroducidaenlabúsquedaesciertamenteunadirecciónvalidayformadadeunamaneracorrecta.TodoelcódigosesubíaalservidoryseactualizabamedianterepositoriosGIT,unavez se subían cambios de el código a GitLab, desde el servidor se realizaba unaactualización y se descargaban los nuevos cambios, de esta manera siempretenemosloscambiosrealizadosorganizadosynoperdemoscódigoyaqueelpropiorepositorionossirvecomocopiaderesguardo.LasiguienteimagenmuestracomoestácompuestonuestrorepositorioenGitlab:

1.5 TraceroutePropio

En este apartado explicaremos un poco como podría haber sido la creación denuestropropiotraceroute,aplicandolosconocimientosquehemosdemostradoenelapartadoanterior.Lo primero que necesitaremos hacer en utilizar la librería que nos permita laconexiónmediantesockets,enNodeJSpodremosusarraw-socket,y lapodremosencontrarenhttps://www.npmjs.com/package/raw-socket,aligualqueelrestodelibreríasdeesteproyecto,estápublicadobajo la licencia totalmente libredeusoMIT.

Ilustración23-RepositorioGitlab



A partir de aquí el usuario podrá introducir una dirección de búsqueda, si estadirección se introduce en formato URL utilizaremos la librería dns-lookup paraconvertir esta URL a una dirección IP tal y como se realiza ahoramismo con eltraceroutepordefecto.Para realizar la función de traceroute, necesitaremos una función ping, yposteriormente una función que realice un bucle con estos ping y que con cadaiteración el valor TTL aumente para que vayamos conociendo los dispositivosintermediosqueexistenentredesdedonderealizamoslabúsquedahastadondeseencuentranuestrodestino.Elcódigoseriaelsiguiente:



Ilustración24-CódigoTraceroutepropio



4. PruebasEnestaseccióncomprobaremosqueelfuncionamientodelaherramientacreadaeselquesedeseayquetodosloscomponentesfuncionancomoseespera.

1.1 PruebasdeDominio

Lasprimeraspruebasquepodemosrealizaresalintentarintroducirunadirecciónnovalidaenlacasilladebúsqueda.

Prueba:“google.es” Respuesta:(Solorepetiremoslaimagendelerrorestavez)

Resultado:Correcto Prueba:“wwww.google.es” Respuesta:“PleaseenteravalidAddress” Resultado:Corrrecto Prueba:“www.google”

Respuesta:“PleaseenteravalidAddress”Resultado:Corrrecto

Prueba“www.google.ok” Respuesta:“Errorlookingupthedomain:www.google.ok” Resultado:Correcto

1.2 PruebasdeTracerouteEstas pruebas consisten en asegurarse de que las búsquedas que se realizanretornan un resultado esperado. En este caso las pruebas son un poco máscomplejas y las he decidido hacer por terminal de comandos y con el códigoejecutándoselocalmenteparapoderprobardeunamaneramásrápida.Despuésdelarevisiónyalgunadelaspruebasdelaconsultorahevistoquealgunasdirecciones fallaban al intentar hacer el traceroute y he tenido que investigarporque.

Ilustración25-ImagenError



Resultaba que algunas de las direcciones que se introducían estaban siendoconvertirdasaipv6envezdeipv4.DeestamaneraelprogramadetracerouteeraincapazdelocalizarlaIPdeorigenylabúsquedafallaba.Laipv6teniaesteformato:Yconipv4lamismabúsquedateniaesteformato:Después de arreglar el error y realizar varias pruebas de ejecución con distintosdominiossevolvióadarporbuenoelfuncionamiento,aquíadjuntoalgunapruebamasdelresultadoobtenido:

Aquípodemosvercomoahorasielprogramaestaconvirtiendotodaslasdireccionescorrectamenteconloquepodremosrealizarcorrectamenteeltraceroute.

Ilustración26-Búsquedaipv6

Ilustración27-Búsquedaipv4

Ilustración28-RevisiónTraceroute



5. ConclusionesUnavezconcluidoeste trabajopuedodecir con todaseguridadquehemejoradomiconocimientosobrelosprotocolosTCP/IPaniveldecapaderedycapadetransporteytambiéndeelconocimientodecómofuncionalageolocalizaciónycomoimplementarla.OtrodelosaspectosmuyvaliososquetambiénhedesarrolladoduranteesteproyectoeselusodelasuitedeherramientasdeAWS,heobtenidomuchosconocimientosacercadelasherramientasutilizadasasícomodelasquenohepodidoutilizarylosproblemasquemehansurgidoconellas.Creoqueengeneralsehanconseguidotodoslosobjetivosmarcadosyelproductofinalobtenidotieneunapresenciayunafuncionalidadadecuadas,todoslosañadidosquesequisieron incluir desde un principio han podido ser añadidos a tiempo y tambiénfuncionadocomoesperado,añadiendogranvaloralaaplicación.La planificación inicial ha servido de guía para marcar los tiempos que se habíanestimadopararealizarcadaunadelastareas,estohaayudadoaorganizareltiempodisponibleyaunquesehanencontradoimprevistos,comoloscomentadosalolargodeesteproyecto,sehaseguidomásomenoslaplanificaciónestablecida.Como líneas de futuro trabajo me gustaría mejorar el proceso de traceroute y surepresentaciónenelmapa,yaquepuedeocurrirquevariasIP’sdeltraceroutequedenrepresentadas en la misma zona, solo mostrando un marcador en el mapa yreemplazandolosanteriores,sedeberíaimplementarciertalógicaenelcódigoparaqueestonosucedaysepuedanrepresentartodoslossaltossignificativos.Con esto damos el proyecto por concluido, en general ha sido una experienciaenriquecedoradelacualsehanaprendidomuchosnuevosconocimientosentreellosagestionarseunomismounproyectoycumplirconlostiemposmarcados.



6. GlosarioAWS:SuitedeherramientasdeAmazonWebServicesquesehanutilizadoparallevaracaboesteproyecto.ICMP:ICMPeselsubprotocolodecontrolynotificacionesdeerroresdelprotocolodeinternetIP.IP:DirecciónIP,elnumeroqueidentificaacadadispositivodentrodeunaredTRACEROUTE:Herramientaquenospermiteseguirlapistadelospaquetesquevienendesdeunpuntodelared.DOMINIO:UndominiodeInternetesunnombreúnicoqueidentificaaunsitiowebenInternet.GIT: Esunsoftwaredecontroldeversionespensadoen laeficienciayelcontroldeversionesdecódigo.MIT(licencia):LalicenciaMITpermitereutilizarsoftwaredentrodesoftwarepropio.CORS: Cross-Origin resource sharing es el mecanismo que nos permite acceder arecursosbloqueadosenunapaginawebdesdeotrolugarweb.HTTP: Hypertext Transfer Protocol es el protocolo de comunicación que permite lastransferenciasdeinformaciónenlawebHTTPS:HypertextTransferProtocolSecureesunprotocolobasadoenhttpperoqueimplementaunacapadeseguridadparalatransferenciaseguradedatos.API: Las API son un conjunto de comandos, funciones y protocolos que permitendesarrollarycreardistintosprogramasconunafacilidadañadida.PM2: Controlador de procesos avanzados para Node.js que nos permite crear unservidorlocalmenteJSON:Esuntipodeformatodeobjetoconunaspropiedadesmuydefinidasymuyútilparaeltratamientodedatoscomplejos.VPC:Esunconjuntoderecursosconfigurablesbajodemandoqueestánubicadosenelinteriordelcloud.



7. BibliografíaInformaciónsobreMaxMind:https://www.maxmind.com/es/homeCanvasdePartículas:https://tympanus.net/codrops/2014/09/23/animated-background-headers/ImagenMapa:http://es.freeimages.com/download/file/2c1ed3629fe3ac15e81733c792fd962b/1920x960,http://es.freeimages.com/photo/global-map-1444310Fondogeométricohttp://www.wallup.netImagenDatagrama:http://www.ebah.com.br/content/ABAAAgalcAH/tp3-ruteo-dinamico-ospf-sobre-equipos-ciscoInformaciónsobreTTL:http://www.slashroot.in/how-does-traceroute-work-and-examples-using-traceroute-commandInformaciónsobreTraceroute:https://en.wikipedia.org/wiki/TracerouteInformaciónsobreHTTPS:https://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol_SecureInformaciónsobreCORS:https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORSInformaciónsobreDNS:https://www.xatakamovil.com/conectividad/como-funciona-internet-dns

Trabajo de Fin de Grado - UOCopenaccess.uoc.edu › webapps › o2 › bitstream › 10609 ›...

Documents

Transcript of Trabajo de Fin de Grado - UOCopenaccess.uoc.edu › webapps › o2 › bitstream › 10609 ›...