iframe refused to connect: dlaczego tak się dzieje i jak to naprawić

iframe refused to connect

iframe refused to connect: przyczyny i rozwiązania, z testerem | We.Inc

Dlaczego iframe pokazuje "refused to connect": X-Frame-Options lub CSP frame-ancestors na osadzanej stronie. Wklej jej nagłówki odpowiedzi, poznaj werdykt i skopiuj poprawkę serwera.

Szare pole "refused to connect" oznacza, że strona w Twoim iframe poleciła przeglądarce, by nie dała się osadzić. Robi to nagłówkiem odpowiedzi X-Frame-Options (DENY lub SAMEORIGIN) albo regułą Content-Security-Policy frame-ancestors. Zdjąć tę blokadę może tylko serwer osadzanej strony. Wklej poniżej jej nagłówki, aby zobaczyć, która reguła Cię blokuje.

Co każda wartość nagłówka oznacza dla Twojego iframe

Nagłówek na osadzanej stronie
Kto może ją osadzić

X-Frame-Options: DENY
Nikt, nawet ta sama strona

X-Frame-Options: SAMEORIGIN
Tylko strony z tego samego originu

X-Frame-Options: ALLOW-FROM ...
Przestarzały, ignorowany przez nowoczesne przeglądarki

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

Content-Security-Policy: frame-ancestors 'self' https://a.example
Ten sam origin oraz wymienione strony

Żaden z nagłówków
Każdy

Ten błąd nie jest awarią sieci i z Twoim znacznikiem iframe wszystko jest w porządku. Przeglądarka pobrała stronę, odczytała nagłówek zabraniający osadzania i zastąpiła treść komunikatem o błędzie. Powodem jest ochrona przed clickjackingiem: stronę, którą każdy może osadzić, da się przykryć niewidocznymi przyciskami. Rozwiązanie zależy od tego, czyj serwer wysłał nagłówek.

Otwórz stronę, którą chcesz osadzić, w zwykłej karcie, otwórz narzędzia deweloperskie i zaznacz żądanie dokumentu w panelu Network.
Skopiuj jego nagłówki odpowiedzi i wklej je do testera albo edytuj przykład, który już tam jest.
Podaj origin strony zawierającej iframe. Tester stosuje te same reguły co przeglądarka i wskazuje nagłówek, który przesądza o wyniku.
Jeśli to Twój serwer, skopiuj pasującą poprawkę z przykładów dla serwerów. Jeśli to cudza strona, podlinkuj ją zamiast osadzać.

Gdy frame-ancestors występuje w egzekwowanym nagłówku Content-Security-Policy, przeglądarki całkowicie ignorują X-Frame-Options. Najpierw popraw CSP.
Żaden z tych nagłówków nie działa ze znacznika meta. Oba muszą być prawdziwymi nagłówkami odpowiedzi HTTP wysyłanymi przez serwer lub CDN.
Nagłówek Content-Security-Policy-Report-Only nigdy nie blokuje osadzania. Tylko raportuje, więc szukaj nagłówka egzekwującego.
Jeśli chcesz dopuścić kilka stron partnerskich, użyj frame-ancestors z listą. X-Frame-Options nie ma działającego sposobu na wskazanie innej strony.
Wiele dużych serwisów celowo blokuje osadzanie. Uszanuj to: użyj ich oficjalnego adresu do osadzania, jeśli go oferują, albo zwykłego linku.

Najczęściej zadawane pytania

Czy mogę obejść refused to connect ze swojej strony?

Nie. Regułę egzekwuje przeglądarka odwiedzającego w imieniu osadzanej strony i żaden atrybut Twojego iframe jej nie nadpisze. Jedyne drogi to zmiana nagłówków osadzanej strony, użycie adresu do osadzania udostępnionego przez tę stronę albo link na zewnątrz.

Dlaczego moja własna strona nie ładuje się w swoim własnym iframe?

Sprawdź, czy nie ma X-Frame-Options: DENY lub frame-ancestors 'none'. Oba blokują każdego rodzica, również strony z tej samej domeny. Przełącz na SAMEORIGIN lub frame-ancestors 'self'. Pamiętaj, że inna subdomena lub port to inny origin.

Używać X-Frame-Options czy frame-ancestors?

Używaj frame-ancestors, bo pozwala wymienić kilku dozwolonych rodziców i wygrywa zawsze, gdy obecne są oba nagłówki. Jeśli wysyłasz też X-Frame-Options, utrzymuj go w zgodzie z regułą CSP, aby nie wprowadzić w błąd kolejnej osoby czytającej konfigurację.

Dlaczego link do filmu lub mapy zwraca refused to connect?

