Hai attivato HTTPS, il certificato è valido, eppure il lucchetto accanto all’indirizzo non compare, oppure compare con un avviso, o ancora alcune immagini spariscono e un modulo smette di funzionare. Nella maggior parte dei casi il colpevole ha un nome preciso: contenuti misti (in inglese mixed content). In questo articolo vediamo cosa sono, come trovarli e come eliminarli una volta per tutte.
Cosa sono i contenuti misti
Una pagina web non è un unico file: oltre al codice HTML, il browser scarica immagini, fogli di stile (CSS), script (JavaScript), font, video, iframe e così via. Si parla di contenuti misti quando una pagina caricata in https:// richiama una o più di queste risorse tramite http://, cioè senza cifratura.
Il problema è che basta una sola risorsa non cifrata per indebolire la protezione dell’intera pagina: quella risorsa potrebbe essere letta o, peggio, modificata durante il tragitto. Per questo i browser moderni reagiscono in modo deciso.
Due tipi di contenuti misti
Contenuti misti «passivi»
Sono le risorse che vengono solo mostrate: immagini, audio, video. Una modifica in transito non potrebbe prendere il controllo della pagina, ma potrebbe comunque alterarne l’aspetto. I browser di solito tentano di caricarle automaticamente in HTTPS; se all’indirizzo sicuro la risorsa non esiste, la bloccano. In entrambi i casi il lucchetto può non essere mostrato come «pienamente sicuro».
Contenuti misti «attivi»
Sono script, fogli di stile, iframe e richieste fatte dal codice della pagina. Qui il rischio è molto più alto: uno script modificato potrebbe rubare dati o cambiare il comportamento del sito. Per questo i browser li bloccano. Il risultato tipico è un sito «rotto»: impaginazione saltata perché manca il CSS, menu e slider fermi perché manca uno script, moduli che non si inviano.
Perché succede
I contenuti misti compaiono quasi sempre dopo il passaggio da HTTP a HTTPS. Le cause più frequenti sono:
- link assoluti salvati nel database: le immagini inserite negli articoli o nelle schede prodotto prima del passaggio contengono l’indirizzo completo in
http://; - impostazioni del tema o del page builder: logo, sfondo, icone e caratteri impostati con un indirizzo assoluto;
- codice scritto a mano: widget HTML, codici di monitoraggio, file del tema che includono risorse con
http://fisso; - risorse esterne: mappe, video, font o script presi da altri siti indicati con
http://; - CSS che richiamano immagini: un foglio di stile in HTTPS che contiene
url(http://...)per uno sfondo.
Come trovarli
La console del browser
È il metodo più rapido e preciso. In Chrome, Edge o Firefox:
- apri la pagina incriminata;
- premi
F12(o clic destro › Ispeziona) per aprire gli strumenti per sviluppatori; - vai nella scheda Console e ricarica la pagina.
Troverai messaggi che parlano di «Mixed Content» con l’indirizzo esatto della risorsa caricata in http://. Annotali: sono la tua lista di lavoro.
Il codice sorgente
Un’alternativa semplice: apri il codice sorgente della pagina (Ctrl+U) e cerca http://. Non tutti i risultati sono problemi (un semplice link verso un altro sito non lo è), ma quelli in attributi come src, nei tag <link> dei CSS o negli <iframe> sì.
Controlla più pagine
I contenuti misti possono essere diversi da pagina a pagina: controlla almeno la home, una pagina interna, un articolo, una scheda prodotto, il carrello e la pagina di contatto.
Come eliminarli
1. Prima di tutto, un backup
Le correzioni più efficaci agiscono sul database. Prima di procedere fai un backup, o assicurati di sapere come ripristinare: con JetBackup puoi ripristinare da solo file e database dal pannello.
2. WordPress: sostituisci gli indirizzi nel database
Dopo aver aggiornato gli indirizzi in Impostazioni › Generali, sostituisci nel database http://tuodominio.it con https://tuodominio.it (e lo stesso per la versione con www). Due attenzioni:
- usa uno strumento che gestisca i dati serializzati, come un plugin di ricerca e sostituzione affidabile o WP-CLI (che richiede l’accesso SSH: da noi è sulla porta 7530). Temi e page builder salvano le impostazioni in un formato che un «trova e sostituisci» qualsiasi rischia di corrompere;
- sostituisci solo l’indirizzo del tuo dominio, non qualsiasi
http://: i link esterni vanno valutati uno per uno.
Dopo la sostituzione, rigenera eventuali file CSS creati dal page builder (molti hanno un’opzione per farlo) e svuota tutte le cache.
3. PrestaShop: impostazioni e contenuti
Verifica che SSL sia attivo su tutto il negozio nelle impostazioni generali, poi controlla i contenuti inseriti a mano: descrizioni dei prodotti, pagine CMS, blocchi HTML dei moduli del tema, banner. Lì gli indirizzi assoluti in http:// vanno corretti manualmente o con uno strumento di sostituzione sul database. Infine svuota la cache del negozio e del tema.
4. Correggi il codice del tema
Se la console indica risorse che arrivano dai file del tema (ad esempio un font o uno script incluso nell’intestazione), correggi l’indirizzo nel file. Se il tema non è tuo, verifica prima se esiste un aggiornamento: spesso il problema è già risolto. E se modifichi un tema WordPress, fallo in un tema figlio, così le correzioni non spariscono al prossimo aggiornamento.
5. Risorse esterne
Per le risorse ospitate su altri siti, prova a sostituire http:// con https:// e verifica che l’indirizzo si apra. Quasi tutti i servizi moderni (mappe, video, font) sono disponibili in HTTPS. Se un servizio non lo supporta, è il caso di sostituirlo o di copiare la risorsa sul tuo sito, se la licenza lo consente.
6. Usa indirizzi relativi o senza protocollo con criterio
Per le risorse del tuo stesso sito, un indirizzo relativo (/wp-content/uploads/logo.png) funziona sia in HTTP sia in HTTPS. È una buona abitudine nel codice scritto a mano, meno nei contenuti gestiti dal CMS, che di solito salva indirizzi completi.
E i plugin che «correggono tutto»?
Esistono plugin che riscrivono al volo gli indirizzi http:// in https:// mentre la pagina viene generata. Possono essere utili come soluzione temporanea, ma hanno due limiti: aggiungono lavoro a ogni caricamento e nascondono il problema invece di risolverlo. Se un giorno disattivi il plugin, i contenuti misti tornano. Meglio correggere i dati alla fonte.
Un discorso simile vale per l’intestazione Content-Security-Policy: upgrade-insecure-requests, che chiede al browser di caricare automaticamente in HTTPS le risorse indicate in HTTP. È uno strumento utile, ma funziona solo se la risorsa esiste davvero in HTTPS e non sostituisce la pulizia del database. Ne parliamo nell’articolo su HSTS e le altre intestazioni di sicurezza.
Verifica finale
- svuota la cache del sito (plugin o modulo di cache) e del browser, oppure usa una finestra in navigazione privata;
- riapri le pagine controllate in precedenza con la console aperta;
- nessun messaggio «Mixed Content» e lucchetto regolare: hai finito.
Serve aiuto?
Se la console mostra errori che non riesci a ricondurre a una causa, o se dopo la sostituzione qualcosa nel sito non funziona più, apri un ticket dall’area clienti indicando l’indirizzo della pagina e, se puoi, uno screenshot della console. Se preferisci un controllo complessivo dello stato del sito, dai un’occhiata anche ad AIweblab Scan e Report.