Risolvere gli avvisi di contenuto misto in WordPress

Gli avvisi di contenuto misto sono uno dei problemi più comuni che i proprietari di siti WordPress incontrano dopo il passaggio da HTTP a HTTPS. Si verificano quando il tuo sito viene caricato tramite una connessione HTTPS sicura, ma alcune risorse della pagina (immagini, script, fogli di stile, iframe) vengono ancora richieste tramite HTTP standard. I browser trattano questo come un rischio per la sicurezza, e a ragione. La buona notizia è che il contenuto misto è facile da risolvere una volta capito da dove proviene.

Come appaiono gli avvisi di contenuto misto nel browser

Quando una pagina contiene contenuto misto, i browser rispondono in modi diversi a seconda del tipo di risorsa. Per il contenuto misto "attivo" (script, iframe, fogli di stile), la maggior parte dei browser blocca completamente la risorsa e mostra un avviso nella console di sviluppo. Per il contenuto misto "passivo" (immagini, audio, video), la risorsa potrebbe ancora caricarsi, ma l'icona del lucchetto nella barra degli indirizzi scompare o mostra un triangolo di avviso.

In Chrome vedrai messaggi come "Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure resource" nella console. Firefox mostra un lucchetto grigio con un triangolo di avviso. Safari può bloccare silenziosamente alcune risorse senza un chiaro feedback visivo, rendendo il debug più complicato.

Il risultato pratico è che il tuo sito appare rotto ai visitatori. Le immagini potrebbero non caricarsi, gli stili potrebbero mancare e gli script potrebbero fallire. Peggio ancora, Google considera HTTPS come un segnale di ranking, quindi i problemi di contenuto misto possono indirettamente danneggiare la tua SEO.

Come trovare ogni risorsa di contenuto misto sul tuo sito

Prima di poter correggere qualcosa, hai bisogno di un elenco completo delle risorse HTTP che vengono caricate. Ci sono diversi modi affidabili per farlo:

• Scansione InspectWP: Esegui una scansione sul tuo sito. La sezione HTML elenca ogni URL non sicuro trovato sulla pagina, fornendoti un inventario chiaro di ciò che deve essere risolto.
• Console DevTools del browser: Apri gli strumenti di sviluppo del tuo browser (F12 o Cmd+Shift+I su Mac), vai alla scheda Console e ricarica la pagina. Ogni avviso di contenuto misto appare qui con l'URL esatto della risorsa offendente.
• Strumento Why No Padlock: Visita whynopadlock.com e inserisci il tuo URL. Scansiona la pagina e segnala tutte le risorse non sicure in un elenco semplice.
• Test SSL Labs: Sebbene principalmente per verificare il tuo certificato SSL, il test Qualys SSL Labs può anche segnalare problemi di contenuto misto.

Per siti con molte pagine, potresti voler controllare più della sola homepage. Testa le landing page importanti, gli articoli del blog (in particolare quelli più vecchi) e le pagine con media o contenuti di terze parti incorporati.

Cause comuni di contenuto misto in WordPress

Il contenuto misto raramente proviene da una sola fonte. Ecco i colpevoli più comuni:

• URL HTTP hardcoded nel contenuto degli articoli: Se hai creato articoli e pagine prima di passare a HTTPS, tutti gli URL delle immagini, i link e i media incorporati nell'editor di contenuti utilizzano ancora http://. WordPress li memorizza come URL assoluti nel database.
• File del tema con URL hardcoded: Alcuni temi codificano i percorsi delle immagini o gli URL delle risorse esterne con http:// invece di utilizzare URL protocol-relative o funzioni di WordPress.
• Asset dei plugin: I plugin più vecchi o mal mantenuti possono caricare i loro file CSS e JavaScript tramite URL HTTP.
• Embed e iframe esterni: Le incorporazioni di Google Maps, i video di YouTube (codici di incorporamento più vecchi), i widget dei social media e gli script pubblicitari a volte utilizzano HTTP.
• CSS personalizzato o contenuto dei widget: Immagini di sfondo, import di font o altre risorse specificate in campi CSS personalizzati o widget di testo.
• Configurazione CDN: Se utilizzi un CDN, potrebbe essere configurato per servire gli asset tramite HTTP invece che HTTPS.

Passo 1: Aggiorna WordPress e gli URL del sito

Prima di tutto, assicurati che gli URL principali di WordPress siano corretti. Vai su Impostazioni, poi Generali e controlla che sia l'indirizzo WordPress (URL) che l'indirizzo del sito (URL) inizino con https://. Se mostrano ancora http://, aggiornali e salva. Questo dice a WordPress di generare tutti i link interni tramite HTTPS.

Passo 2: Cerca e sostituisci gli URL HTTP nel database

La soluzione più efficace per la stragrande maggioranza dei contenuti misti è un'operazione di ricerca e sostituzione su tutto il database. Questo affronta gli URL hardcoded in articoli, pagine, testo dei widget, custom field, opzioni del tema e dati serializzati.

Con WP-CLI (il metodo consigliato per chi è a suo agio con la riga di comando):

