son - SSL y contenido mixto debido a las imágenes de fondo CSS

habilitar contenido mixto chrome

Question

Tengo una página web que contiene un formulario de inscripción. HTTPS se habilita mediante una redirección de Apache para todas las solicitudes que coincidan con esa página. Desafortunadamente, debido a que el CSS extrae imágenes externas usando ''background-image: url (/ images / ...)'', el navegador generará un mensaje de advertencia de que la página contiene contenido mixto.

¿Cuál es la mejor manera de resolver este problema?

Answer 1

Actualización 2014.12.17:

Ahora que se recomienda SSL para todos y no tiene problemas de rendimiento , esta técnica ahora es un antipatrón . Si el activo que necesita está disponible en SSL, use siempre el activo https:// .

Permitir que el fragmento de código solicite a través de HTTP abre la puerta a ataques como el reciente ataque de Github Man-on-the-side . Siempre es seguro solicitar activos HTTPS incluso si su sitio está en HTTP, sin embargo, lo contrario no es cierto .

Más orientación y detalles en la guía de Eric Mills para CDNs y HTTPS .

Fuente: Paul Irish - La URL relativa al protocolo

Aquí hay una solución muy popular:

Hay un pequeño truco con el que puedes escapar que te ahorrará algunos dolores de cabeza:

En HTML

<img src="//domain.com/img/logo.png">

En CSS

div{background: url(//path/to/image.png);}

Answer 2

Debes usar la URL completa para tu imagen:

https://your.domain.com/img/image.png`

o

https://your.domain.com/route/to/img/image.png

Esto solucionó mi problema hace algún tiempo.

Answer 3

También debe habilitar HTTPS para sus recursos estáticos, y luego asegurarse de que <link> refiere explícitamente a la URL de HTTPS para el recurso de CSS (cuyas URL relativas se interpretarán en relación a la base de HTTPS del archivo CSS).