iframe refused to connect: perché succede e come risolverlo

iframe refused to connect

iframe refused to connect: cause e soluzioni, con verifica | We.Inc

Perché un iframe mostra "refused to connect": X-Frame-Options o CSP frame-ancestors sulla pagina incorporata. Incolla i suoi header di risposta per vedere il verdetto, poi copia la correzione lato server.

Il riquadro grigio "refused to connect" significa che la pagina dentro il tuo iframe ha detto al browser di non essere incorporata. Lo fa con un header di risposta X-Frame-Options (DENY o SAMEORIGIN) o con una regola frame-ancestors della Content-Security-Policy. Solo il server del sito incorporato può rimuovere il blocco. Incolla qui sotto i suoi header per vedere quale regola ti blocca.

Cosa significa ogni valore dell'header per il tuo iframe

Header sulla pagina incorporata
Chi può incorporarla

X-Frame-Options: DENY
Nessuno, nemmeno lo stesso sito

X-Frame-Options: SAMEORIGIN
Solo le pagine della stessa origine

X-Frame-Options: ALLOW-FROM ...
Obsoleto, ignorato dai browser moderni

Content-Security-Policy: frame-ancestors 'none'
Nessuno

Content-Security-Policy: frame-ancestors 'self' https://a.example
La stessa origine più i siti elencati

Nessuno dei due header
Chiunque

Questo errore non è un problema di rete e il tuo tag iframe non ha nulla di sbagliato. Il browser ha scaricato la pagina, ha letto un header che vieta l'incorporamento e ha sostituito il contenuto con un errore. Il motivo è la protezione dal clickjacking: a una pagina che chiunque può incorporare si possono sovrapporre pulsanti invisibili. La soluzione dipende da quale server ha inviato l'header.

Apri la pagina che vuoi incorporare in una scheda normale, apri gli strumenti per sviluppatori e seleziona la richiesta del documento nel pannello Network.
Copia i suoi header di risposta e incollali nello strumento di verifica, o modifica l'esempio già presente.
Inserisci l'origine della pagina che contiene l'iframe. Lo strumento applica le stesse regole del browser e indica l'header che decide.
Se il server è tuo, copia la correzione corrispondente dagli esempi per server. Se il sito è di qualcun altro, inserisci un link invece di incorporarlo.

Quando frame-ancestors è presente in una Content-Security-Policy applicata, i browser ignorano del tutto X-Frame-Options. Correggi prima la CSP.
Nessuno dei due header funziona da un meta tag. Entrambi devono essere veri header di risposta HTTP inviati dal server o dalla CDN.
Un header Content-Security-Policy-Report-Only non blocca mai l'incorporamento. Si limita a segnalare, quindi cerca l'header che viene applicato.
Se devi consentire alcuni siti partner, usa frame-ancestors con un elenco. X-Frame-Options non ha un modo funzionante per indicare un altro sito.
Molti grandi siti bloccano l'incorporamento di proposito. Rispettalo: usa il loro URL di embed ufficiale se ne offrono uno, oppure un semplice link.

Domande frequenti

Posso aggirare refused to connect dalla mia pagina?

No. La regola è applicata dal browser del visitatore per conto del sito incorporato, e nessun attributo del tuo iframe può scavalcarla. Le uniche strade sono cambiare gli header del sito incorporato, usare un URL di embed che il sito fornisce per l'incorporamento, o mettere un link esterno.

Perché il mio sito si rifiuta di caricarsi in un suo stesso iframe?

Controlla se c'è X-Frame-Options: DENY, o frame-ancestors 'none'. Entrambi bloccano ogni pagina genitore, comprese quelle dello stesso dominio. Passa a SAMEORIGIN o frame-ancestors 'self'. Ricorda che un sottodominio o una porta diversi sono un'origine diversa.

Devo usare X-Frame-Options o frame-ancestors?

Usa frame-ancestors, perché può elencare più genitori consentiti e prevale ogni volta che sono presenti entrambi. Se invii anche X-Frame-Options, mantienilo coerente con la regola CSP così chi leggerà la config dopo di te non viene tratto in inganno.

Perché il link di un video o di una mappa dà refused to connect?