# Esegui sempre prima un dry run per vedere cosa verrà modificato
wp search-replace 'http://example.com' 'https://example.com' --all-tables --dry-run

# Controlla attentamente l'output e poi esegui realmente
wp search-replace 'http://example.com' 'https://example.com' --all-tables

# Se il tuo sito utilizza anche il sottodominio www, esegui entrambe le varianti
wp search-replace 'http://www.example.com' 'https://www.example.com' --all-tables

WP-CLI gestisce correttamente i dati serializzati, il che è cruciale. Molti plugin memorizzano le impostazioni come array serializzati nel database, e un find-and-replace SQL ingenuo romperebbe il formato di serializzazione.

Risolvere il contenuto misto con il plugin Better Search Replace

Se non hai accesso alla riga di comando, il plugin Better Search Replace fornisce un'alternativa user-friendly:

1. Installa e attiva Better Search Replace dalla directory dei plugin di WordPress.
2. Vai su Strumenti, poi Better Search Replace.
3. Nel campo "Search for", inserisci http://example.com (il tuo dominio reale).
4. Nel campo "Replace with", inserisci https://example.com.
5. Seleziona tutte le tabelle nell'elenco delle tabelle (Ctrl+A o Cmd+A).
6. Spunta prima "Run as dry run" e fai clic su "Run Search/Replace".
7. Verifica i risultati. Se le sostituzioni sembrano corrette, deseleziona "Run as dry run" ed esegui di nuovo.

Dopo la sostituzione, svuota eventuali plugin di caching e controlla di nuovo il tuo sito.

Usare Really Simple SSL come soluzione rapida

Il plugin Really Simple SSL adotta un approccio diverso. Invece di correggere gli URL nel database, riscrive dinamicamente gli URL HTTP in HTTPS tramite output buffering e filtri WordPress. Installalo, attivalo e gestisce automaticamente il resto.

Funziona bene come soluzione immediata, ma aggiunge un piccolo sovraccarico di elaborazione a ogni pagina. Per le migliori prestazioni, è meglio correggere gli URL alla fonte (a livello di database) e disabilitare il plugin successivamente. Considera Really Simple SSL come una rete di sicurezza e non come una soluzione permanente.

Correzione manuale di file di temi e plugin

Alcuni contenuti misti provengono da URL hardcoded nei file del tema o del plugin piuttosto che dal database. Cerca nella directory del tuo tema attivo i riferimenti a http://:

# Cerca URL HTTP hardcoded nel tuo tema
grep -r "http://" /path/to/wp-content/themes/your-theme/ --include="*.php" --include="*.css" --include="*.js"

Sostituisci gli URL HTTP hardcoded con HTTPS, o meglio ancora, usa URL protocol-relative (//example.com/resource.js) o funzioni WordPress come esc_url() che rispettano l'impostazione del protocollo del sito.

Per i plugin di terze parti, non modificare direttamente i file del plugin (gli aggiornamenti sovrascriveranno le tue modifiche). Contatta invece l'autore del plugin o cerca una versione più recente che supporti HTTPS. Se un plugin carica costantemente asset tramite HTTP, considera di sostituirlo con un'alternativa meglio mantenuta.

Aggiungere un redirect da HTTP a HTTPS

Dopo aver risolto tutti i contenuti misti nel database e nei file, configura un redirect a livello di server in modo che le richieste HTTP rimanenti vengano automaticamente reindirizzate a HTTPS:

# Aggiungi a .htaccess (Apache)
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Per i server Nginx, aggiungi questo al tuo server block:

server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
}

Forzare HTTPS in wp-config.php

Se il tuo sito è dietro un reverse proxy o un load balancer, WordPress potrebbe non rilevare correttamente HTTPS. Aggiungi quanto segue al tuo wp-config.php:

define('FORCE_SSL_ADMIN', true);

// Se dietro un reverse proxy o un load balancer
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
    $_SERVER['HTTPS'] = 'on';
}

Verifica le tue correzioni e previeni futuri contenuti misti

Dopo tutte le modifiche, esegui una nuova scansione InspectWP. L'elenco degli URL non sicuri nella sezione HTML dovrebbe essere vuoto. Apri anche la console di sviluppo del tuo browser e conferma che non appaiono avvisi di contenuto misto.

Per evitare che il contenuto misto ritorni:

• Imposta un header Content-Security-Policy: Aggiungere Content-Security-Policy: upgrade-insecure-requests come header di risposta dice ai browser di aggiornare automaticamente le richieste HTTP a HTTPS. Questa è una buona rete di sicurezza.
• Usa URL relativi o HTTPS: Quando incorpori manualmente immagini o risorse, usa sempre https:// o URL protocol-relative.
• Controlla gli embed di terze parti: Prima di incollare i codici di incorporamento di servizi esterni, controlla che utilizzino HTTPS.
• Audit regolari: Imposta report InspectWP automatici per rilevare contenuti misti che appaiono dopo aggiornamenti di contenuto o modifiche ai plugin.