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

Question

Tengo una página web que contiene un formulario de entrada. HTTPS está habilitado a través de un redireccionamiento de Apache para todas las solicitudes que coinciden con esa página. Desafortunadamente, como el CSS extrae imágenes externas con '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

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

Answer 2

Debe usar la URL completa para su imagen:

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

o

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

Esto resolvió mi problema hace algún tiempo.

Answer 3

Actualización 12/17/2014:

Ahora que SSL es encouraged for everyone y doesn’t have performance concerns, esta técnica es ahora un anti-patrón. Si el activo que necesita está disponible en SSL, utilice siempre el activo https://.

Permitir que el fragmento solicite a través de HTTP abre la puerta a ataques como recent Github Man-on-the-side attack. Es siempre seguro para solicite activos HTTPS incluso si su sitio está en HTTP, sin embargo, en el reverso is not true.

Más orientación y detalles en Eric Mills’ guide to CDNs & HTTPS.

Fuente: Paul Irish – The Protocol-relative URL

---

Aquí es una solución muy popular:

Hay un pequeño truco que puede salirse con la que ahorrará algunos dolores de cabeza:

En HTML

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

En CSS

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