Eseguire il vostro sito WordPress su HTTPS non è più un optional. 🔒 Non solo è più sicuro (tutto è crittografato, niente è passato in chiaro), ma crea anche fiducia, è un fattore di ranking SEO e fornisce dati di referral più accurati. I problemi di prestazioni legati alla crittografia sono stati in gran parte risolti grazie a HTTP/2 e Let’s Encrypt ha cambiato l’intero settore, offrendo un modo semplice per ottenere certificati SSL gratuiti.

Tuttavia, per alcune aziende, uno dei motivi più importanti per adeguarsi è che i browser come Chrome e Firefox si stanno diventando più severi con i siti che non vanno su HTTPS e mostrano avvertimenti più stringendi. Questa è l’ultima cosa che vorreste che i vostri visitatori vedano!

Abbiamo pubblicato una guida approfondita su come migrare da HTTP a HTTPS, e un problema in cui si imbattono di frequente i proprietari di siti web sono gli “avvisi di contenuto misto”. Oggi vi mostreremo alcunsoluzioni per correggerli sul vostro sito WordPress.

Che cos’è un Avviso di Contenuto Misto?

Un avviso di contenuto misto viene visualizzato nel browser di un utente quando il sito WordPress carica contemporaneamente script o contenuti sia da HTTPS che da HTTP. Non è possibile caricare entrambi poiché sono protocolli completamente separati. Quando eseguite la migrazione ad HTTPS, tutto deve essere eseguito su HTTPS.

Wired ha documentato la transizione da HTTP a HTTPS e un problema di avviso di contenuto misto in cui si sono imbattuti:

“[…] una delle maggiori sfide del passaggio a HTTPS è la preparazione di tutti i nostri contenuti da consegnare su connessioni sicure. Se una pagina viene caricata su HTTPS, tutte le altre risorse (come immagini e file Javascript) devono essere caricate su HTTPS. Stiamo registrando un elevato volume di report relativi a questi problemi di “contenuto misto” o eventi in cui una risorsa HTTP non sicura viene caricata nel contesto di una pagina HTTPS protetta. Per eseguire correttamente il rollout, dobbiamo assicurarci di ridurre il numero di problemi legati ai contenuti misti – cioè che stiamo consegnando la maggior parte dei contenuti di WIRED.com nel modo più sicuro possibile”

Di seguito sono riportati alcuni esempi di ciò che accade nei browser se non si correggono questi avvisi.

Esempio di Avviso di Contenuto Misto in Chrome

Ecco un esempio di ciò che accade in Chrome quando si attiva un avviso di contenuto misto su un sito WordPress. Secondo NetMarketShare, Chrome al momento è in testa al gruppo in termini di quota di mercato dei browser, essendo utilizzato da oltre il 60% del web. Quindi il seguente avviso è il quello che vedranno i vostri visitatori con maggior probabilità.

Avviso di contenuto misto in Chrome

Avviso di contenuto misto in Chrome

Esempio di Avviso di Contenuto Misto in Firefox

Ecco un esempio di cosa succede in Firefox quando si attiva un avviso di contenuto misto su un sito WordPress.

Avviso di contenuto misto in Firefox

Avviso di contenuto misto in Firefox

Esempio di Avviso di Contenuto Misto in Microsoft Edge

Ecco un esempio di ciò che accade nel browser Edge di Microsoft quando si attiva un avviso di contenuto misto su un sito WordPress.

Avviso di contenuto misto in Microsoft Edge

Avviso di contenuto misto in Microsoft Edge

Esempio di Avviso di Contenuto Misto in Internet Explorer

Ecco un esempio di ciò che succede in Internet Explorer quando viene generato un avviso di contenuto misto. Come potete vedere, IE è probabilmente uno dei peggiori perché in realtà interrompe il rendering della pagina fino a quando non si fa clic sul popup. Fortunatamente, Internet Explorer non detiene più una buona quota del mercato dei browser.

Avviso di contenuto misto in Internet Explorer

Avviso di contenuto misto in Internet Explorer

Quali sono le Cause degli Avvisi di Contenuto Misto?

