Puntos Debiles Practicas Web

8/19/2019 Puntos Debiles Practicas Web

1/45

Puntos débilesde prácticascomunes en

desarrollos Web

Gunnar Wolf

Panorama

histórico

El ciclo de vidade un desarrollo

«Bundling»

Minicación

Fin

Puntos débiles de prácticas comunesen desarrollos Web

Gunnar Wolf

Desarrollador del proyecto DebianInstituto de Investigaciones Económicas UNAM

Facultad de Ingeniería UNAM

Free SecurityTuxtepec, Oaxaca

Marzo 2016

http://find/


2/45


desarrollos Web

Gunnar Wolf

Panorama

histórico


«Bundling»

Minicación

Fin

Contenidos

1 Panorama histórico

2 El ciclo de vida de un desarrollo

3 «Bundling»

4 Minicación

5 Fin

http://goforward/http://find/http://goback/


3/45


desarrollos Web

Gunnar Wolf

Panorama

histórico


«Bundling»

Minicación

Fin

Antes de comenzar

Daremos un breve recorrido por los últimos 25 años ddesarrollo de la Web, para apreciar cómo ha ido

incrementando la complejidad del entorno.

Particularmente, en cómo hay cada vez mayor diferencial de impedancia entre desarrolladores, administradores de

sistemas e integradores.

Y si somos ambiciosos, apuntaremos a su disminució

http://find/


4/45


desarrollos Web

Gunnar Wolf

Panorama

histórico


«Bundling»

Minicación

Fin

HTTP y la World Wide Web

Tim Berners-Lee, CERN, 1989Primer navegador, 1990

Sistema concebido para compartir documentos

estáticos interrelacionados (hipertexto→ 1950s)Esquema originalmente orientado al textoEntorno académico

Mosaic Web Browser (1993): Primer navegador qu

presenta junto texto e imágenes1995: Internet para uso personal y comercial→¡Boom!

http://find/


5/45


desarrollos Web

Gunnar Wolf

Panorama

histórico


«Bundling»

Minicación

Fin

Contenido dinámico: CGI

Wikimedia Commons

1993: El National Center forSupercomputing Applications public

la especicación para hacer llamadaa ejecutables desde un servidor WebPaso de parámetros al ambiente Etiquetas para formularios

Nacimiento del contenido dinámicoCGI + DBMS = CMS

. . . Lento y plagado de problemas deseguridad

https://en.wikipedia.org/wiki/File:CGIlogo.gifhttps://en.wikipedia.org/wiki/File:CGIlogo.gifhttp://find/


6/45


desarrollos Web

Gunnar Wolf

Panorama

histórico


«Bundling»

Minicación

Fin

Servidores de aplicación

Servidor Web y servidor de aplicación se comunicpor un socket

Coldfusion, Java Servlets, mod_perl, FastCGI. . .Separación de responsabilidades

Permite al mismo servidor ejecutar código bajodiferentes permisos del sistemaDesacopla, reduce supercie de ataque

Mayor rapidez de respuestaEvita la ejecución de un proceso por solicitud

. . . Invitación a la complejidad

http://find/


7/45


desarrollos Web

Gunnar Wolf

Panorama

históricoEl ciclo de vidade un desarrollo

«Bundling»

Minicación

Fin

Marcos de desarrollo Web (frameworks )

Ya teniendo la infraestructura básica de un servidode aplicación, no tardaron en aparecer losframeworks

Cientos de distintos frameworks, varios por lenguajeConocimiento no trasladable entre lenguajes,incluso entre distintos marcos

Ofrecen al programador:Integración entre componentes

Mayor automatizaciónAbstracciónMapeadores objeto-relacionalesPersistenciaVelocidad de desarrollo. . .

http://find/


8/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

Comunidades de creadores

Prácticamente todos los marcos han creadocomunidades de autores de código

Se nutren de ellasLe dan mayor dinamismo al marcoGeneran módulos que agregan funcionalidad

Generan arquitecturas de gestión de módulos

http://find/http://goback/


9/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

XMLHttpRequest / AJAX

Javascript deja de ser el patito feo para ser parte delengranaje fundamental

Por n, sitios Web plenamente dinámicosActualización parcial de las páginas

Explotación del DOMMenor tiempo de satisfacción al click Menor carga al servidor

No requiere regenerar los elementos constantesMuchos nuevos frameworks y bibliotecas paraaprovechar esta nueva funcionalidad

http://find/


10/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

El lado doloroso de AJAX

Pérdida del URL como descriptor del contenido

Contenido oculto que requiere navegaciónNuevas categorías de vulnerabilidades

XSS, CSRF, inyección de encabezados, nuevasposibilidades para MITM. . .

Muchos más puntos de costura

para hacer unanálisis de riesgos al trasladar entidades entre capas

