iframe sandbox: każdy token z interaktywnym demo | We.Inc
Włączaj i wyłączaj każdy token iframe sandbox i zobacz, jak skrypty, formularze, popupy i alerty zaczynają lub przestają działać. Każdy token wyjaśniony.
Pusty atrybut sandbox mocno blokuje iframe: brak skryptów, brak wysyłania formularzy, brak popupów, brak alertów i nieprzezroczyste pochodzenie (opaque origin), które nie przechodzi żadnego sprawdzenia same-origin. Każdy dodany token allow- przywraca jedną możliwość. Przełączaj tokeny poniżej, aby zobaczyć dokładnie, co przestaje działać, a potem skopiuj najmniejszy zestaw, którego potrzebuje Twoje osadzenie.
Typowe zastosowania i potrzebne im tokeny
Osadzana treść
Sugerowana wartość sandbox
Wygenerowany przez Ciebie statyczny podgląd HTML
sandbox (pusty)
Interaktywne demo lub wynik code playground
sandbox="allow-scripts"
Zewnętrzny formularz, który wysyła odpowiedzi
sandbox="allow-scripts allow-forms allow-same-origin" (tylko dla innego pochodzenia)
Widżet z linkami otwieranymi w nowej karcie
dodaj allow-popups allow-popups-to-escape-sandbox
Gra przechwytująca kursor myszy
dodaj allow-pointer-lock
Atrybut sandbox to najtańszy zysk bezpieczeństwa, jaki możesz dodać do iframe wyświetlającego treść, której nie napisałeś: HTML użytkownika, miejsce reklamowe, podgląd wygenerowanej strony. Trudność polega na tym, by wiedzieć, których tokenów potrzebuje dane osadzenie, bo brak jednego z nich zwykle kończy się cichym błędem. Ramka poniżej uruchamia prawdziwe testy, więc widzisz każdy błąd zamiast zgadywać. Podstawy osadzania znajdziesz w naszym przewodniku po iframe HTML i wideo.
Zaznacz tokeny na liście. Ramka po prawej przeładowuje się z dokładnie tą wartością sandbox, pokazaną nad nią jako kod do skopiowania.
Gdy allow-scripts jest wyłączony, ramka pokazuje tylko tekst zastępczy, bo nic w niej nie może się uruchomić.
Włącz allow-scripts, a ramka poda swoje własne pochodzenie i wyświetli przyciski do wysłania formularza, otwarcia popupu i pokazania alertu.
Każdy przycisk informuje, czy przeglądarka na to pozwoliła. Dodaj odpowiedni token i naciśnij go ponownie, aby porównać.
Zacznij od pustego sandbox i dodawaj tokeny pojedynczo, aż osadzenie zacznie działać. Usuwanie ich z długiej listy jest trudniejsze do przeanalizowania.
Nigdy nie łącz allow-scripts z allow-same-origin dla treści serwowanej z Twojego własnego pochodzenia. Osadzona strona może wtedy sama usunąć swój sandbox.
Dla HTML pisanego przez użytkowników wybieraj srcdoc lub osobną subdomenę, aby nawet błąd w tokenach nie dał dostępu do cookies Twojej głównej strony.
Sandbox sam w sobie nie ogranicza kamery, mikrofonu ani podobnych funkcji. Używaj razem z nim atrybutu allow do ustawienia permissions policy.
Jeśli linki w ramce mają otwierać zwykłe karty, dodaj allow-popups-to-escape-sandbox, w przeciwnym razie nowa karta odziedziczy te same ograniczenia.
Najczęściej zadawane pytania
Co robi pusty atrybut sandbox?
Nakłada wszystkie ograniczenia naraz. Osadzony dokument nie może uruchamiać skryptów, wysyłać formularzy, otwierać popupów ani okien modalnych, nawigować głównego okna, blokować kursora ani orientacji, rozpoczynać pobierania, a do tego jest traktowany jako pochodzący z unikalnego pochodzenia, które nigdy nie pasuje do żadnego innego.
Dlaczego allow-scripts z allow-same-origin jest niebezpieczne?
Gdy osadzony dokument ma to samo pochodzenie co Twoja strona, te dwa tokeny razem pozwalają jego skryptowi sięgnąć wyżej i usunąć atrybut sandbox, więc ostatecznie nie jest bezpieczniejszy niż zwykły iframe. To połączenie jest w porządku dla treści z naprawdę innego pochodzenia, która i tak nie może dotknąć Twojej strony.
Mój formularz w sandbox nic nie robi po kliknięciu wyślij. Dlaczego?
Bez allow-forms formularz nadal się wyświetla, ale jego wysłanie nie uruchamia walidacji i nie przesyła żadnych danych na serwer. Dodaj allow-forms. Jeśli formularz korzysta też z cookies lub pamięci swojej własnej strony, będzie potrzebował również allow-same-origin.
Czy iframe w sandbox może przekierować całą moją stronę?
Nie, chyba że dodasz allow-top-navigation albo allow-top-navigation-by-user-activation, który pozwala na to dopiero po kliknięciu w ramce. Pominięcie obu uniemożliwia osadzeniu zastąpienie Twojej strony inną witryną.
Czy sandbox wystarczy, by bezpiecznie wyświetlić niezaufany HTML?
To główna warstwa, ale nie jedyna. Serwuj niezaufaną treść z osobnego pochodzenia lub przez srcdoc, trzymaj allow-same-origin wyłączony, gdy skrypty są włączone, i dodaj Content-Security-Policy do osadzonego dokumentu, jeśli kontrolujesz sposób jego serwowania.
Jak nieprzezroczyste pochodzenie wszystko zmienia
Bez allow-same-origin osadzony dokument dostaje specjalne pochodzenie, które zawsze nie przechodzi zasady same-origin. Jego self.origin ma wartość tekstu "null".
Ta jedna reguła wyłącza bardzo wiele, bo osadzona strona przestaje być traktowana jako część własnej witryny. Widżety zależne od własnych cookies lub zapisanego stanu często się tu psują, dlatego tak wiele z nich wymaga allow-same-origin.
Ciche błędy to norma
Zablokowany popup nie rzuca wyjątku; window.open po prostu zwraca null. Zablokowany alert od razu wraca, niczego nie pokazując. Zablokowany formularz po prostu stoi w miejscu. Gdy osadzenie działa nieprawidłowo, sprawdź konsolę przeglądarki dla ramki, zanim obwinisz kod samego osadzenia.
Dlatego demo na tej stronie raportuje wyniki wewnątrz ramki: widzisz to samo ciche zachowanie, na które trafiłoby prawdziwe osadzenie.
sandbox, allow i CSP mają różne zadania
sandbox ogranicza, co osadzony dokument może robić. Atrybut allow ustawia permissions policy dla funkcji takich jak kamera, pełny ekran czy geolokalizacja. Content-Security-Policy, wysyłany przez serwer osadzonej strony, ogranicza, jakie skrypty i zasoby ona ładuje.
Staranne osadzenie niezaufanej treści korzysta ze wszystkich trzech, a dyrektywa frame-ancestors w CSP rozstrzyga odwrotne pytanie: kto w ogóle może osadzić daną stronę w ramce.
Wszystkie tokeny sandbox
Tokeny oddziela się spacjami, a wielkość liter nie ma znaczenia. Wszystko, czego nie wymieniono, pozostaje zablokowane.
Tokeny sandbox i na co każdy z nich pozwala
Token
Pozwala
Uruchamiać skrypty, ale nie otwierać okien popup
Zachować prawdziwe pochodzenie dokumentu zamiast nieprzezroczystego
Wysyłać formularze (bez tego wyświetlają się, ale niczego nie wysyłają)
Używać alert(), confirm(), print() i prompt()
Otwierać okna przez window.open() lub target="_blank"
Otwierać te nowe okna bez sandbox
Pobierać pliki z linków lub przez nawigację
Nawigować stronę najwyższego poziomu
Nawigować stronę najwyższego poziomu, tylko po kliknięciu
Otwierać protokoły inne niż http, takie jak mailto:
Używać Pointer Lock API
Blokować orientację ekranu
Rozpoczynać sesję prezentacji
Żądać niepartycjonowanych cookies przez Storage Access API
Wzorce do skopiowania
Podgląd HTML użytkownika z wyłączonymi skryptami
Przycisk w ramce ma handler onclick, ale przy pustym sandbox nigdy się nie uruchamia.
Zewnętrzny widżet z innego pochodzenia
Widżet uruchamia własny skrypt i wysyła swój formularz, a linki mogą otwierać prawdziwe karty. Nie może przekierować Twojej strony.
Te same ograniczenia wysłane jako nagłówek odpowiedzi
Serwer może objąć własną stronę sandboxem przez CSP, co działa nawet wtedy, gdy strona jest otwierana bezpośrednio, a nie w ramce.
Przełączaj tokeny i testuj ramkę
Ramka poniżej to dokument srcdoc. allow-same-origin nie jest tu dostępny, bo ramka srcdoc współdzieliłaby wtedy pochodzenie tej strony, czyli dokładnie to połączenie, przed którym ostrzegają wskazówki.
Skrypty są zablokowane, więc nic w tej ramce nie może się uruchomić.
Tokeny
Bieżący atrybut
Uruchamiać skrypty, ale nie otwierać okien popup
Zachować prawdziwe pochodzenie dokumentu zamiast nieprzezroczystego
Wysyłać formularze (bez tego wyświetlają się, ale niczego nie wysyłają)
Używać alert(), confirm(), print() i prompt()
Otwierać okna przez window.open() lub target="_blank"
Otwierać te nowe okna bez sandbox
Pobierać pliki z linków lub przez nawigację
Nawigować stronę najwyższego poziomu
Nawigować stronę najwyższego poziomu, tylko po kliknięciu
Otwierać protokoły inne niż http, takie jak mailto:
Używać Pointer Lock API
Blokować orientację ekranu
Rozpoczynać sesję prezentacji
Żądać niepartycjonowanych cookies przez Storage Access API
Ramka testowa sandbox
Skrypty się uruchomiły. Pochodzenie tej ramki to: {v}
Wyślij formularz
Otwórz popup
Pokaż alert
Formularz wysłany.
Formularz nie został wysłany.
Popup otwarty (i ponownie zamknięty).
Popup zablokowany: window.open zwrócił null.
Alert został pokazany.
Alert zablokowany: wrócił od razu, niczego nie pokazując.