Utiliza este crédito para lanzar tus proyectos ahora en Digital Ocean, válido por 60 días
Índice del contenido
Me Aproveché De Un Error En El Código De Una App De Citas
Me Aproveché De Un Error En El Código De Una App De Citas
Mientras usaba una app de citas estilo Tinder, de esas en las que, tras un like mutuo, la aplicación pone en contacto a los involucrados, pude notar que, para promocionar su plan premium, usaban fotografías difuminadas para presentarte a las personas que habían presionado el botón de Like en tu perfil.
Tras tener un par de matches pude notar que las fotografías difuminadas pertenecian a cuentas reales, es decir, no eran un set de imágenes genéricas o placeholders.
Sonaba demasiado obvio, de igual forma, abrí la consola de desarrollador de mi navegador y me dirigí al código CSS para comprobar mis sospechas. ¡No puede ser que cometieran un error tan simple!—pensé—Están protegiendo la identidad de las fotografías con un simple filter: blur de CSS.
.hidden-image {
filter: blur(4px);
}
Procesamiento de imágenes de esta app de citas
Las imágenes reales eran servidas por el CDN de la aplicación y posteriormente aplicaban un filtro para ocultarlas, por lo que, para saber quien te había dado like, bastaba con remover el filtro.
Desafortunadamente era imposible obtener otro dato a partir de las fotografías o de la estructura la URL, llamadas a la API , o cualquier otro dado; ni el nombre, ni el perfil ni alguna otra información era accesible más que la imagen de perfil.
No te conformes con Javascript, aprende también Typescript
PatrocinadoSi tus habilidades en Javascript ya son lo suficientemente buenas como para escribir algunas aplicaciones de complejidad media, probablemente te habrás dado cuenta de algunas de sus múltiples debilidades, Typescript fue creado para resolverlas, y hay plataformas como educative, que te llevarán a dominar Typescript.
¿Dónde aprender arquitectura de software?
PatrocinadoEs super fácil aprender las bases de la programación, y la sintaxis de los lenguajes, sin embargo aprender a estructurar grandes bases de código y su flujo es enrevesado, porque normalmente las aplicaciones no crecen tanto, y porque es un área de conocimiento relativamente nueva, mis recursos favoritos son «The system design interview series», pero si no te van los libros educative tiene un curso completo sobre diseño de sistemas también.
¿Cómo ofuscar imágenes en apps de citas?
Ciertamente este era un error de arquitectura, es cierto que es muy sencillo realizar el tratamiento de las imágenes en el frontend, con CSS, pero una mejor opción hubiera sido usar un set de imágenes genéricas para todas las cuentas.
Otra alternativa hubiera sido generar un thumbnail (o c ambiar el formato, ejemplo: webp ) automáticamente cada vez que un usuario actualice su imagen principal de perfil; consume un poco más de espacio pero mantiene las imágenes reales seguras y personaliza la experiencia de cada usuario.
Explotando el error con una extensión de navegador
Para aprovecharme del error, cree un pequeño script en Javascript que obtenía todas las imágenes y removía la clase que aplicaba el filtro blur, posteriormente lo integré a una extensión de navegador para automatizar el proceso de desbloquearlas cada vez que entraba a la página.
Este pequeño descuido por parte de los desarrolladores duró activo cerca de dos años. Actualmente ya ha sido solucionado por lo que si intentas buscar el error en las páginas principales de citas, ya no lo encontrarás, y esta es también la razón principal por la que decidí publicar sobre ello.
Los desarrolladores a cargo de la aplicación modificaron el código para su versión web, dejando casi intacta el resto de la UI y escogió crear un thumbnail protegido para cada cuenta, pero procesándolo desde el backend, para que sea completamente imposible conseguir la imagen real.