http://find/


11/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

Flash

Si no tienes nada bueno que decir de algo. . .No digas nada

A algunos les gusta. . .

Por suerte está camino a la desaparición. . .Lentamente. . .

http://find/


12/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

Flash

Si no tienes nada bueno que decir de algo. . .No digas nada

A algunos les gusta. . .

Por suerte está camino a la desaparición. . .Lentamente. . .

http://find/


13/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

Contenidos



3 «Bundling»

4 Minicación

5 Fin

http://find/


14/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

Sobrecaracterizando

Los caracteres reseñados en esta secciónson cticios (y pueden estar exagerados).

Cualquier parecido con la realidad esmera coincidencia.



15/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

La visión del desarrollador (1)

Flickr: aashehadeh

Resolver las necesidades del usuaEmpleamos las últimas versiones

de todo el stack Mejorando usabilidadAumentando funcionalidadLa versión para la cual el autormantiene soporte

Única prioridad: La entrega (y, porende, un usuario contento ysatisfecho con lo pactado)

https://www.flickr.com/photos/73044296@N00/8366351491https://www.flickr.com/photos/73044296@N00/8366351491http://find/http://goback/


16/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

La visión del desarrollador (2)

MantenibilidadSi se solicitan adecuaciones, se dará mantenimientoal sistemaMientras tanto, si funciona, no lo arregles

DespliegueDocumentación básica. . . Con suerte cae en el ámbito deladministrador. . .

SeguridadEmplear bibliotecas con buena trayectoriademostradaEs buena práctica, pero. . . ¿Hay procedimientos

para reaccionar ante amenazas imprevistas?

http://find/


17/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