Abbiamo scoperto che gli avvisi di contenuto misto più comuni vengono visualizzati nel tempo subito dopo una migrazione del proprio sito WordPress da HTTP a HTTPS. I collegamenti HTTP vengono semplicemente trasferiti così come sono e questo fa sì che comincino ad essere sparati fuori avvisi di contenuto misto. Un altro motivo potrebbe essere che avete appena aggiunto un nuovo servizio o plugin.

Ecco alcuni altri esempi di cosa potrebbe causare un avviso:

  • Gli sviluppatori di plugin a volte usano percorsi assoluti (http://yourdomain.com/style.css) nei loro plugin o temi per collegarsi a CSS e JavaScript, invece di utilizzare percorsi relativi (/style.css).
  • Le immagini hanno URL hardcoded (http://yourdomain.com/image.png) che puntano ad HTTP. Questi URL potrebbero essere all’interno di un post, una pagina o anche un widget.
  • Avete un collegamento a versioni HTTP di script esterni (jQuery ospitati all’esterno, Font Awesome, ecc.)
  • Avete incorporato gli script video utilizzando HTTP invece di HTTPS.

Come Correggere gli Avvisi di Contenuto Misto

Seguite questi semplici passaggi per eliminare gli avvisi di contenuto misto in WordPress. Questo presuppone che abbiate già fatto quanto segue:

Utilizzeremo il nostro sito di sviluppo (wpdev.ink) negli esempi che seguono.

Passo 1

La prima cosa che dovete fare è scoprire quali risorse stanno ancora caricando su HTTP. Individuate la pagina in cui si trova e avviate Chrome DevTools. Ricordate, potrebbe verificarsi solo in alcune aree del vostro sito, non a livello globale.

  • Windows: F12 or CTRL + Shift + I
  •  MAC: Cmd + Opt + I)

Potete anche aprire Chrome DevTools dal menu degli strumenti.

Avvio Chrome DevTools

Avvio Chrome DevTools

Passo 2

Ci sono un paio di posti in cui potete verificare quali risorse non vengono caricate su HTTPS. Il primo è la scheda “Console“. Nota: potrebbe essere necessario aggiornare la pagina dopo aver aperto Chrome DevTools affinché carichi tutto correttamente.

Di seguito possiamo vedere facilmente che c’è un’immagine non sicura collegata a una versione HTTP del sito e un link che punta a una versione ospitata HTTP di jQuery.

Contenuto misto nella console di Chrome DevTools

Contenuto misto nella console di Chrome DevTools

Potete anche guardare nella scheda “Sicurezza“. Questa vi mostrerà le origini non protette e potrete fare clic su “View the request in the network panel” (“Visualizza la richiesta nel pannello di rete”). Nota: potrebbe essere necessario aggiornare la pagina dopo aver aperto Chrome DevTools affinché carichi tutto correttamente.

Chrome DevTools security

Chrome DevTools security

E, ultimo ma non meno importante, è possibile visualizzare le richieste nella scheda “Network“. Nota: potrebbe essere necessario aggiornare la pagina dopo aver aperto Chrome DevTools affinché carichi tutto correttamente.

Chrome DevTools network

Chrome DevTools network

Se non utilizzate Chrome, o volete solo un breve riepilogo degli errori, potete anche utilizzare uno strumento gratuito come Why No Padlock. Questo esegue la scansione di una singola pagina e mostra tutte le risorse non protette.

Why No Padlock?

Why No Padlock?

Controllo degli Avvisi HTTPS in Massa

Se siete preoccupati per il resto del vostro sito, potreste fare dei controlli in massa. Ecco alcune soluzioni consigliate.

  • C’è un piccolo strumento gratuito chiamato SSL Check di JitBit che potete utilizzare per eseguire la scansione del vostro sito HTTPS WordPress e cercare immagini e script non sicuri che attivano un messaggio di avviso nei browser. Il numero di pagine sottoposte a scansione è limitato a 200 per sito Web.
  • Lo strumento Ahrefs audit tool ora ha la capacità di rilevare contenuti misti HTTPS/HTTP. Se avete già accesso a questo strumento, o qualcuno del vostro team di marketing, può essere un ottimo modo per una ricerca accurata.
  • HTTPS Checker è un software desktop che potete installare per effettuare la scansione del vostro sito. Può aiutarvi a controllare avvisi e contenuti “non sicuri” dopo grandi cambiamenti. È disponibile su Windows, Mac e Ubuntu. Il piano gratuito vi consente di controllare fino a 100 pagine.

Passo 3

Il passaggio successivo è confermare che le risorse caricate su HTTP sono accessibili tramite HTTPS. Molto probabilmente sarà sufficiente aggiornare i collegamenti. In questo esempio utilizzeremo l’immagine non sicura e jQuery ospitato.

  • http://wpdev.ink/wp-content/uploads/2018/06/website-never-done.jpg
  • http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Se prendiamo entrambi questi URL, li inseriamo nella barra degli indirizzi del nostro browser e inseriamo HTTPS all’inizio, possiamo vedere che caricano perfettamente. Pertanto, dobbiamo fare solo una ricerca e sostituzione sul nostro sito.

Passo 4

Ci sono molti modi per eseguire una ricerca e sostituzione in WordPress. In questo post vi consiglieremo due diverse soluzioni.

Se siete curiosi, non è consigliabile utilizzare il plugin Really Simple SSL. Anche se è un ottimo plugin, non dovreste fare affidamento su un plugin come questo a lungo termine. Non eseguirete più la migrazione a HTTP, quindi fatela nel modo giusto e aggiornate i vostri URL HTTP nel database (come vedremo di seguito).

Se siete clienti di Kinsta, potete utilizzare lo strumento di ricerca e sostituzione disponibile direttamente nel cruscotto di MyKinsta. Alla voce Siti, fate clic su “Gestisci” accanto al sito in cui desiderate eseguire una ricerca e sostituzione. Quindi fate clic su “Strumenti” e troverete lo strumento Cerca e Sostituisci nella parte inferiore.

Strumento cerca e sostituisci di Kinsta

Strumento cerca e sostituisci di Kinsta

  1. Inserite nel campo Cerca il valore che volete cercare nel database, che in questo caso è il nostro dominio HTTP: http://wpdev.ink.
  2. Inserite nel campo Sostituisci il nuovo valore che deve essere utilizzato per sostituire il valore che si sta cercando. In questo caso, è il nostro dominio HTTPS: https://wpdev.ink.
  3. Assicuratevi prima che l’opzione “Dry Run” sia selezionata, poiché in questo modo viene conteggiato il numero di sostituzioni effettuate senza che le sostituzioni siano eseguite davvero. Quindi fate clic su “Sostituisci”.

Importante: assicuratevi di non inserire spazi vuoti iniziali o finali in nessuno dei campi poiché ciò potrebbe produrre risultati indesiderati.

Cerca e sostituisci da HTTP a HTTPS

Cerca e sostituisci da HTTP a HTTPS

Vedrete un avviso che conferma che state per eseguire il comando per calcolare il numero di sostituzioni effettuate. Cliccate su “Sostituisci” per confermare. Nota: in modalità “Dry Run” non sarà effettuata alcuna modifica al database.

Calcolo delle sostituzioni in cerca e sostituisci

Calcolo delle sostituzioni in cerca e sostituisci

Vedrete quindi il numero totale di sostituzioni che verranno apportate.

Numero di sostituzioni

Numero di sostituzioni

Potrete, quindi, annullare la selezione di “Dry Run” e fare nuovamente clic su “Sostituisci” per eseguire la ricerca e sostituzione, apportando modifiche al database. Nota: in questo momento viene eseguito automaticamente un backup (identificatore di backup: beforesearchandreplace). Quindi potete sempre tornare indietro se necessario.

Cerca e sostituisci live

Cerca e sostituisci live

Visualizzerete quindi una conferma finale del numero di sostituzioni effettuate.

Conferma in cerca e sostituisci live

Conferma in cerca e sostituisci live

Se non siete clienti di Kinsta, potete eseguire lo stesso task con il plugin gratuito Better Search Replace e poi semplicemente eliminare il plugin quando avete finito.

Il plugin Better Search Replace

Il plugin Better Search Replace

Potete scaricarlo dalla repository di WordPress o cercarlo nella dashboard di WordPress alla voce “Aggiungi nuovo” plugin. Dopo averlo attivato, cercate il vostro dominio HTTP (http://yourdomain.com) e sostituitelo con il vostro dominio HTTPS (https://yourdomain.com).

Le opzioni di Better Search Replace

Le opzioni di Better Search Replace

In alternativa, potete anche fare una ricerca e sostituzione con interconnect/it Search Replace DB PHP Script o con WP-CLI.

Passo 5

Dopo aver completato la ricerca e la sostituzione, vi consigliamo di ricontrollare il vostro sito per essere certi che gli avvisi di contenuto misto non ci siano più. Vi consigliamo di visitare il vostro sito e di cliccare su alcune pagine guardando l’indicatore di stato del browser nella barra degli indirizzi.

Sul nostro sito, possiamo vedere che l’immagine non sicura è ora corretta, ma l’avviso relativo a jQuery ospitato è ancora lì. Il motivo è che abbiamo eseguito una ricerca e sostituzione su risorse che caricavano dal nostro dominio. Questo è uno script esterno che deve essere aggiornato manualmente.

Avviso di contenuto misto

Avviso di contenuto misto

In questo caso, lo script è stato aggiunto manualmente nella nostra intestazione di WordPress (header.php). Lo script dovrebbe utilizzare un URL relativo, quindi lo abbiamo aggiornato in: //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js.

Script esterno HTTP

Script esterno HTTP

Per la maggior parte di voi, la ricerca e sostituzione molto probabilmente risolverà tutti i problemi. In realtà solo chi ha inserito codice manualmente sul sito WordPress potrebbe incorrere in problemi aggiuntivi. Se pensate che vi sia uno script esterno inserito manualmente nel codice di uno dei vostri temi o plugin, e avete difficoltà a rintracciarlo, non esitate a contattare lo sviluppatore per ricevere assistenza.

Esempio di Chrome Senza Avvisi di Contenuto Misto

Ecco un esempio di ciò che accade in Chrome quando tutto viene caricato correttamente su HTTPS senza avvisi di contenuto misto.

Chrome senza avvisi di contenuto misto

Chrome senza avvisi di contenuto misto

Esempio di Firefox Senza Avvisi di Contenuto Misto

Ecco un esempio di ciò che accade in Firefox quando tutto viene caricato correttamente su HTTPS senza avvisi di contenuto misto.

Firefox senza avvisi di contenuto misto

Firefox senza avvisi di contenuto misto

Esempio di Microsoft Edge Senza Avvisi di Contenuto Misto

Ecco un esempio di ciò che accade in Microsoft Edge quando tutto viene caricato correttamente su HTTPS senza avvisi di contenuto misto.

Microsoft Edge senza avvisi di contenuto misto

Microsoft Edge senza avvisi di contenuto misto

E a Proposito di HSTS?

Alcuni di voi potrebbero chiedersi perché non si possa semplicemente usare HSTS (HTTP Strict Transport Security) per risolvere il problema. HSTS è stato creato come metodo per forzare il browser a utilizzare connessioni protette quando un sito viene eseguito su HTTPS. È un’intestazione di sicurezza che aggiungete al server Web e si riflette nell’header della risposta come Strict-Transport-Security.

HSTS non è una soluzione rapida per la correzione di tutti gli avvisi di contenuto misto. L’HSTS si limita a gestire i redirect mentre l’avviso di contenuto misto è una funzionalità del browser stesso. Inoltre, non avete il controllo sui siti di terze parti che abilitano HSTS. Pertanto è sempre necessario aggiornare sempre gli URL http://.

Esa Jokinen approfondisce le ragioni di questa discussione di Server Fault.

Altre Raccomandazioni (Casi Speciali)

  • Se utilizzate il page builder Elementor, dovete anche accedere alle impostazioni di Elementor e aggiornare l’URL del vostro sito in modo che i file CSS si rigenerino con il nuovo URL. Una volta fatto questo, svuotare la cache dovrebbe eliminare tutti gli avvisi non sicuri causati da Elementor.
  • Se utilizzate il CDN di Kinsta, consigliamo di eliminare anche la zona CDN.

Riepilogo

Per la maggior parte di voi, una semplice ricerca e sostituzione dovrebbe eliminare rapidamente gli avvisi di contenuto misto e riportare il sito alla normalità in pochi minuti. Se non si aggiusta tutto, è molto probabile che ci siano uno o due script inseriti manualmente nel codice. Per questi, dovrete trovarli e aggiornarli manualmente.

Se avete commenti o problemi, fatecelo sapere qui sotto nei commenti.

42
Condivisioni