Warum ein iframe "refused to connect" anzeigt: X-Frame-Options oder CSP frame-ancestors auf der eingebetteten Seite. Füge ihre Antwort-Header ein, sieh das Ergebnis und kopiere die Serverlösung.
Das graue Feld "refused to connect" bedeutet, dass die Seite in deinem iframe dem Browser gesagt hat, dass sie nicht eingebettet werden will. Das geschieht über einen X-Frame-Options-Antwort-Header (DENY oder SAMEORIGIN) oder eine Content-Security-Policy-Regel frame-ancestors. Nur der Server der eingebetteten Website kann das aufheben. Füge unten ihre Header ein, um zu sehen, welche Regel dich blockiert.
Was jeder Header-Wert für dein iframe bedeutet
Dieser Fehler ist kein Netzwerkproblem, und mit deinem iframe-Tag stimmt alles. Der Browser hat die Seite geladen, einen Header gelesen, der das Einbetten verbietet, und den Inhalt durch eine Fehlermeldung ersetzt. Der Grund ist der Schutz vor Clickjacking: Eine Seite, die jeder einbetten kann, lässt sich mit unsichtbaren Buttons überlagern. Die Lösung hängt davon ab, wessen Server den Header gesendet hat.
Nein. Die Regel wird vom Browser des Besuchers im Auftrag der eingebetteten Website durchgesetzt, und kein Attribut an deinem iframe kann sie aufheben. Die einzigen Wege sind, die Header der eingebetteten Website zu ändern, eine Embed-URL zu nutzen, die die Website für das Einbetten bereitstellt, oder nach außen zu verlinken.
Prüfe auf X-Frame-Options: DENY oder frame-ancestors 'none'. Beide blockieren jede übergeordnete Seite, auch Seiten auf derselben Domain. Wechsle zu SAMEORIGIN oder frame-ancestors 'self'. Denk daran, dass eine andere Subdomain oder ein anderer Port ein anderer Origin ist.
Verwende frame-ancestors, weil es mehrere erlaubte übergeordnete Seiten auflisten kann und immer gewinnt, wenn beide vorhanden sind. Wenn du zusätzlich X-Frame-Options sendest, halte es konsistent mit der CSP-Regel, damit die nächste Person, die die Konfiguration liest, nicht in die Irre geführt wird.
Die normale Ansichts- oder Ortsseite sendet meist einen Header gegen das Einbetten, während der Dienst eine separate Embed-Adresse für iframes veröffentlicht, oft zu finden unter Teilen und dann Einbetten. Unser Embed-Code-Generator wandelt unterstützte Links für dich in diese Embed-Adressen um.
Ja. Sitzt dein iframe in einem anderen iframe, muss jeder Vorfahr bis zur obersten Seite zur Richtlinie passen, nicht nur der direkte Elternframe.
Jedes Beispiel erlaubt dieselbe Website plus einen Partner. Ersetze https://partner.example durch den Origin, der dich einbetten darf, oder verwende 'none', um alle zu blockieren.
always sorgt dafür, dass der Header auch auf Fehlerseiten erhalten bleibt. Entferne jede ältere X-Frame-Options-Zeile, damit die beiden Regeln nicht auseinanderlaufen.
Benötigt mod_headers. Header always set ersetzt jeden früheren Wert desselben Headers.
Helmet setzt X-Frame-Options standardmäßig auf SAMEORIGIN. Wenn du das abschaltest und frame-ancestors setzt, bleibt es bei einer einzigen maßgeblichen Quelle.
headers() fügt jeder passenden Route Antwort-Header hinzu. Hosting-Plattformen können eigene hinzufügen, prüfe also danach die Live-Antwort.
Füge die Antwort-Header der Seite im iframe ein. Alles läuft auf dieser Seite, es wird nichts abgerufen.
Antwort-Header der eingebetteten Seite
Origin der Seite, die das iframe enthält
Origin der eingebetteten Seite
Beispiel-Header wiederherstellen
Ergebnis
Diese übergeordnete Seite darf die Seite einbetten.
Der Browser wird diese Seite im iframe nicht anzeigen.
Noch kein eindeutiges Ergebnis.
Blockiert durch Content-Security-Policy: frame-ancestors 'none'.
Erlaubt durch frame-ancestors: {v} passt zum übergeordneten Origin.
Blockiert durch frame-ancestors: Keine Quelle in der Liste passt zu {v}.
X-Frame-Options ist vorhanden, wird aber ignoriert, weil frame-ancestors entscheidet.
Blockiert durch X-Frame-Options: DENY.
Erlaubt durch X-Frame-Options: SAMEORIGIN, und die Origins stimmen überein.
Blockiert durch X-Frame-Options: SAMEORIGIN, und {v} ist ein anderer Origin.
ALLOW-FROM ist veraltet und wird ignoriert, blockiert also nicht.
X-Frame-Options hat mehrere verschiedene Werte. Sende genau einen.
Content-Security-Policy-Report-Only blockiert nie, der Header wurde übersprungen.
Kein Header gegen das Einbetten gefunden, daher darf jede Website diese Seite einbetten.
Gib beide Origins als vollständige URLs ein, zum Beispiel https://example.com.
Kostenlos starten · Keine Kreditkarte nötig