La conexión HTTPS "no es segura" debido a las imágenes

Actualmente estoy trabajando en un sitio web y he instalado con éxito mi certificado SSL.

El verificador GeoTrust SSL / TLS confirmó que la cadena de certificados (incluida CA) está instalada correctamente. Todo se ve bien en Chrome, pero mi candado no es verde y en Firefox en realidad dice que el sitio web no es seguro porque tiene elementos sin cifrar.

Utilicé un servicio en línea para comprobar por qué es así y resulta que, de hecho, mis imágenes no se consideran URL seguras. ¿Cómo abordo esta situación, es decir, cómo incrustar imágenes en mi sitio web de forma segura?

Sus etiquetas de imagen deben verse actualmente como:

<img src="http://example.com/images/image.jpg">

Eso httpsignifica que la imagen NO se sirve de forma segura. Un atacante podría cambiar la imagen en tránsito y, por lo tanto, cambiar la apariencia de su página segura para los usuarios.

En su lugar, puede utilizar cualquiera de los siguientes para servir las imágenes de forma segura:

• Enlace a httpsexplícitamente:<img src="https://example.com/images/image.jpg">
• Use enlaces relativos a imágenes en su propio dominio: <img src="/images/image.jpg">
• Use el enlace relativo del protocolo para usar imágenes de otros dominios: <img src="//example.com/images/image.jpg">

Explícito httpssiempre servirá la imagen de forma segura (incluso cuando la página no se sirve de forma segura), mientras que el enlace relativo servirá la imagen de forma segura solo si la página se sirve de forma segura.

En Firefox y Chrome, puede hacer clic en el candado y obtener más información sobre el problema. Una vez hecho esto, aquí hay una captura de pantalla de Firefox que muestra una lista de todas las imágenes de la página. Es fácil escanear la lista y ver cuáles son http:

El problema es que su página está sirviendo enlaces desde una ubicación http en lugar de https. Esto se debe al uso de enlaces http absolutos para hacer referencia a recursos como imágenes. Hay dos métodos mejores que le permitirán hacer referencia a enlaces en http o https y evitar este problema.

Requiere que encuentre estos enlaces y los cambie a:

1. enlaces relativos: es decir./wp-content/yourtheme/images/image1.jpg
2. o coloque // al frente del dominio como en //example.com/wp-content/wp-content/yourtheme/images/image1.jpg Esto luego servirá estos recursos a través de http o https según la solicitud que se haya realizado.

Tanto en Chrome como en Firefox, puede hacer clic en el icono del candado y luego hacer clic para ver una lista de los enlaces inseguros ofensivos. Y si no puede ver ninguna imagen u otros recursos resaltados en el navegador pero aún recibe errores, puede descubrir que hay una llamada de JavaScript que hace referencia a enlaces absolutamente a través de http .

Es realmente básico. Cuando construye sitios web servidos a través de SSL (https), cualquier referencia en su código que no esté precedida por https arrojará advertencias de seguridad , aparte de los enlaces. Tenga en cuenta que la mayoría (todos) de los navegadores también tienen enlaces relativos predeterminados a http. Por lo tanto, si hace referencia a /uploads/12/5/img.jpg o /js/jquery.js, el protocolo de transferencia pasará por defecto a http, lo cual es realmente molesto.

Todos los navegadores manejan las advertencias un poco diferentes, pero recibirá algún tipo de mensaje. Una declaración general sería que cuanto más nuevo sea el navegador, más severo será el mensaje. Algunos navegadores antiguos prácticamente ignoran estos errores, mientras que los navegadores más nuevos pueden actuar como si su mundo estuviera bajo ataque debido a la "s" que falta.

Si ninguna de estas sugerencias ayuda cuando se trata de la imposibilidad de mostrar imágenes después de haber habilitado SSL en su página web, compruebe por si acaso la configuración de cPanel para Hotlinks, que se encuentra en la sección Seguridad del cPanel. Es muy posible que en esta configuración tenga lo siguiente: http://example.comy http://www.example.comesté habilitado para permitir el acceso a las imágenes mientras que la httpsversión de estas no esté habilitada.

Verifique la configuración segura de su protocolo de URL en su cms / wordpress / magento o cualquier otra plataforma que esté utilizando. También puede compartir algunas de sus etiquetas de imagen, pero las imágenes img src básicas no dan ese tipo de errores.

La estructura de la etiqueta de imagen es importante, pero el foco de su pregunta creo que es relativo al "tipo" de Certificado SSL instalado en su sitio. Me ocurrió un caso personal con un "Certificado SSL estándar de GoDaddy".

Verá un icono de advertencia en la barra de búsqueda de URL de Firefox (específicamente), que indica que puede haber imágenes o elementos inseguros en su sitio. Hasta donde sé, es solo una cuestión de cómo Firefox procesa la información sobre el certificado, o la información incluida en él. Esto no sucede en safari, cromo u otros navegadores. Encontré una solución para esto, instalando en lugar de un "SSL estándar" un "Certificado SSL premium o un certificado de validación extendida EVC " que tiene información más detallada sobre la compañía de sitios. Obtendrá una barra de URL segura con candado verde.

Sin embargo, el certificado SSL premium podría ser un poco más caro, alrededor de $ 150- $ 200 USD al año.