La gestione di un sito WordPress con HTTPS non è più qualcosa di opzionale. Non solo è più sicuro (tutto è criptato, senza che nulla sia passato in chiaro), ma crea anche fiducia, è un fattore di posizionamento nei motori di ricerca e fornisce dati di riferimento più precisi. Purtroppo, quando si passa da HTTP a HTTPS, i proprietari di siti web possono incontrare diversi problemi. Uno di questi è rappresentato dagli “avvisi di contenuto misto” (mixed content).
I problemi di performance legati alla crittografia sono stati risolti per la maggior parte grazie a HTTP/2, e Let’s Encrypt ha cambiato l’intero settore fornendo un modo semplice per ottenere certificati SSL gratuiti.
Soprattutto per le aziende online, i browser web come Google Chrome e Mozilla Firefox stanno adottando misure restrittive sui siti che non funzionano su HTTPS, e stanno mostrando avvertimenti più severi ai potenziali visitatori. Ad esempio, se usate versioni TLS legacy, potreste incontrare notifiche ERR_SSL_OBSOLETE_VERSION in Chrome. Gli avvisi sono l’ultima cosa che volete che i vostri visitatori vedano.
Per aiutarvi a evitare questi problemi, abbiamo una guida approfondita su come migrare da HTTP a HTTPS. Tuttavia, dopo aver seguito questo processo, potreste ancora vedere degli avvisi di contenuto misto.
Oggi vi mostreremo alcuni modi diversi per risolvere questo problema sul vostro sito WordPress.
Preferite guardare la versione video?
Cos’È un Avviso di Contenuto Misto?
Un avviso di contenuto misto appare nel browser di un utente quando il sito WordPress che sta cercando di visitare carica script o contenuti HTTPS e HTTP allo stesso tempo. Questo può causare problemi poiché HTTP e HTTPS sono protocolli completamente separati.
Quando si migra verso HTTPS, tutto deve essere eseguito su quel protocollo, incluse le immagini, i file JavaScript e così via. Di seguito riportiamo alcuni esempi di cosa può accadere se alcuni dei vostri contenuti sono ancora in fase di caricamento su HTTP.
Esempi di Avvisi di Contenuto Misto
Chrome è attualmente il primo browser, usato da oltre il 77% del web. Quindi il seguente avviso è quello che la maggior parte dei vostri visitatori vedrebbe:
Naturalmente, non tutti usano Chrome.
Ecco un esempio di ciò che accade in Firefox quando un avviso di contenuto misto viene visualizzato su un sito WordPress:
Il prossimo è un esempio di come appare questo avviso in Microsoft Edge:
Ed ecco come appare in Internet Explorer:
Come potete vedere, Internet Explorer è probabilmente uno dei browser peggiori in cui sperimentare questo avviso, perché in realtà rompe il rendering della pagina fino a quando non si fa clic sopra il popup.
In ogni caso, questo non è un errore da far vedere ai visitatori del vostro sito, qualsiasi sia il loro browser. Può essere aggiustato, ma prima bisogna capire perché si verifica.
Cosa Causa gli Avvisi di Contenuto Misto?
Abbiamo scoperto che i più comuni avvisi di contenuto misto appaiono subito dopo che qualcuno ha migrato il proprio sito WordPress da HTTP a HTTPS. Alcuni link in HTTP vengono riportati, e questo fa sì che gli avvisi a contenuto misto comincino ad apparire.
Ecco alcune cause aggiuntive di questo avviso:
- Avete appena aggiunto un nuovo servizio o plugin al vostro sito. In particolare, gli sviluppatori a volte usano percorsi assoluti (http://yourdomain.com/style.css) nei loro plugin o temi per collegarsi a CSS e JavaScript, invece di usare percorsi relativi (/style.css).
- Le vostre immagini hanno URL codificati (come http://yourdomain.com/image.png) che girano su HTTP. Questi potrebbero trovarsi all’interno di messaggi, pagine o anche widget.
- Vi state collegando a versioni HTTP di script esterni (hosted jQuery, Font Awesome, ecc.).
- Avete script video incorporati che usano HTTP invece di HTTPS.
Purtroppo, non si può scoprire la vera fonte del problema fino a quando non si inizia il processo di risoluzione del problema.
Con questo in mente, diamo un’occhiata ad alcuni metodi che si possono usare per correggere gli avvisi di contenuto misto.
Come Risolvere gli Avvisi di Contenuto Misto (4 Passi)
Potete seguire i quattro semplici passi qui sotto per correggere i vostri avvisi di contenuto misto su WordPress. Questo processo presuppone che abbiate già fatto quanto segue:
- Installato un certificato SSL
- Reindirizzamento da HTTP a HTTPS (in tutto il sito)
Negli esempi seguenti useremo un sito di sviluppo esemplificativo.
Passo 1: Scoprire Quali Risorse Stanno Caricando su HTTP
La prima cosa da fare è scoprire quali risorse stanno ancora caricando via HTTP.
Ricordate che questi avvertimenti potrebbero verificarsi solo in alcune aree del vostro sito, non a livello globale. Scorrete la pagina che presenta l’avviso e lanciate il Chrome DevTools con questi comandi:
- Windows: F12 o CTRL + Shift + I
- macOS : Cmd + Opt + I
Potete anche aprire Chrome DevTools dal menu degli strumenti del vostro browser:
Ci sono un paio di posti in cui potete controllare per scoprire quali risorse non si stanno caricando su HTTPS.
La prima è la scheda Console. Notate che potrebbe essere necessario aggiornare la pagina dopo aver aperto Chrome DevTools per poter caricare correttamente tutto.
Se sono presenti errori di contenuto misto, saranno evidenziati in rosso o in giallo. In genere, sono accompagnati da informazioni che dicono qualcosa come “Questa richiesta è stata bloccata; il contenuto deve essere servito su HTTPS” (o, in inglese, “This request has been blocked; the content must be served over HTTPS”). Ciò significa che le impostazioni del browser sono configurate per bloccare automaticamente qualsiasi contenuto HTTP.
Nel tentativo di garantire che le pagine vengano caricate solo su HTTPS, Chrome ha iniziato a bloccare i contenuti misti per impostazione predefinita con Chrome 79. Più recentemente, hanno rilasciato le funzioni per avviare l’aggiornamento automatico di immagini e media misti.
Pertanto, quando si usa Chrome DevTools, potreste vedere messaggi su contenuto misto che indicano che alcuni elementi richiesti sono stati automaticamente aggiornati:
Qui, possiamo chiaramente vedere che ci sono una varietà di elementi insicuri che causano gli avvisi di contenuto misto, tra cui un foglio di stile e uno script.
Noterete anche che è stata fatta una richiesta per un’immagine .jpg non sicura, che è stata automaticamente aggiornata a HTTPS. (Nota: se questa venisse visualizzata in un browser diverso da Chrome, non verrebbe aggiornata automaticamente).
Potete anche guardare nella scheda Security di Chrome DevTools. Questo vi mostrerà tutte le origini non sicure:
Nella scheda Network trovate anche un elenco delle richieste bloccate:
Se non usate Chrome, o desiderate solo un rapido riepilogo degli errori, potete usare anche uno strumento gratuito come Why No Padlock.
Questo strumento scansiona una singola pagina e mostra tutte le risorse insicure:
Questo strumento è facile da usare. Potete semplicemente inserire il vostro URL e fare clic su Test Page, e vi mostrerà gli eventuali errori presenti. In più è gratuito!
Controllo Massivo degli Avvisi HTTPS
Se siete preoccupati per il resto del vostro sito, potreste voler fare un controllo massivo. Ecco alcune opzioni consigliate per farlo:
- C’è un piccolo strumento gratuito chiamato SSL Check di JitBit, che potete usare per eseguire il crawl del vostro sito HTTPS e cercare immagini e script insicuri che faranno scattare un messaggio di avviso nei browser. Il numero di pagine da sottoporre a crawl è limitato a 400 per sito web.
- Lo strumento Ahrefs Site Audit ha la capacità di rilevare contenuti misti HTTPS/HTTP. Se avete già accesso a questa soluzione, o qualcuno del vostro team di marketing lo ha, può essere un ottimo modo per fare un controllo scrupoloso.
- HTTPS Checker è un software desktop che potete installare per scansionare il vostro sito. Può aiutarvi a verificare la presenza di avvisi e contenuti “non sicuri” dopo grandi cambiamenti. È disponibile su Windows, Mac e Ubuntu. Il piano gratuito consente di controllare fino a 500 pagine per scansione.
- SSL Insecure Content Fixer è un plugin di WordPress che potete installare sul vostro sito per scoprire errori che portano ad avvisi di contenuti misti. È gratuito da usare, ed eseguirà anche automaticamente le correzioni per risolvere gli errori.
L’uso di uno qualsiasi degli strumenti di cui sopra può aiutarvi a risparmiare tempo rispetto al dover controllare manualmente ogni pagina del vostro sito per verificare la presenza di avvisi ed errori di contenuto misto. Per una valutazione approfondita dei potenziali errori sul vostro sito, potreste considerare l’utilizzo di una combinazione di queste soluzioni.
Passo 2: Verificare Se le Risorse HTTP Sono Accessibili Tramite HTTPS
Il passo successivo è la conferma che le risorse caricate su HTTP sono accessibili su HTTPS. Molto probabilmente lo sono, è sufficiente aggiornare i link.
Per esempio, diciamo che i nostri errori di contenuto misto hanno indicato il seguente script jQuery insicuro e l’immagine .jpg:
- http://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.js
- http://example-site.com/wp-content/50d00acf6e4%2Fpuppy-thumb.jpg?v=1600261043278
Se prendiamo entrambi questi URL, li inseriamo nella barra degli indirizzi del nostro browser e sostituiamo “http” con “https” all’inizio, possiamo vedere che si caricano bene. Pertanto, dobbiamo semplicemente fare un “ricerca e sostituzione” sul nostro sito.
Passo 3: Come Fare una Ricerca e Sostituzione su WordPress
Ci sono molti modi per eseguire una ricerca e sostituzione su WordPress. In questa sezione, vi guideremo attraverso due diverse opzioni consigliate.
Se siete curiosi, vi sconsigliamo di usare uno strumento come Really Simple SSL. Anche se è un ottimo plugin, è meglio non fare affidamento su una soluzione come questa a lungo termine. Non migrerete di nuovo all’HTTP in seguito, quindi è meglio farlo nel modo giusto e aggiornare gli URL HTTP nel vostro database (come vi mostreremo di seguito).
Se siete clienti Kinsta, potete usare il nostro strumento di ricerca e sostituzione, disponibile proprio all’interno del cruscotto di MyKinsta.
Andate alla pagina Tools del vostro sito e fate clic su Search and Replace:
Successivamente, nel campo di ricerca, inserite il valore che desiderate cercare nella banca dati.
In questo caso, useremo il nostro dominio HTTP: http://kinstalife.com. Fate poi clic sul pulsante Search. Lo strumento di ricerca e sostituzione mostrerà il numero di occorrenze per la stringa data.
Spuntate la casella Replace per continuare il processo di sostituzione. Nel campo Replace with, inserite quello che dovrebbe sostituire il valore che state cercando. In questo caso, useremo il nostro dominio HTTPS: https://kinstalife.com.
Vi consigliamo anche di lasciare spuntata la casella Clear cache when ready, per pulire automaticamente la cache di Kinsta dopo che il processo di ricerca e sostituzione è stato completato. Infine, fate clic sul pulsante Replace:
Importante: Assicuratevi di non includere alcuno spazio bianco in questi campi, perché ciò potrebbe produrre risultati indesiderati.
Ricerca e Sostituzione delle Alternative
Se non usate Kinsta, è possibile eseguire lo stesso compito con il plugin gratuito Better Search Replace, e poi semplicemente eliminarlo dopo che avete finito:
È possibile scaricare questo strumento dall’elenco dei plugin di WordPress o cercarlo all’interno della bacheca di WordPress.
Dopo averlo attivato, vi basta cercare il vostro dominio HTTP (http://yourdomain.com) e sostituirlo con il vostro dominio HTTPS (https://yourdomain.com):
In alternativa, potete anche fare un ricerca e sostituzione con lo script PHP di interconnect/it chiamato Search Replace DB o con WP-CLI.
Date un’occhiata al nostro video per saperne di più sull’uso di ricerca e sostituzione in WordPress:
Passo 4: Confermare Che gli Avvisi di Contenuto Misto Sono Spariti
Dopo aver finito di fare il ricerca e sostituzione, ricontrollate il vostro sito per confermare che gli avvisi sui contenuti misti sono sparite. Vi consigliamo di visitare il vostro sito sul frontend e di fare clic su alcune pagine mentre guardate l’indicatore di stato del browser nella barra degli indirizzi.
Sul nostro sito, possiamo vedere che l’immagine . jpg è ora corretta, ma rimane un avviso di script insicuro.
Questo perché abbiamo eseguito un ricerca e sostituzione su risorse che sanno caricando dal nostro dominio. L’avviso jQuery è causato da uno script esterno che deve essere aggiornato manualmente:
In questo caso, lo script doveva essere aggiunto manualmente al nostro header di WordPress (header.php). Dovrebbe usare un URL relativo, quindi lo abbiamo aggiornato a //ajax.googleapis.com/ajax/ajax/libs/jquery/3.3.1/jquery.min.js:
Con una ricerca e sostituzione risolverete molto probabilmente tutti i vostri problemi.
In generale, incontrerete ulteriori problemi solo se avete inserito in hardcoding del codice sul vostro sito WordPress.
Se pensate che ci sia uno script esterno codificato in uno dei vostri plugin o temi e avete problemi a rintracciarlo, sentitevi liberi di contattare chi lo ha sviluppato per ricevere assistenza.
Esempi di Avvisi di Contenuto Misto
Quindi ora sapete cosa cercare per correggere questi errori di contenuto misto.
Ecco un esempio di ciò che accade in Chrome quando tutto si carica correttamente su HTTPS, senza avvisi di contenuto misto:
Firefox presenterà un messaggio simile:
Ed ecco cosa vedrete in Microsoft Edge:
Anche se la formulazione del messaggio può variare leggermente a seconda del browser che state usando, dovreste vedere una notifica che indica una connessione sicura. Se lo fate, saprete che non avete più a che fare con errori di contenuto misto sul vostro sito WordPress.
E l’HSTS?
Alcuni di voi potrebbero chiedersi perché non si può semplicemente usare HSTS (HTTP Strict Transport Security) per risolvere questo problema. HSTS è stato creato come un modo per forzare il browser a usare connessioni sicure quando un sito è in esecuzione su HTTPS.
È un header di sicurezza che potete aggiungere al vostro server web e si riflette nell’header della risposta come “Strict-Transport-Security”.
Tuttavia, HSTS non è una soluzione rapida per tutti gli avvisi di contenuto misto. HSTS si limita a gestire i reindirizzamenti, mentre l’avviso di contenuto misto è una caratteristica del browser stesso. Inoltre non avete controllo sull’abilitazione di HSTS da parte di siti di terze parti.
Pertanto, dovrete sempre aggiornare i vostri URL di http://. Esa Jokinen si addentra nel tema con questa risposta su Server Fault.
Raccomandazioni Aggiuntive (Casi Speciali)
Se state usando il page builder Elementor, dovete anche andare nelle sua impostazioni e aggiornare lì l’URL del vostro sito, in modo che i file CSS si rigenerino con il nuovo URL.
Quando l’avete fatto, lo svuotamento della cache dovrebbe risolvere eventuali avvisi di insicurezza dovuti a Elementor. Inoltre, se state usando il CDN Kinsta, vi raccomandiamo di purgare anche la zona CDN.
Riepilogo
Gli avvisi relativi al contenuto misto possono essere frustranti da affrontare, specialmente quando sono attribuibili a una manciata di cause diverse. Per fortuna, ci sono alcuni semplici passi da fare per risolvere questi problemi.
Nella maggior parte dei casi, una semplice ricerca e sostituzione dovrebbe risolvere rapidamente gli avvisi di contenuto misto e far tornare il vostro sito alla normalità in pochi minuti. Se questo procedimento non risolve tutto, è probabile che ci siano uno o due script codificati in hardcoding. Dovrete trovarli e aggiornarli manualmente per eliminare questo errore o assumere una persona esperta di sviluppo che possa farlo al posto vostro.
Se avete un feedback o avete qualche problema, fatecelo sapere qui sotto nella sezione commenti!
Redattore Capo presso Kinsta e Content Marketing Consultant per sviluppatori di plugin WordPress. Entra in contatto con Matteo su Twitter.
Lascia un commento