HSTS web wordpress

Creo que en la actualidad, y sobre todo todos los que estaréis por aquí leyéndome, sabréis, o al menos intuís, la importancia que tienen las conexiones HTTPs de cara a la privacidad del usuario.


Y si es que no, justo hace unos días publicaba por estos lares un breve tutorial introductorio explicando lo que ocurre cuando nos conectamos a un servicio online con HTTP, y cuando lo hacemos a uno con HTTPs.

Hasta aquí todo correcto. Hoy en día lo normal ya es que todas las webs y prácticamente todas las aplicaciones utilicen conexiones SSL/TLS, es decir, conexiones usando el protocolo de comunicación HTTPs.

Son más rápidas, desde hace unos años implementarlas ha sido cada vez más fácil de cara a los administradores de sistemas, y además son más privadas. Así que ganamos todos.

Sin embargo, cuando hablamos del HSTS, la cosa cambia.

Hoy en día lo normal es que la mayoría de páginas y aplicaciones que usamos no cuenten con unas directivas HSTS activas.

Y esto es un problema, como veremos a continuación, que afecta tanto a los usuarios, como también a los administradores.

Vamos a explicar por aquí el por qué es importante implementar HSTS en nuestra web, y por supuesto, cómo se hace.


¿Qué es el HSTS?

Sobre esto ya le dediqué un artículo en 2012 (¡hace más de una década!), cuando el protocolo todavía estaba naciendo.

Básicamente HSTS es un conjunto de estándares que se encargan de comunicar al cliente (el navegador web, el dispositivo del usuario) sobre cómo debería estar implementado el HTTPs de ese servicio, y qué permisos debe o no aceptar.

Es decir, HSTS hace de intermediario entre la conexión del usuario y el SSL/TLS que tenga el servidor instalado, informando de cómo debe aplicarse el SSL/TLS (bajo qué condiciones y supuestos), y cuándo no.

De esta manera, se elimina uno de los principales problemas del HTTPs, que es que aunque en efecto el servidor lo tenga implementado, si este hace llamadas a otros recursos disponibles en otros servidores, puede ocurrir que haya parte de la conexión que realiza el usuario en la que sí hay cifrado de punto a punto, y otra parte en la que no.

El corolario de este escenario es que aunque el servidor tenga el HTTPs habilitado, sin una política de HSTS bien implementada estará exponiendo datos de navegación del usuario, generalmente a servicios de terceros.

Para evitar esto nace, por tanto, el HSTS.

Y no solo eso, sino que el HSTS, con todas las directivas que lo componen, es ya una de las múltiples variables que tienen en cuenta Google de cara a posicionar una página. Por lo que el administrador también tiene incentivos reales a implementarlo más allá de mejorar la privacidad de sus usuarios.


Vamos a ver cómo saber si una web lo tiene habilitado.

Cómo saber si una página tiene HSTS activo

Pues de una manera muy sencilla.

Basta con entrar en la web SecurityHeaders.com (EN), y en el único campo de formulario, meter la dirección de la web que queremos validar.

  • Si el resultado obtenido está en verde (nivel A+ o A), la web cuenta con un HSTS bien definido.
  • Si el resultado obtenido está en amarillo (del nivel B al E), la web tiene parte de las directivas HSTS definidas, pero hay otras que o bien están mal implementadas, o no han sido definidas, por lo que habrá escenarios no contemplados, con el riesgo que ello supone.
  • Si el resultado obtenido está en rojo (nivel F), no hay un HSTS definido.

Para que te hagas una idea del poco uso que tiene hoy en día este protocolo, de las cerca de 250.000 páginas analizadas por SecurityHeaders, menos de 28.000 tienen un nivel A+ o A. El resto, o no lo tienen correctamente habilitado (las menos), o directamente no lo tienen implementado (más de la mitad).

¿Cómo lo puedo implementar en mi página?

Pues dependerá de si tu servidor es Apache o NGIX.

En todo caso, como lo habitual es que una web esté hoy en día diseñada con WordPress (principal CMS de desarrollo de webs a nivel mundial, muy por encima del resto de propuestas), y la amplia mayoría de hostings WordPress corren bajo Apache, me voy a centrar en este escenario.

