iframe weigert verbinding: waarom het gebeurt en hoe u het oplost

iframe weigert verbinding

iframe weigert verbinding: oorzaken en oplossingen, met checker | We.Inc

Waarom een iframe "refused to connect" toont: X-Frame-Options of CSP frame-ancestors op de ingesloten pagina. Plak de response-headers om het oordeel te zien en kopieer daarna de serverfix.

Het grijze vak "refused to connect" betekent dat de pagina in uw iframe de browser heeft gezegd dat ze niet ingesloten mag worden. Dat doet ze met een X-Frame-Options-response-header (DENY of SAMEORIGIN) of een Content-Security-Policy-regel frame-ancestors. Alleen de server van de ingesloten site kan dat opheffen. Plak de headers hieronder om te zien welke regel u blokkeert.

Wat elke headerwaarde betekent voor uw iframe

Header op de ingesloten pagina
Wie haar mag insluiten

X-Frame-Options: DENY
Niemand, zelfs niet dezelfde site

X-Frame-Options: SAMEORIGIN
Alleen pagina's op dezelfde origin

X-Frame-Options: ALLOW-FROM ...
Verouderd, genegeerd door moderne browsers

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

Content-Security-Policy: frame-ancestors 'self' https://a.example
Dezelfde origin plus de genoemde sites

Geen van beide headers
Iedereen

Deze fout is geen netwerkstoring en er is niets mis met uw iframe-tag. De browser heeft de pagina opgehaald, een header gelezen die insluiten verbiedt en de inhoud vervangen door een foutmelding. De reden is bescherming tegen clickjacking: over een pagina die iedereen kan insluiten, kunnen onzichtbare knoppen worden gelegd. De oplossing hangt af van wiens server de header stuurde.

Open de pagina die u wilt insluiten in een normaal tabblad, open de ontwikkelaarstools en selecteer het documentverzoek in het Network-paneel.
Kopieer de response-headers en plak ze in de checker, of bewerk het voorbeeld dat er al staat.
Vul de origin in van de pagina die de iframe bevat. De checker past dezelfde regels toe als de browser en noemt de header die de doorslag geeft.
Is het uw eigen server, kopieer dan de passende fix uit de servervoorbeelden. Is het de site van iemand anders, link er dan naartoe in plaats van haar in te sluiten.

Als frame-ancestors in een afgedwongen Content-Security-Policy staat, negeren browsers X-Frame-Options volledig. Repareer eerst de CSP.
Geen van beide headers werkt vanuit een meta-tag. Beide moeten echte HTTP-response-headers zijn die de server of CDN stuurt.
Een Content-Security-Policy-Report-Only-header blokkeert insluiten nooit. Hij rapporteert alleen, dus zoek naar de header die afdwingt.
Als u een paar partnersites wilt toestaan, gebruik dan frame-ancestors met een lijst. X-Frame-Options heeft geen werkende manier om een andere site te noemen.
Veel grote sites blokkeren insluiten bewust. Respecteer dat: gebruik hun officiële embed-URL als ze die aanbieden, of een gewone link.

Veelgestelde vragen

Kan ik refused to connect omzeilen vanaf mijn eigen pagina?

Nee. De regel wordt namens de ingesloten site afgedwongen door de browser van de bezoeker, en geen enkel attribuut op uw iframe kan dat overrulen. De enige routes zijn de headers van de ingesloten site wijzigen, een embed-URL gebruiken die de site voor insluiten aanbiedt, of een link naar buiten.

Waarom weigert mijn eigen site te laden in haar eigen iframe?

Controleer op X-Frame-Options: DENY of frame-ancestors 'none'. Beide blokkeren elke parent, ook pagina's op hetzelfde domein. Stap over op SAMEORIGIN of frame-ancestors 'self'. Onthoud dat een ander subdomein of een andere poort een andere origin is.

Moet ik X-Frame-Options of frame-ancestors gebruiken?

Gebruik frame-ancestors, omdat dat meerdere toegestane parents kan noemen en altijd wint als beide aanwezig zijn. Als u ook X-Frame-Options stuurt, houd die dan in lijn met de CSP-regel, zodat de volgende persoon die de configuratie leest niet op het verkeerde been wordt gezet.

Waarom weigert een video- of kaartlink de verbinding?

