Problemas con elementos no seguros en páginas HTTPS

No suelo escribir post de carácter técnico, pero en esta ocasión quiero compartir un problema que tuve por si fuera de utilidad para aquellas personas que administráis páginas web en vuestras organizaciones. Recientemente, en una de las páginas web que administro, recibí una alerta de penalización en SEO porqué la página tenía elementos calificados como «no seguros» tras instalar un certificado de seguridad SSL (páginas https).

¿Qué es un certificado SSL?

El certificado SSL (Secure Socket Layer: Protocolo de seguridad) aporta seguridad a las personas visitantes de una web al cifrar los datos de navegación. Puedes reconocer esta páginas, generalmente, porque en su url comienzan por HTTPS, en lugar de HTTP (la «S» es de seguridad).

Instalar este certificado no sólo tiene ventajas de seguridad, sino también en el posicionamiento web (SEO). O mejor dicho, Google empezó a penalizar a partir de 2018 las páginas que no tuvieran este certificado de seguridad. Puedes encontrar más información sobre el certificado SSL y cómo instalarlo desde este post.

Problemas SSL con elementos no seguros – contenido mixto

Tras la instalación del certificado comprobé que el navegador seguía marcando la página como «no segura» y no muestra el candado verde (a pesar de que la url ya empieza por HTTPS y el sitio funciona correctamente):

Despues de buscar en Internet, averiguo que se debe a que la página contiene contenido mixto. Es decir, se están enlazando y hay llamadas a elementos internos con HTTP en lugar de con HTTPS (seguramente debido al theme o tema, a la plantilla de WordPress que da apariencia al sitio). El ejemplo más común es una imagen subida anteriormente a la instalación del certificado y que sigue manteniendo la url comenzando por HTTP.

Cómo solucionar el problema con los elementos no seguros en las páginas HTTPS

Solución 1 (¡sólo para avanzad@s!): La primera opción y más recomendable, pero también más compleja, es editar el archivo .htacces para sobreescribir todas las entradas que comienzan por HTTP y sustituirlas por HTTPS. Si controlas de esto, en este post puedes ver cómo hacerlo.

Solución 2: Buscar elementos no seguros manualmente. Buscando en Internet descubrí la página Whynopadlock, que nos chiva qué elementos no seguros o contenido mixto SSL contiene nuestra web. En esta página descubrí varias imágenes de la plantilla del tema que seguían manteniendo la ruta anterior a la instalación del certificado, así que las eliminé y volví a subirlas y enlazarlas en las páginas donde estaban. Sin embargo, el navegador me seguía marcando la página como «no segura», así que implemente también la solución 3.

Solución 3: Instalar plugins. Junto con la anterior, esta es la opción que yo usé. Aunque lo más recomendable es evitar la instalación de plugins innecesarios (harán que la web consuma más recursos, sea más lenta y menos segura), a veces nos facilitan enormemente la vida si no disponemos de elevados conocimientos técnicos y nos ahorra mucho tiempo.

• En primer lugar instalé el plugin SSL Insecure Content, que según la descripción del plugin limpia tu sitio WordPress de contenido inseguro HTTPS.
• Una vez arreglado, para evitar futuros problemas, leí que se debe instalar y mantener activo el plugin Really Simple SSL. Este plugin detecta automáticamente los ajustes del sitio y configura la web para que funcione en https.

Ojalá que no tengas este problema en tu web, pero si alguna vez te pasa, espero que este post te ayude a solucionarlo.