Sandbox iframe i Permissions Policy

Niezaufana zawartość w ramce iframe (widżety innych firm, podglądy HTML przesłane przez użytkowników, osadzone gry) nie powinna mieć pełnego dostępu do możliwości przeglądarki. Atrybut sandbox ogranicza działania ramki iframe, zmniejszając szkody w przypadku, gdy okaże się ona złośliwa.

<iframe sandbox src="..."> bez wartości nakłada wszystkie ograniczenia: brak skryptów, formularzy, wyskakujących okien, nawigacji najwyższego poziomu i wtyczek, a także traktowanie ramki jako unikalnego originu. Użyj tego jako punktu wyjścia i dodawaj tylko to, czego potrzebuje osadzona zawartość.

Tokeny sandbox ponownie włączają określone możliwości: sandbox="allow-scripts allow-same-origin" zezwala na wykonywanie skryptów i dostęp do tego samego originu. Każdy token znosi jedno ograniczenie; połącz minimalny zestaw, którego ramka iframe rzeczywiście potrzebuje.

allow-scripts włącza JS. allow-forms włącza wysyłanie formularzy. allow-popups włącza window.open. allow-same-origin zapobiega traktowaniu ramki iframe jako unikalnego originu (jest potrzebne do localStorage). allow-top-navigation zezwala na nawigowanie oknem nadrzędnym.

Połączenie allow-scripts z allow-same-origin w ramce iframe, którą również hostujesz, daje jej pełny dostęp do Twojego originu — w tym możliwość usunięcia własnego sandboxa. Łącz te opcje tylko dla zaufanej zawartości; w przypadku niezaufanej pomiń allow-same-origin.

Permissions Policy (wcześniej Feature Policy) określa, z których interfejsów API przeglądarki (kamery, mikrofonu, geolokalizacji, trybu pełnoekranowego i autoplay) może korzystać strona oraz jej ramki iframe. Ustaw ją na stronie nadrzędnej: Permissions-Policy: geolocation=() blokuje geolokalizację wszędzie.

Atrybut allow ramki iframe nadpisuje politykę strony nadrzędnej dla tej ramki: <iframe allow="camera; microphone"> zezwala na korzystanie z tych interfejsów API w ramce iframe, nawet jeśli domyślna polityka strony nadrzędnej ich zabrania.

Specyfikacje obejmują stale rozwijającą się listę uprawnień — camera, microphone, geolocation, accelerometer, gyroscope, magnetometer, payment, usb, midi, fullscreen, autoplay, picture-in-picture i dziesiątki innych. Przeprowadź audyt tej listy i jawnie zabroń wszystkiego, czego strona nie potrzebuje.

Permissions-Policy zgłasza naruszenia do skonfigurowanego endpointu, podobnie jak report-uri w CSP. Użyj tego podczas migracji: włącz ścisłą politykę, obserwuj, co przestaje działać, a następnie stopniowo rozluźniaj ją dla uzasadnionych funkcji.

W przypadku wrażliwych stron ustaw Cross-Origin-Opener-Policy: same-origin i Cross-Origin-Embedder-Policy: require-corp. Izoluje to stronę od okien cross-origin, chroniąc przed atakami czasowymi w stylu Spectre i umożliwiając używanie SharedArrayBuffer.

Sandbox + Permissions Policy + CSP + COOP/COEP tworzą wspólnie warstwową ochronę. Każdy z tych mechanizmów chroni przed inną klasą ataków. Osadzanie zawartości innych firm jest na tyle ryzykowne, że pojedyncze zabezpieczenie nie wystarcza — połącz je, aby obejście jednego zostało zatrzymane przez inne.

Użyj paneli Network i Issues w Chrome DevTools, aby wykrywać naruszenia sandboxa i uprawnień. Wiele naruszeń pozostaje niewidocznych (interfejs API po prostu zwraca undefined albo odrzuca promise); jawne endpointy raportowania pomagają wykrywać je na produkcji.

Dlaczego połączenie sandbox="allow-scripts allow-same-origin" może być niebezpieczne dla ramki iframe hostowanej w Twoim własnym originie?

Domyślnie używaj sandboxa dla ramek iframe i dodawaj tylko tokeny potrzebne zawartości. Unikaj allow-scripts+allow-same-origin dla niezaufanej zawartości. Używaj Permissions Policy do blokowania zaawansowanych interfejsów API w całej witrynie, a atrybutu allow ramki iframe do przyznawania wyjątków. Połącz te mechanizmy z CSP i COOP/COEP, aby uzyskać obronę warstwową.