De gewone kijk- of locatiepagina stuurt meestal een header tegen insluiten, terwijl de dienst een apart embed-adres publiceert dat bedoeld is voor iframes, vaak te vinden onder Delen en dan Insluiten. Onze generator voor embedcode zet ondersteunde links voor u om naar die embed-adressen.

Controleert frame-ancestors elk bovenliggend frame?

Ja. Als uw iframe in een andere iframe zit, moet elke voorouder tot aan de bovenste pagina aan het beleid voldoen, niet alleen de directe parent.

Lees de header, niet de foutmelding

Browsers tonen hetzelfde grijze vak, welke regel er ook afging, maar de console noemt de regel. Zoek naar een melding over X-Frame-Options of frame-ancestors en open daarna het Network-paneel om de exacte waarde te zien die de server stuurde.
Redirects tellen ook mee. Als het adres van de iframe doorstuurt naar een inlogpagina, telt de header op de uiteindelijke response, en die is vaak strenger dan de pagina die u verwachtte.

Oplossen op een server die u beheert

Bepaal wie de pagina mag insluiten en leg dat één keer vast, het liefst als frame-ancestors-directive in uw Content-Security-Policy. Als een framework of beveiligingsmiddleware standaard X-Frame-Options toevoegt, pas dan die instelling aan in plaats van een tweede, tegenstrijdige header toe te voegen.
Leeg na het deployen een eventuele CDN-cache en controleer de live response-headers opnieuw, want veel hosts voegen aan de edge hun eigen beveiligingsheaders toe.

Als het niet uw site is

Een site die insluiten blokkeert, heeft besloten dat ze niet binnen andere pagina's wil verschijnen. Een link, een screenshot met een link of de eigen embed-widget van de site zijn de eerlijke alternatieven.
De pagina's van een andere site via uw server proxyen om de header te verwijderen, breekt meestal de logins en kan de gebruiksvoorwaarden schenden, dus het is geen oplossing die u wilt uitrollen.

Serverfixes om te kopiëren

Elk voorbeeld staat dezelfde site plus één partner toe. Vervang https://partner.example door de origin die u mag insluiten, of gebruik 'none' om iedereen te blokkeren.

always houdt de header ook op foutpagina's. Verwijder een oudere X-Frame-Options-regel, zodat de twee regels niet uit elkaar gaan lopen.

Apache (.htaccess of virtual host)

Vereist mod_headers. Header always set vervangt elke eerdere waarde van dezelfde header.

Express met Helmet

Helmet zet X-Frame-Options standaard op SAMEORIGIN. Dat uitzetten en frame-ancestors instellen houdt één bron van waarheid.

Next.js (next.config.js)

headers() voegt response-headers toe aan elke passende route. Hostingplatforms kunnen hun eigen headers toevoegen, dus controleer daarna de live response.

Checker voor response-headers

Plak de response-headers van de pagina in de iframe. Alles draait op deze pagina; er wordt niets opgehaald.

Response-headers van de ingesloten pagina

Origin van de pagina die de iframe bevat

Origin van de ingesloten pagina

Voorbeeldheaders terugzetten

Oordeel

Deze parent mag de pagina insluiten.

De browser weigert deze pagina in de iframe te tonen.

Nog geen duidelijk oordeel.

Geblokkeerd door Content-Security-Policy: frame-ancestors 'none'.

Toegestaan door frame-ancestors: {v} komt overeen met de origin van de parent.

Geblokkeerd door frame-ancestors: geen bron in de lijst komt overeen met {v}.

X-Frame-Options is aanwezig maar wordt genegeerd, omdat frame-ancestors beslist.

Geblokkeerd door X-Frame-Options: DENY.

Toegestaan door X-Frame-Options: SAMEORIGIN, en de origins komen overeen.

Geblokkeerd door X-Frame-Options: SAMEORIGIN, en {v} is een andere origin.

ALLOW-FROM is verouderd en wordt genegeerd, dus het blokkeert niet.

X-Frame-Options heeft meerdere verschillende waarden. Stuur er precies één.

Content-Security-Policy-Report-Only blokkeert nooit; deze is overgeslagen.

Geen header tegen insluiten gevonden, dus elke site mag deze pagina insluiten.

Vul beide origins in als volledige URL, bijvoorbeeld https://example.com.

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

Product

Voor wie

Functies

Bronnen

Bedrijf

Sitemap