SSL e contenuto misto a causa di immagini di sfondo CSS

Question

Ho una pagina Web contenente il modulo di iscrizione. HTTPS è abilitato tramite un reindirizzamento di Apache per tutte le richieste che corrispondono a quella pagina. Sfortunatamente, poiché il CSS estrae immagini esterne usando 'background-image: url (/ images/...)', il browser genererà un messaggio di avviso che la pagina contiene contenuti misti.

Qual è il modo migliore per risolvere questo problema?

Answer 1

È inoltre necessario abilitare HTTPS per le risorse statiche, quindi assicurarsi che l'<link> si riferisca esplicitamente all'URL HTTPS per la risorsa CSS (i cui url relativi verranno quindi interpretati in relazione alla base HTTPS del file CSS).

Answer 2

Si dovrebbe usare URL completo per l'immagine:

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

o

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

Questo risolto il problema qualche tempo fa.

Answer 3

Aggiornamento 2014/12/17:

Ora che SSL è encouraged for everyone e doesn’t have performance concerns, questa tecnica è ormai un anti-modello. Se la risorsa di cui hai bisogno è disponibile su SSL, usa sempre la risorsa https://.

Permettere lo snippet di richiedere su HTTP apre la porta per gli attacchi come lo recent Github Man-on-the-side attack. È sempre sicuro per richiesta risorse HTTPS anche se il tuo sito è su HTTP, tuttavia il is not true.

Ulteriori indicazioni e dettagli in Eric Mills’ guide to CDNs & HTTPS.

Fonte: Paul Irish – The Protocol-relative URL

---

Ecco una soluzione molto popolare:

C'è questo piccolo trucco è possibile ottenere via con che ti salverò qualche mal di testa:

In HTML

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

Nei CSS

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