El primer paso, por razones obvias, es que tu web ya tenga un SSL activo. Esto es crítico, ya que de no tenerlo, e intentar implementar un HSTS, tu web dejará de funcionar (estás intentando forzar conexiones HTTPs en una web que no tiene SSL/TLS activo).


Hoy en día es muy fácil implementar el SSL en una página WordPress. De hecho la mayoría de hostings o bien lo ofrecen gratis, o bien bajo la compra de una licencia SSL/TLS anual. Ya expliqué por este otro tutorial los pasos a seguir, así que no me voy a repetir.

Una vez ya tenemos un SSL activo, bastaría con que abriéramos el archivo .htacess de nuestra página (ya sabes, previa copia de seguridad por si algo sale mal, y accediendo a los archivos de tu servidor mediante SSH o FTP) y coloquemos, antes del final de ese documento, el siguiente script:

<ifModule mod_headers.c>
Header set Strict-Transport-Security "max-age=31536000" env=HTTPS
Header set X-XSS-Protection "1; mode=block"
Header set X-Content-Type-Options nosniff
Header set X-Frame-Options DENY
Header set Referrer-Policy: no-referrer-when-downgrade
Header add Content-Security-Policy "default-src 'self' data: *; img-src 'self' data: *; frame-ancestors 'self'; connect-src 'self' *; style-src 'self' 'unsafe-inline' *; media-src 'self' *; script-src 'self' 'unsafe-inline'  'unsafe-eval' *;"
Header always set Permissions-Policy "accelerometer=(),autoplay=(),camera=(),encrypted-media=(),fullscreen=*,geolocation=*,gyroscope=(),interest-cohort=(),magnetometer=(),microphone=(),midi=(),payment=(\"https://*.paypal.com\" \"https://*.stripe.com\"),sync-xhr=*,usb=(),xr-spatial-tracking=()"
</ifModule>

Es importantísimo señalar, eso sí, que cualquier error en este código hará que la web o directamente no funcione (errores 5XX), o que haya partes de la web que dejen de funcionar.

Si esto te pasa, vete eliminado partes del script hasta que des con el problema.

De hecho, esta serie de comandos es la manera de implementar el HSTS de la forma más permisiva posible, para evitar, en la mayoría de casos, que vuestra web deje de funcionar.

Sobra decir que luego, en cada web en cuestión, habría que mirar qué permisos realmente necesitarías y cuáles no, quitando de aquí (o incluso incluyendo) todo aquello que te sobre o necesites.

Mi recomendación es que pruebes con este código, entres en la web para verificar que sigue funcionando, y navegues por las diferentes páginas, intentando mirar si hay algún elemento (seguramente aquellos que carguen fuera del servidor, como pueden ser vídeos de Youtube o plataformas de pago online) que ha dejado de funcionar.

Para ello puedes ayudarte de la consola de desarrollo del navegador (recuerda que se abre dándole al botón derecho en cualquier parte de la web > Inspeccionar, y cambiando a la pestaña de Consola) que te mostrará si hay errores o alertas con algunas de las políticas que hemos definido previamente.

  • Los errores deberías solucionarlos.
  • Los warnings, pues bueno, son menos importantes (por ejemplo, es probable que te den warnings con este código al intentar definir unos Permissions Policy para muchas funcionalidades, como el acelerómetro o el magnotometer, que probablemente tu web no necesite).
consola desarrollo hsts

Déjalo unos cuantos días funcionando, y si pasada, por ejemplo, una semana, ves que nadie se ha quejado y que tú has podido usar la web sin problemas, puedes o bien dejarlo como está, o valorar la eliminación de según qué permisos que probablemente no estés necesitando.

La cuestión, y es aquí lo importante, es que estarás cumpliendo con las directivas HSTS, dotando a tu web de un plus de privacidad, y además favoreciendo a que sea más fácilmente “posicionable” a nivel de SEO por los buscadores.

________

¿Quieres conocer cuáles son mis dispositivos de trabajo y juego preferidos?

Revisa mi setup de trabajo, viaje y juego (ES).

Y si te gustaría ver más de estos análisis por aquí. Si el contenido que realizo te sirve en tu día a día, piénsate si merece la pena invitarme a lo que vale un café, aunque sea digitalmente.