Zwykła strona odtwarzania lub miejsca zazwyczaj wysyła nagłówek blokujący osadzanie, a serwis publikuje osobny adres do osadzania przeznaczony dla iframe, często dostępny pod Udostępnij, a potem Umieść. Nasz generator kodu osadzania sam zamienia obsługiwane linki na takie adresy.

Czy frame-ancestors sprawdza każdą ramkę nadrzędną?

Tak. Jeśli Twój iframe znajduje się w innym iframe, każdy przodek aż do strony najwyższego poziomu musi pasować do polityki, nie tylko bezpośredni rodzic.

Czytaj nagłówek, nie komunikat błędu

Przeglądarki pokazują to samo szare pole bez względu na to, która reguła zadziałała, ale konsola ją nazywa. Poszukaj komunikatu wspominającego X-Frame-Options lub frame-ancestors, a potem otwórz panel Network, aby zobaczyć dokładną wartość wysłaną przez serwer.
Liczą się też przekierowania. Jeśli adres iframe przekierowuje na stronę logowania, znaczenie ma nagłówek końcowej odpowiedzi, który często jest surowszy niż na stronie, której się spodziewałeś.

Naprawa na serwerze, który kontrolujesz

Zdecyduj, kto powinien móc osadzać stronę, i wyraź to raz, najlepiej jako dyrektywę frame-ancestors w Content-Security-Policy. Jeśli framework lub middleware bezpieczeństwa domyślnie dodaje X-Frame-Options, zmień jego ustawienie zamiast dodawać drugi, sprzeczny nagłówek.
Po wdrożeniu wyczyść cache CDN i ponownie sprawdź nagłówki odpowiedzi na żywej stronie, bo wielu hostingodawców dodaje własne nagłówki bezpieczeństwa na brzegu sieci.

Gdy to nie jest Twoja strona

Strona, która blokuje osadzanie, zdecydowała, że nie chce pojawiać się wewnątrz innych stron. Uczciwe alternatywy to link, zrzut ekranu z linkiem albo własny widżet osadzania tej strony.
Przepuszczanie cudzych stron przez Twój serwer w celu usunięcia nagłówka zwykle psuje ich logowanie i może naruszać ich regulamin, więc nie jest to poprawka warta wdrożenia.

Poprawki dla serwera do skopiowania

Każdy przykład dopuszcza tę samą stronę oraz jednego partnera. Zastąp https://partner.example originem, który powinien móc Cię osadzać, albo użyj 'none', aby zablokować wszystkich.

always zachowuje nagłówek także na stronach błędów. Usuń starszą linię X-Frame-Options, aby obie reguły nie rozjechały się z czasem.

Apache (.htaccess lub virtual host)

Wymaga mod_headers. Header always set zastępuje każdą wcześniejszą wartość tego samego nagłówka.

Express z Helmet

Helmet domyślnie ustawia X-Frame-Options na SAMEORIGIN. Wyłączenie tego i ustawienie frame-ancestors zostawia jedno źródło prawdy.

Next.js (next.config.js)

headers() dodaje nagłówki odpowiedzi do każdej pasującej trasy. Platformy hostingowe mogą dodawać własne, więc potem sprawdź odpowiedź na żywej stronie.

Tester nagłówków odpowiedzi

Wklej nagłówki odpowiedzi strony znajdującej się w iframe. Wszystko działa na tej stronie, nic nie jest pobierane.

Nagłówki odpowiedzi osadzanej strony

Origin strony zawierającej iframe

Origin osadzanej strony

Przywróć przykładowe nagłówki

Werdykt

Ten rodzic może osadzić stronę.

Przeglądarka odmówi wyświetlenia tej strony w iframe.

Na razie brak jednoznacznego werdyktu.

Zablokowane przez Content-Security-Policy: frame-ancestors 'none'.

Dozwolone przez frame-ancestors: {v} pasuje do originu rodzica.

Zablokowane przez frame-ancestors: żadne źródło na liście nie pasuje do {v}.

X-Frame-Options jest obecny, ale ignorowany, bo decyduje frame-ancestors.

Zablokowane przez X-Frame-Options: DENY.

Dozwolone przez X-Frame-Options: SAMEORIGIN, a originy się zgadzają.

Zablokowane przez X-Frame-Options: SAMEORIGIN, a {v} to inny origin.

ALLOW-FROM jest przestarzały i ignorowany, więc nie blokuje.

X-Frame-Options ma kilka różnych wartości. Wysyłaj dokładnie jedną.

Content-Security-Policy-Report-Only nigdy nie blokuje, więc został pominięty.

Nie znaleziono nagłówka dotyczącego osadzania, więc każda strona może osadzić tę stronę.

iframe refused to connect: dlaczego tak się dzieje i jak to naprawić