Cómo tu web se ve "fea" en Google Chrome por ser "insegura"

Hoy os voy a contar una historia que me pasó este domingo mientras que preparaba el artículo con la lista de eventos de esta semana que nos entra. Es una curiosidad que me pasó cuando estaba revisando la web de la Hacr0n (ya sabéis, la CON que hay este jueves y viernes en las Islas Canarias y en la que voy a participar con una charla). Es solo una anécdota, pero me ha parecido interesante.

Figura 1: Cómo tu web se ve "fea" en Google Chrome por ser "insegura"

En esos momentos en los que estoy maquetando el artículo que dedico a los eventos de la semana visito las webs de todos y por tanto me conecté a la página de Hackr0n a revisar la información en detalle. Y fue en ese momento cuando me percaté de que había una alerta nueva en mi navegador que no había visto y que me alertaba de la existencia de scripts inseguros en la web del congreso.

Figura 2: Una alerta de seguridad en la web de Hackr0n en Google Chrome

Ya os podéis imaginar, antes de cargar los scripts procedí a revisar el contenido concreto de la alerta para ver qué significaba exactamente ese mensaje. Como podéis ver, no dice demasiado, y solo que hay carga de contenido inseguro y que si le damos OK, entonces aparecerá un mensaje de Not Secure en la web para que sepa que estoy en riesgo.

Figura 3: Explicación en Google de la alerta de Google Chrome

Tal y cómo se puede ver en el mensaje, el contenido del error parece que marca que algunos scripts pudieran estar cargándose remotamente, algo de lo que yo os he alertado muchas veces [véase Riesgos de seguridad al cargar contenido externo en tu web] , así que me fui a buscar todos los scripts que se estaban cargando en la web de Hacrk0n a ver si eran de otras ubicaciones.

Figura 4: Scripts de la web de Hackr0n. Todos ok.

Como podéis observar, el código de la web está muy ordenadito y todos los scripts están agrupados y se cargan localmente, así que no es contenido externo en código script, así que no iba por ahí el tiro. Tenía que ser otra cosa.

La explicación a la alerta

Revisando la explicación del mensaje de error que se puede ver en el Figura 3, parece que pudiera ser que algún contenido se cargara vía HTTP en lugar de vía HTTPs, pero desde luego no tenía nada que ver con los scripts, así que podrían ser otros recursos. Así que revisando el código busqué todos los enlaces que existieran HTTP, en lugar de HTTPs, a ver si algo se había colado. Y efectivamente, hay unos links a fuentes de Google que son:

a) Contenido externo 

b) Se carga bajo HTTP en lugar de HTTPs

Figura 5: Los links inseguros en la web de Hackr0n

Esto es un error de seguridad que algún atacante podría utilizar en un esquema de man in the middle para hacer un ataque. Esta carga de scripts es la que genera el problema de seguridad y la alerta de Google Chrome, pero lo peor es que genera un efecto mayor.

Figura 6: Web insegura con las tipografías correctas

Al no haber sido cargada la fuente mediante el enlace Link por ser considerado un riesgo para la seguridad del cliente, la web se ve bastante mal, así que el efecto es que una medida de protección en una web genera un "Defacement" por culpa de un riesgo de seguridad. Fijaos en el aspecto de la Figura 2 y el aspecto de la Figura 6. Sea como fuere, la solución es cargar la fuente localmente y servirla vía HTTPs y todo resuelto. ¡Nos vemos en la Hackr0n!

Saludos Malignos!