RC#118: Bookmarklets

Reality Cracking #118 - El podcast que se viene:

Los bookmarklets eran una cosa muy chula que se inventó a finales de los 90 y se popularizó y mantuvo en uso hasta aproximadamente 2015. Un bookmarklet es un marcador o favorito que en lugar de contener una URL contiene la etiqueta "javascript:" seguida de código JavaScript. Es algo que en su día competía con las, más complejas, extensiones y que básicamente es un fragmento de javascript generalmente pequeño que se ejecuta en el mismo espacio de memoria que los scripts de la página que estemos viendo. El hecho de ejecutarse dentro del propio espacio de memoria permite acceder al arbol DOM de esta y modificarlo cambiando así el aspecto de la página. Si bien se le pueden dar diversos usos, los más comunes eran en su día alterar el formato de una web o compartir algo en redes sociales.

Sigue siendo posible utilizar bookmarklets en muchas webs, aunque entre 2013 y 2015 se añadió algo a los navegadores que llevó a aquellos al olvido. Y para 2016 todo el mundo utilizaba extensiones para las mismas cosas que antes hacía con un bookmarklet. Ese algo era Content Security Policy o CSP, el cual en principio surgió para combatir la inyección de scripts de unas páginas en otras, llamada Cross Site Scripting o XSS, pero que tuvo el efecto lateral de impedir que los bookmarklets se ejecutaran en el mismo espacio de memoria de las webs que usaban algún tipo de CSP. A pesar de las duras protestas de los usuarios que valoraban los bookmarklets por encima de las extensiones, los navegadores decidieron implementar CSP sin permitir ningún tipo de excepción para los bookmarklets, lo que en la práctica significó su fin. Así por ejemplo si intentamos utilizar cualquiera de los bookmarklets que listamos abajo estando en Twitter, el bookmarklet no tendrá ningún efecto. La única solución sería desactivar CSP en el navegador. Por ejemplo en Firefox podemos escribir "about:config" en la barra de direcciones y buscar "security.csp.enable". Deshabilitando esa opción deja de aplicarse CSP. El problema de esto es que seremos vulnerables a XSS y lo cual suele representar un problema si no sabemos lo que hacemos. Aún así, hay muchas webs que no hacen uso de CSP por lo que todavía es posible disfrutar de algunos bookmarklets.

Los bookmarklets son algo innovador e increíble. Al ser solo un marcador con un script no requiere de instalación. Un bookmarklet no ocupa memoria mientras no está en uso. Se carga cuando se hace click en el marcador y el resto del tiempo no ocupa recursos. En cambio las extensiones ocupan memoria y hacen el navegador más lento. Como pasó con los formatos de vídeo Beta2000 y VHS, en las guerras tecnológicas no siempre gana el mejor. En el caso de los bookmarklets ocurrió algo similar. Los bookmarklets eran claramente superiores, pero han caído en el olvido mientras todos hemos recurrido a lo que era peor: las extensiones.

Los siguientes bookmarklets se incluyen para dar una idea de lo que fueron y lo que pueden ser. Para instalarlos sólo tenemos que mostrar la barra de marcadores de nuestro navegador, arrastrar uno de los enlaces y soltarlo sobre ella. En caso de que no quepan, siempre se puede crear una carpeta llamada bookmarklets y meterlos ahí.

1. Ocultar imágenes: ¿Quién no ha querido alguna vez ver una web sin las imágenes? Solo hay que abrir la web que sea o situarse en la pestaña adecuada y hacer clic en el marcador.
2. Traducir: Este bookmarklet traduce al español cualquier web.
3. Compartir: Compartir cualquier web en cualquier red social. Utiliza el servicio Shareaolic.
4. Mono Dark: Cambia el formato a alto contraste oscuro, para leer de noche. 
5. Mono light: Cambia el formato a alto contraste claro, para leer de día.
6. Gmail this: Envía cualquier cosa por email.
7. PrintWhatYouLike: Permite decidir qué partes de una web queremos imprimir. Utiliza el servicio del mismo nombre.
8. WayBack: Acabas de llegar a una página y te sale un error 404. Con este bookmarklet puedes mirar antiguas versiones de la web en The way back machine.
9. Buscar!: Buscar lo que acabas de seleccionar dentro de la web en la que estás. Utiliza Google.
10. RightClick: Habilitar el botón derecho del ratón en esas páginas horribles donde no nos deja.
11. QRCode: Crea un código QR de una página para abrirla de manera simple en el móvil sin recurrir a una URL larga.
12. SortTable: Ordena una tabla html con posibilidad de elegir por qué columna.
13. WhatFont: ¿Qué fuente es esta? Permite conocer qué fuente se ha usado en una determinada web.
14. ViewPass: Permite ver en texto plano contraseñas de formularios de acceso. Para cuando tengamos la contraseña en el gestor pero se nos haya olvidado.

Por supuesto, estos solo son un puñado, existen muchísimos más dispuestos a salir a la luz con escarbar un poco.

P.D.: Puesto que al irme de Ivoox nos hemos quedado sin la posibilidad de comentar, he pensado en escribir un artículo corto para cada podcast donde podamos comentar.