La normale pagina di visualizzazione o del luogo di solito invia un header contro l'incorporamento, mentre il servizio pubblica un indirizzo di embed separato pensato per gli iframe, spesso sotto Condividi e poi Incorpora. Il nostro generatore di codice embed converte per te i link supportati in quegli indirizzi di embed.

frame-ancestors controlla ogni frame genitore?

Sì. Se il tuo iframe sta dentro un altro iframe, ogni antenato fino alla pagina principale deve rispettare la policy, non solo il genitore diretto.

Leggi l'header, non l'errore

I browser mostrano lo stesso riquadro grigio qualunque regola sia scattata, ma la console la nomina. Cerca un messaggio che cita X-Frame-Options o frame-ancestors, poi apri il pannello Network per vedere il valore esatto inviato dal server.
Contano anche i redirect. Se l'indirizzo dell'iframe reindirizza a una pagina di login, l'header che conta è quello della risposta finale, spesso più restrittivo della pagina che ti aspettavi.

Risolverlo su un server che controlli

Decidi chi deve poter incorporare la pagina, poi esprimilo una volta sola, idealmente come direttiva frame-ancestors nella tua Content-Security-Policy. Se un framework o un middleware di sicurezza aggiunge X-Frame-Options di default, cambia la sua impostazione invece di aggiungere un secondo header in conflitto.
Dopo il deploy, svuota la cache della CDN e ricontrolla gli header di risposta in produzione, perché molti hosting aggiungono i propri header di sicurezza sull'edge.

Quando il sito non è tuo

Un sito che blocca l'incorporamento ha deciso di non voler comparire dentro altre pagine. Un link, uno screenshot con un link o il widget di embed del sito stesso sono le alternative corrette.
Far passare le pagine di un altro sito attraverso il tuo server per togliere l'header di solito rompe i suoi login e può violare i suoi termini d'uso, quindi non è una soluzione da mettere in produzione.

Correzioni lato server da copiare

Ogni esempio consente lo stesso sito più un partner. Sostituisci https://partner.example con l'origine che deve poterti incorporare, o usa 'none' per bloccare tutti.

always mantiene l'header anche sulle pagine di errore. Rimuovi eventuali vecchie righe X-Frame-Options così le due regole non divergono.

Apache (.htaccess o virtual host)

Richiede mod_headers. Header always set sostituisce qualsiasi valore precedente dello stesso header.

Express con Helmet

Helmet imposta X-Frame-Options su SAMEORIGIN di default. Disattivarlo e impostare frame-ancestors mantiene un'unica fonte di verità.

Next.js (next.config.js)

headers() aggiunge header di risposta a ogni route corrispondente. Le piattaforme di hosting possono aggiungerne di proprie, quindi controlla poi la risposta in produzione.

Verifica degli header di risposta

Incolla gli header di risposta della pagina dentro l'iframe. Tutto avviene in questa pagina; non viene scaricato nulla.

Header di risposta della pagina incorporata

Origine della pagina che contiene l'iframe

Origine della pagina incorporata

Ripristina gli header di esempio

Verdetto

Questa pagina genitore può incorporare la pagina.

Il browser si rifiuterà di mostrare questa pagina nell'iframe.

Ancora nessun verdetto chiaro.

Bloccato da Content-Security-Policy: frame-ancestors 'none'.

Consentito da frame-ancestors: {v} corrisponde all'origine genitore.

Bloccato da frame-ancestors: nessuna fonte nell'elenco corrisponde a {v}.

X-Frame-Options è presente ma ignorato, perché decide frame-ancestors.

Bloccato da X-Frame-Options: DENY.

Consentito da X-Frame-Options: SAMEORIGIN, e le origini coincidono.

Bloccato da X-Frame-Options: SAMEORIGIN, e {v} è un'origine diversa.

ALLOW-FROM è obsoleto e ignorato, quindi non blocca.

X-Frame-Options ha più valori diversi. Inviane esattamente uno.

Content-Security-Policy-Report-Only non blocca mai; è stato ignorato.

Nessun header contro l'incorporamento trovato, quindi qualsiasi sito può incorporare questa pagina.

Inserisci entrambe le origini come URL completi, ad esempio https://example.com.

iframe refused to connect: perché succede e come risolverlo