Generalidades
Un problema común después de agregar un certificado SSL es que tu navegador todavía muestra tu sitio como inseguro. Esto sucede con mayor frecuencia porque hay enlaces en tu página que aún apuntan a HTTP en lugar de HTTPS. Por ejemplo, mira el siguiente código para vincular una imagen.
<img src="http://www.example.com/images/pic_mountain.jpg" alt="Mountain View">
Nota cómo la URL está directamente vinculada arriba con http al principio. Al visitar el sitio en Firefox, se muestra lo siguiente:
Puedes ver que el icono del candado en la barra de navegación muestra un icono de advertencia en su lugar.
Causa de este error
Si haces clic en el icono de advertencia, el texto explica que hay 'elementos no cifrados' en la página que estás viendo.
En el ejemplo anterior, esto sucede porque la imagen se vinculó usando HTTP y no HTTPS. Otra forma de confirmar qué en tu sitio está vinculado de manera insegura es utilizar el siguiente sitio:
Errores HTTPS de navegador
Si intentas conectarte a un sitio que tiene un certificado SSL faltante, inválido o autofirmado mediante una URL HTTPS, tu navegador muestra una advertencia de seguridad como 'Your connection to this site is not secure' en Chrome o 'Potential Security Risk Ahead' en Firefox. Por ejemplo:
Revisar la consola JavaScript
También puedes consultar la consola de JavaScript en tu navegador. Esto también puede mostrar una advertencia de por qué el sitio no se está cargando.
En FireFox y Chrome, puedes abrir la consola presionando las siguientes teclas:
- Windows — Ctrl + Shift + i
- Mac — Option + Cmd + i
Haz clic en la pestaña de la consola:
Un mensaje de error similar a lo siguiente aparece en la consola:
El enlace enlistado en el mensaje de error abre la siguiente página con más información sobre este problema:
Arreglar el error
Hay algunos pasos que debes realizar para corregir este error.
Paso 1 — Agrega un certificado SSL
Todos los sitios modernos deben utilizar un certificado SSL válido. Consulta el siguiente artículo para obtener instrucciones sobre cómo agregar un certificado SSL a tu sitio:
Paso 2 — Arreglar enlaces sin encriptación
Hay dos soluciones:
Usa enlaces absolutos
Los enlaces absolutos son la ubicación de la URL completa a tu archivo. Esto incluye el nombre de dominio. Por ejemplo:
<img src="https://www.example.com/images/pic_mountain.jpg" alt="Mountain View">
Solo asegúrate de usar HTTPS al vincular de esta manera.
Usa enlaces relativos
Los enlaces relativos no incluyen el nombre de dominio. En su lugar, estos enlaces apuntan a un archivo local. Por ejemplo:
<img src="images/pic_mountain.jpg" alt="Mountain View">
Mira el siguiente enlace para más detalles:
Paso 3 — Resolver la advertencia al añadir código a tu archivo .htaccess
En lugar de actualizar manualmente los enlaces en tu código, puedes agregar las siguientes líneas al archivo .htaccess de tu sitio.
Header always set Content-Security-Policy "upgrade-insecure-requests;"
Estas líneas obligan al navegador a actualizar automáticamente cualquier enlace inseguro a enlaces seguros. Una vez agregada, la advertencia debería desaparecer inmediatamente. Mira el siguiente enlace para más detalles.
Sitios WordPress
Hay algunos pasos adicionales que debes seguir para proteger un sitio de WordPress. Visita el siguiente artículo para obtener una lista de pasos para asegurarte de que tu sitio de WordPress utiliza enlaces seguros tanto en los archivos del sitio web como en la base de datos.
