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:

Un avviso di contenuto misto in Google Chrome

Un avviso di contenuto misto in Google Chrome

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:

Un avviso di contenuto misto in Firefox

Un avviso di contenuto misto in Firefox

Il prossimo è un esempio di come appare questo avviso in Microsoft Edge:

Un avviso di contenuto misto in Microsoft Edge

Un avviso di contenuto misto in Microsoft Edge

Ed ecco come appare in Internet Explorer:

Avviso di contenuto misto in Internet Explorer

Avviso di contenuto misto 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.

L'esecuzione del tuo sito WordPress su HTTPS non è più un optional. ✅ Ma spostare il sito da HTTP a HTTPS può generare avvisi di contenuto misto. Scopri come risolverli rapidamente in questa guida 💥Click to Tweet

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:

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:

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:

Potete anche aprire Chrome DevTools dal menu degli strumenti del vostro browser:

Chrome DevTools nel menu degli strumenti del browser

Chrome DevTools nel menu degli strumenti del 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:

Chrome DevTools mostra contenuto misto in console

Chrome DevTools mostra il contenuto misto nella console

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:

Scheda Security su Chrome DevTools

Scheda Security su Chrome DevTools

Nella scheda Network trovate anche un elenco delle richieste bloccate:

Network Chrome DevTools

Network Chrome DevTools

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:

Riassunto di Why No Padlock con gli errori di contenuto misto

Riassunto di Why No Padlock con gli errori di contenuto misto

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:

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:

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:

Lo strumento di ricerca e sostituzione in MyKinsta

Lo strumento di ricerca e sostituzione in MyKinsta

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:

Ricerca e sostituzione da HTTP a HTTPS in MyKinsta

Ricerca e sostituzione da HTTP a HTTPS in MyKinsta

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:

Stanco di un supporto all’hosting WordPress che non ti dà risposte? Prova il nostro team di supporto di livello mondiale! Dai un’occhiata ai nostri piani.

Il plugin WordPress Better Search Replace

Il plugin WordPress Better Search Replace

È 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):

Le opzioni del plugin WordPress Better Search Replace

Le opzioni del plugin WordPress Better Search Replace

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:

Avviso contenuto misto nella Console

Avviso contenuto misto nella Console

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:

Script HTTP esterno aggiunto all’header di WordPress nell'editor di temi

Script HTTP esterno aggiunto all’header di WordPress nell’editor di temi

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:

Chrome: nessun avviso di contenuto misto

Chrome senza avvisi di contenuto misto

Firefox presenterà un messaggio simile:

Firefox: nessun avviso di contenuto misto

Firefox: nessun avviso di contenuto misto

Ed ecco cosa vedrete in Microsoft Edge:

Microsoft Edge: nessun avviso di contenuto misto

Microsoft Edge senza avvisi di contenuto misto

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.

Sei pronti a passare a HTTPS, ma gli avvisi di contenuto misto ti mandano in crisi? 🥴 Scopri come risolvere questo problema nella nostra guida!Click to Tweet

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!


Risparmia tempo e costi e massimizza le prestazioni del sito con:

  • Aiuto immediato dagli esperti dell’hosting WordPress, 24/7.
  • Integrazione di Cloudflare Enterprise.
  • Copertura globale del pubblico con 28 data center in tutto il mondo.
  • Ottimizzazione del sito con il nostro Monitoraggio delle Prestazioni delle Applicazioni integrato.

Tutto questo e molto altro, in un piano senza contratti a lungo termine, con migrazioni assistite e una garanzia di 30 giorni di rimborso. Scopri i nostri piani o contattaci per trovare il piano che fa per te.