Resolver advertencias de sitios inseguros y contenido mixto

Este artículo explica cómo solucionar los enlaces inseguros en tu sitio web después de agregar un certificado SSL.

Antecedentes

Un problema común después de agregar un certificado SSL es que tu navegador aún muestra tu sitio como inseguro. Esto ocurre con mayor frecuencia porque hay enlaces en una página que aún apuntan a HTTP en vez de HTTPS.

Por ejemplo, mira el siguiente enlace de imagen. Observa cómo la URL usa http al principio.

<img src="http://www.example.com/images/pic_mountain.jpg" alt="Mountain View">

Al visitar el sitio, aparece un error y el ícono de candado en la barra de navegación muestra un ícono de advertencia. Si haces clic en el ícono de advertencia, el texto explica que hay 'elementos no cifrados' en la página que estás viendo. Esto sucede porque la imagen se vinculó mediante HTTP y no HTTPS.

Herramientas en línea como whynopadlock.com pueden ayudarte a ubicar enlaces inseguros en tu sitio.

Si intentas conectarte a un sitio sin un certificado SSL, no válido, o autofirmado usando una URL HTTPS, tu navegador muestra una advertencia de seguridad como 'Su conexión a este sitio no es segura'.

Revisar la consola de JavaScript

También puedes consultar la consola de JavaScript en tu navegador. Esto también puede mostrar una advertencia sobre por qué el sitio no se carga.

En Firefox y Chrome, puedes abrir la consola presionando las siguientes teclas:

• Windows — Ctrl + Shift + i
• Mac — Opción + Cmd + i

Da clic en la pestaña de la consola. Aparecerá un mensaje de error similar al siguiente en la consola:

El enlace que aparece en el mensaje de error abre la siguiente página con más información sobre este problema:

• No More Mixed Messages About HTTPS (Chromium Blog)

Hay algunos pasos que debes seguir para solucionar este error.

 

Agregar un certificado SSL

Todos los sitios modernos deben utilizar un certificado SSL válido. Revisa este artículo para obtener instrucciones sobre cómo agregar un certificado SSL a tu sitio.

Corregir los enlaces sin encriptar

Existen dos soluciones para arreglar estos enlaces.

Opción 1 — Actualizar los enlaces manualmente

Revisa esta página para obtener más detalles sobre las rutas de archivos HTML.

Usar enlaces absolutos: Los enlaces absolutos son la ubicación URL completa de un archivo que incluye el nombre de dominio. Si eliges utilizar esta opción, asegúrate de utilizar HTTPS en la URL. Por ejemplo:

<img src="https://www.example.com/images/pic_mountain.jpg" alt="Mountain View">

Usar enlaces relativos: Los enlaces relativos no incluyen el nombre de dominio. Estos enlaces apuntan a un archivo local. Por ejemplo:

<img src="images/pic_mountain.jpg" alt="Mountain View">

Opción 2 — Agregar código a tu archivo .htaccess

En lugar de actualizar manualmente los enlaces en tu código, podrías agregar las siguientes líneas al archivo .htaccess de tu sitio.

Header always set Content-Security-Policy "upgrade-insecure-requests;"

Esto obliga al navegador a actualizar automáticamente cualquier enlace inseguro a enlaces seguros. Una vez agregada, la advertencia debería desaparecer inmediatamente. Revisa esta página para obtener más detalles.

Revisar nuevamente los enlaces inseguros

Utiliza una herramienta como whynopadlock.com para probar tu sitio nuevamente. Repite los pasos anteriores según sea necesario.

Hay algunos pasos adicionales que debes seguir para proteger un sitio de WordPress. Revisa este artículo para obtener una lista de pasos para garantizar que tu sitio de WordPress utilice enlaces seguros tanto en los archivos del sitio web como en la base de datos.