La visión del administrador de sistemas (1

Neowin;

Flickr: Aaron Muszalski

Mantener a todos los sistemas yaexistentes funcionando en conjunt

Emplear el menor número posiblede versiones distintasDe ser posible, provistas ygestionadas por la misma

distribución (al menos en el casode Linux)Principal prioridad: No disrupciónde otros servicios

http://www.neowin.net/news/happy-sysadmin-day-2https://www.flickr.com/photos/sfslim/9575455728https://www.flickr.com/photos/sfslim/9575455728http://www.neowin.net/news/happy-sysadmin-day-2http://find/


18/45


19/45


desarrollos Web

Gunnar Wolf

Panorama


«Bundling»

Minicación

Fin

¡DevOps al rescate!

Wikipedia: Scrumban;

Flickr: Paul Downey

Popularización de los Development and Operations

¡Metodología ágil!La tecnología al rescate

Pruebas extensivasIntegración continua

Empleo extensivo devirtualización/contenedores parael despliegue: Una máquinavirtual por aplicación

https://en.wikipedia.org/wiki/Scrumbanhttps://www.flickr.com/photos/psd/8634021085https://www.flickr.com/photos/psd/8634021085https://en.wikipedia.org/wiki/Scrumbanhttp://find/


20/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

DevOps: Crónica de un fracaso anunciado

Enfoque en la separación entre aplicaciones

Demasiadas máquinas virtuales→ demasiadasinstalaciones independientes a mantenerActualizaciones de seguridad: Siguen rompiendo mis aplicaciones

Resulta más fácil probar antes de parcharResulta más difcil corregir el daño

http://find/


21/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Conforme los sistemas se vuelven legacy

Ashminder Ubhi

Las mejores prácticas actualesdisminuyen la probabilidad de quelos sistemas tengan una larga y

fructífera sobrevida¿Fail early, fail often?Desarrollos van, desarrollos viene

Conforme más ágil la cultura deun lenguaje de programación,mayor rotación entre susbibliotecas consentidas

¿Tendrá soporte libfoobardentro de dos años? ¿Dentrode cinco?

https://ashminderubhi.wordpress.com/2012/09/11/flash-storage-makes-legacy-applications-look-good/https://ashminderubhi.wordpress.com/2012/09/11/flash-storage-makes-legacy-applications-look-good/http://find/


22/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Buscando la rama estable

Gerald England;

Public Domain Images;Wiki edia: Glaze ice

Como administrador, tiendo a preferla rama estable de mi sistemaoperativo

Muchos sistemas incluyen a decenas de miles de aplicaciones ybibliotecas con soporte a largoplazo (2-7 años típicamente)

Como desarrollador, puedo buscaralejarme lo menos posible de la ramaestable

Me limita un poco, sí, pero brindagarantías muy importantes

http://www.geograph.org.uk/photo/2816765http://www.public-domain-image.com/free-images/flora-plants/trees/intertwined-branches-of-a-large-tree/attachment/intertwined-branches-of-a-large-treehttps://en.wikipedia.org/wiki/Glaze_icehttps://en.wikipedia.org/wiki/Glaze_icehttp://www.public-domain-image.com/free-images/flora-plants/trees/intertwined-branches-of-a-large-tree/attachment/intertwined-branches-of-a-large-treehttp://www.geograph.org.uk/photo/2816765http://find/


23/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Dos casos particulares

A continuación, se abordan dos casos particulares de

prácticas cuestionables muy frecuentemente encontradasen desarrollos Web: El bundling y la minicación.

Ambas se conectan con lo aquí presentado por enfatizen lo inmediato y desestimar al largo plazo.



24/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Contenidos


2 El ciclo de vida de un desarrollo3 «Bundling»

4 Minicación5 Fin

http://find/


25/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Bundling

Wikipedia: Red tape

https://en.wikipedia.org/wiki/Red_tapehttps://en.wikipedia.org/wiki/Red_tapehttp://find/


26/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Bundling

Wiktionary: Feuerholz

https://de.wiktionary.org/wiki/Feuerholzhttps://de.wiktionary.org/wiki/Feuerholzhttp://find/


27/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Presentación del problema

En el desarrollo de mi proyecto, requiero una grancantidad de bibliotecas como dependenciaDicultad de especicar expresamente mis

dependencias como requisitos de construcciónDiferentes lenguajesComportamientos especícosVersiones particulares de API. . .

Mención horroríca: bundling + modicaciónAdemás de emplear una biblioteca, requieromodicarla o extenderla para que elcomportamiento sea el que requiero

http://find/


28/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

¿Y qué es bundling ?

Distribuir una copia entera de un proyecto(programa, biblioteca, . . . ) dentro de otro

En vez de declarar una dependencia externa

Facilita el despliegue, la convivencia de proyectoscon dependencia a distintas versiones del mismosoftwarePermite modicar el comportamiento de unabiblioteca base

Referencia de lectura: Fedora opens up to building (LWN oct-2015)

¿Por qué es un problema? ¿Qué debería

https://lwn.net/Articles/660429/https://lwn.net/Articles/660429/http://find/


29/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

¿Por qué es un problema? ¿Qué deberíahacer?

Abre grandes problemas en mantenibilidad,seguridadDiferentes versiones de la misma biblioteca entreaplicaciones

Desperdicio de espacioPesadilla administrativa para corrección devulnerabilidades

Tira por la borda todo compromiso LTS de ladistribuciónDicultan compartir datos comunes entreaplicaciones

http://find/


30/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

El coco de los proyectos grandes

Muchos proyectos han evaluado lasopciones, y decidido incluir decenasde bibliotecas

Pero para distribuir en una versiónestable, se vuelve un dolor decabeza burocráticoA modo de ejemplo, Drupal:Various asset (JavaScript) libraries have to be updated to a (minied)stable release prior to 8.0.0

Desgaste burocrático derivadode mantener al día todos los

proyectos incluidos

https://www.drupal.org/node/2203431https://www.drupal.org/node/2203431https://www.drupal.org/node/2203431https://www.drupal.org/node/2203431https://www.drupal.org/node/2203431https://www.drupal.org/node/2203431https://www.drupal.org/node/2203431https://www.drupal.org/node/2203431http://find/


31/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

El coco de los proyectos grandes

¿Y tras la liberación de su siguiente versión estable?

La lista dejará de ser mantenidaEl seguimiento de cada versión de cada proyecto sevuelve responsabilidad de los desarrolladores

De otro modo, le estarían endosando la factura alusuario nal. . . Que muchas veces no sabría o no podría hacerlo

í d l ó d b



32/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Una vía de solución: Las distribuciones

En el mundo Linux, las distribuciones mantienencolectivamente a decenas de miles de paquetes

Dependencias resueltas, probadas, coherentes

Ciclos de liberaciones estables acorde a cada unaLiberaciones continuas (Gentoo, Arch)Ciclos cortos: 6 meses (Fedora, Ubuntu)Ciclos medianos: 2 años (Debian, RedHat, SuSE)Ciclos largos: 5 años (Debian+LTS, Ubuntu LTS,RedHat)

Desarrollar sobre la última versión estableO dependiendo del proyecto, sobre la pre-establebuscando empatar ciclos

C id

http://find/


33/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Contenidos


2 El ciclo de vida de un desarrollo3 «Bundling»

4 Minicación

5 Fin

Mi i ió

http://find/


34/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Minicación

Mi i ió

http://find/


35/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Minicación

Práctica de procesar archivos JavaScript previos aenviarlos al usuario para reducir su tamaño

Eliminando información redundante (espacio en

blanco, comentarios)Recortando nombres de variables, funciones, clases,tanto como sea posibleSin alterar su funcionalidad

¿Nos vas a salir con que esto también es malo?

Mi i ió

http://find/


36/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Minicación

Sí.

Mejoría insucienteEntorpece depuraciónPuede introducir comportamientos no deseados

A continuación, un experimento meramente indicativorealizado sin rigor cientíco

http://find/


37/45

Midiendo las ventajas


38/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Midiendo las ventajas

Transferencia de un archivo JS sin minicar (16K, jquery.ui.autocomplete.js):Red doméstica: 1.214s a 1.227s

Promedio 1.2217s

Red empresarial: 0.253s a 0.335sPromedio 0.3129sMismo archivo minicado (8.6K):

Red doméstica: 1.140s a 1.148sPromedio 1.1423s

Red empresarial: 0.259s a 0.268sPromedio 0.2633s

Ganancia:Doméstica 16 %

Empresarial 6 %

Aparentemente

http://find/


39/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Aparentemente. . .

Un 16% de ahorro para mis usuarios DSL. . . Suena a buen ahorro, ¿no?

Sí, pero...

Patrones de solicitud en aplicaciones¿Cuántas veces se solicitan los recursos JavaScript?Siendo contenido estático, persisten en el caché del

usuario¿Y el Javascript generado dinámicamente?Si se elige generación dinámica para facilitar laminimización, se abren otros varios frentes (quemuy pronto abordaremos)

¿Y la compresión?

http://find/


40/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

¿Y la compresión?

Los navegadores actuales manejan compresión gzipde forma transparenteEl mismo archivo se comprime a 4.55KB

Minicado se comprime a 2.6KB; la diferencia de1.9KB ya no es signicativa para la transferencia

Nuestro servidor Web puede congurarse paracomprimir todo el contenido al vuelo

O se puede pre-comprimir, para ahorrar tiempo deCPUEl algoritmo es poco pesado

Entorpece depuración

http://find/


41/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Entorpece depuración

Como desarrolladores, contar con una consola deJavaScript para depurar el comportamiento denuestro desarrollo es fundamental

Podemos manejar entorno de desarrollo (sinminicar), entorno de producción (minicado). . . ¿Y los bugs que sólo se presenten enproducción?. . . ¿Y los usuarios que quieran escudriñar nuestro

comportamiento?Puede que se busque ocultar expresamente. . .Pero típicamente se emplea minicación sobrebibliotecas (jQuery, Farbtastic, CKEditor, etc.)que no tiene sentido alguno ofuscar

Comportamientos no deseados

http://find/


42/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Comportamientos no deseados

Un minicador es en realidad un tipo particular decompilador

Lenguaje fuente y objetivo son igualesTranspilador — Algunos convierten entre versiones

de JavaScriptUglifyJS: ES6 → ES5 por compatibilidad conclientes.

Incluso si no hay transpilación, hay compilaciónLexeo , parseo , reescritura de símbolos locales,reducción lógica, eliminación de código muerto,funciones en línea...Hay pruebas de concepto que explotan errores deinterpretación de ciertos minicadores /compiladores

Referencias a ejemplos de estos

http://find/


43/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

comportamientos

Backdooring your javascript using minier bugs(Yan / @bcrypt ago-2015)Discusión relacionada en Hacker News

Hilo de correo en debian-devel iniciando en mensajede Simon Josefsson (ago-2015)

Respecto a compiladores en general:

PoC||GTFO (Travis Goodspeed 2013-2015)Towards optimization-safe systems: Analizing theimpact of undened behavior (Xi Wang et. al.nov-2013)

Contenidos

https://zyan.scripts.mit.edu/blog/backdooring-js/https://news.ycombinator.com/item?id=10146157https://lists.debian.org/msgid-search/[email protected]://lists.debian.org/msgid-search/[email protected]://www.alchemistowl.org/pocorgtfo/https://pdos.csail.mit.edu/papers/stack:sosp13.pdfhttps://pdos.csail.mit.edu/papers/stack:sosp13.pdfhttps://pdos.csail.mit.edu/papers/stack:sosp13.pdfhttps://pdos.csail.mit.edu/papers/stack:sosp13.pdfhttps://www.alchemistowl.org/pocorgtfo/https://lists.debian.org/msgid-search/[email protected]://lists.debian.org/msgid-search/[email protected]://news.ycombinator.com/item?id=10146157https://zyan.scripts.mit.edu/blog/backdooring-js/http://find/


44/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Contenidos



3 «Bundling»

4 Minicación

5 Fin

Hemos terminado

http://find/


45/45


desarrollos Web

Gunnar Wolf

Panoramahistórico


«Bundling»

Minicación

Fin

Hemos terminado.

¿Dudas o comentarios?

Gunnar Wolf

[email protected]://gwolf.org/
http://gwolf.org/http://gwolf.org/http://find/

Documents

Puntos Debiles Practicas Web