Przejdź do treści

Piaskownica zabezpieczająca <iframe sandbox>

Jak zabezpieczyć zewnętrzne widżety (ramki lokalne), aby nie mogły zainstalować wirusa czy konia trojańskiego użytkownikom naszego serwisu ani wyłudzać od nich danych?

  • Blokada wszystkich potencjalnie niebezpiecznych funkcji:
    <iframe sandbox></iframe>
  • Odblokowanie wybranych funkcji:
    <iframe sandbox="pozwolenia"></iframe>
pozwolenia
Należy podać dowolną liczbę poniższych wartości rozdzielając je spacjami:
  • allow-downloads - zezwala pobierać pliki - zarówno standardową metodą jak i poprzez atrybut download.
  • allow-forms - pozwala wysyłać formularze.
  • allow-modals - pozwala otwierać okna modalne, tzn. takie które blokują stronę dopóki użytkownik ich nie zamknie. W języku JavaScript są to funkcje: alert, confirm, print, prompt, a także zdarzenie onbeforeunload.
  • allow-orientation-lock - zezwala na blokowanie orientacji ekranu, tak aby np. podczas zmiany ułożenia smartfona, jego ekran nie był automatycznie obracany.
  • allow-pointer-lock - zezwala na używanie API blokującego wskaźnik myszki.
  • allow-popups - pozwala na otwieranie wyskakujących okien oraz używanie atrybutu target="_blank". Każde nowe okno, które zostanie otwarte przez stronę w ramce, przejmuje wszystkie ograniczenia nałożone atrybutem sandbox.
  • allow-popups-to-escape-sandbox - pozwala, aby otwarte nowe okna nie miały już żadnych ograniczeń. Może to być przydatne np. w przypadku wyświetlania reklam. Chcielibyśmy mieć pewność, że reklama niczego nie popsuje na naszej stronie, ale jednocześnie nie chcemy, aby po kliknięciu w reklamę strona docelowa posiadała jakiekolwiek ograniczenia.

    To polecenie samo w sobie nie zezwala na otwieranie okien, a jedynie zdejmuje ograniczenia, jeśli już nowe okno zostanie otwarte. Aby było możliwe otwieranie nowych okien, należy posłużyć się wartością sandbox="allow-popups allow-popups-to-escape-sandbox".

  • allow-presentation - zezwala uruchomić prezentację na zewnętrznych wyświetlaczach takich jak rzutniki, telewizory czy inne ekrany.
  • allow-same-origin - zezwala odczytywać ciasteczka przeglądarki (ang. cookie) oraz dane użytkownika z innych podobnych mechanizmów. Oczywiście jeśli ramka pochodzi z zewnętrznej domeny, będzie miała dostęp tylko do swoich ciasteczek, a nie do danych z naszego serwisu.
  • allow-scripts - zezwala na uruchamiania skryptów JavaScript.
  • allow-top-navigation - pozwala na używanie atrybutu target="_top" dla odnośników.
  • allow-top-navigation-by-user-activation - pozwala na używanie atrybutu target="_top" dla odnośników, ale tylko jeśli użytkownik sam w nie kliknie, a nie zostaną otwarte automatycznie poprzez skrypt w ramce.
  • allow-top-navigation-to-custom-protocols - zezwala na uruchamianie odsyłaczy, których adres zaczyna się od protokołu innego niż "http:" i "https:". Mogą to być np. odnośniki "mailto:", które uruchamiają domyślny program pocztowy. Oprócz tego inne aplikacje, zainstalowane na urządzeniu użytkownika, mogą rejestrować swoje własne, niestandardowe protokoły. Wtedy po kliknięciu w odnośnik do takiego protokołu, nastąpi otwarcie danej aplikacji - najczęściej w określonym widoku.

Jeżeli strona w ramce lokalnej pochodzi z tej samej domeny co bieżący serwis, wtedy podanie wartości sandbox="allow-scripts allow-same-origin" sprawi, że będzie ona mogła samodzielnie usunąć atrybut sandbox i w ten sposób pozbyć się wszystkich nałożonych na nią ograniczeń.

Chociaż ramki lokalne zapewniają wizualną izolację od reszty dokumentu (nie powinny popsuć jego wyglądu), to potencjalnie nadal w pewnym stopniu mogą być niebezpieczne. Oczywiście sami raczej nie zaatakujemy użytkownika serią wyskakujących okienek ani świadomie nie zainstalujemy mu konia trojańskiego czy wirusa. Nie zawsze jednak mamy pełną kontrolę nad wyświetlaną u nas treścią. Możemy chcieć osadzić na stronie jakiś widżet pochodzący z innego serwisu. Może on być bardzo przydatny, ale nie da się wykluczyć złych zamiarów jego twórcy lub przejęcia kontroli nad jego serwisem przez osoby o takich zamiarach.

W celu uniknięcia takiego zagrożenia powstał atrybut sandbox (z ang. piaskownica). Jeśli dodamy go do znacznika IFRAME jako atrybut logiczny (bez podawania wartości), wszystkie potencjalne niebezpieczne funkcje zostaną zablokowane. Trzeba jednak pamiętać, że wtedy widżet może w ogóle przestać działać, ponieważ potrzebuje niektórych, mniej niebezpiecznych funkcji. W takiej sytuacji można przypisać odpowiednie wartości do atrybutu sandbox="..." i w ten sposób odblokować tylko te możliwości, które rzeczywiście są absolutnie konieczne do jego działania.

Przykład <iframe sandbox>

Poniższa kombinacja wartości atrybutu sandbox="..." umożliwia działanie większości widżetów, jednocześnie zapewniając poziom ochrony wystarczający na większości stron:

<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="https://example.com/widget.html"></iframe>

Pytania i odpowiedzi <iframe sandbox>

Co to jest atrybut "piaskownicy" w HTML?

Atrybut sandbox w HTML jest używany w elemencie <iframe> do nałożenia dodatkowych ograniczeń na zawartość osadzoną w ramce, takich jak blokowanie skryptów, zapobieganie wyskakującym okienkom lub wymuszanie polityki samego pochodzenia. Atrybut ten tworzy tzw. piaskownicę, która izoluje zawartość IFRAME od reszty strony, poprawiając bezpieczeństwo.

Czy mogę używać piaskownicy IFRAME?

Tak, piaskownicę (ang. sandbox) można używać z IFRAME, aby zwiększyć bezpieczeństwo zawartości osadzonej w ramce, izolując ją od reszty strony. Użycie atrybutu sandbox pozwala na nałożenie szeregu ograniczeń na zawartość IFRAME, takich jak blokowanie skryptów i ograniczenie dostępu do zasobów zewnętrznych.

Jak wyłączyć atrybut piaskownicy w ramce IFRAME?

Aby wyłączyć atrybut sandbox w ramce IFRAME, wystarczy usunąć atrybut sandbox z elementu <iframe>. Gdy atrybut nie jest obecny, zawartość IFRAME nie jest objęta żadnymi ograniczeniami wynikającymi z piaskownicy, co oznacza, że może wykonywać skrypty, otwierać nowe okna, i uzyskiwać dostęp do zasobów tak, jakby była integralną częścią strony.

Skąd wzięła się nazwa "piaskownica"?

Nazwa piaskownica (ang. sandbox) pochodzi z koncepcji tworzenia bezpiecznego i izolowanego środowiska, w którym można bezpiecznie eksperymentować i testować różne elementy bez ryzyka wpływu na otoczenie. W kontekście technologii informatycznych, piaskownica odnosi się do mechanizmu izolowania kodu lub aplikacji w taki sposób, aby miały one ograniczony dostęp do zasobów systemu, podobnie jak dzieci bawiące się w piaskownicy mają ograniczoną przestrzeń do zabawy.

Przeglądarki

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
<iframe sandbox>5
2010-05-25		17
2012-11-20		12
2015-07-29		15
2013-07-02		5
2010-06-07
<iframe sandbox="allow-downloads">83
2020-05-19		82
2020-10-20		83
2020-05-21		69
2020-06-24		17
2023-09-18
<iframe sandbox="allow-forms">5
2010-05-25		≤49
2016-09-20		79
2020-01-15		15
2013-07-02		5
2010-06-07
<iframe sandbox="allow-modals">46
2015-10-13		49
2016-09-20		79
2020-01-15		33
2015-10-27		11.1
2018-04-12
<iframe sandbox="allow-orientation-lock">68
2018-07-24		≤49
2016-09-20		79
2020-01-15		55
2018-08-16		❌
<iframe sandbox="allow-pointer-lock">23
2012-11-06		≤49
2016-09-20		79
2020-01-15		15
2013-07-02		10.1
2017-03-27
<iframe sandbox="allow-popups">17
2012-02-08		28
2014-03-18		12
2015-07-29		15
2013-07-02		6
2012-07-25
<iframe sandbox="allow-popups-to-escape-sandbox">46
2015-10-13		49
2016-09-20		79
2020-01-15		33
2015-10-27		11.1
2018-04-12
<iframe sandbox="allow-presentation">53
2016-08-31		50
2016-11-15		79
2020-01-15		40
2016-09-20		❌
<iframe sandbox="allow-same-origin">5
2010-05-25		≤49
2016-09-20		79
2020-01-15		15
2013-07-02		5
2010-06-07
<iframe sandbox="allow-scripts">5
2010-05-25		≤49
2016-09-20		79
2020-01-15		15
2013-07-02		5
2010-06-07
<iframe sandbox="allow-top-navigation">6
2010-09-02		≤49
2016-09-20		79
2020-01-15		15
2013-07-02		5
2010-06-07
<iframe sandbox="allow-top-navigation-by-user-activation">58
2017-04-19		79
2020-07-28		79
2020-01-15		45
2017-05-10		11.1
2018-04-12
<iframe sandbox="allow-top-navigation-to-custom-protocols">❌101
2022-05-31		❌❌16
2022-09-12

Komentarze

Zobacz więcej komentarzy

Facebook