HTML5 - HTML
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 (obsługuje: Firefox 82, Opera 69, Chrome 83).
- allow-forms - pozwala wysyłać formularze (obsługuje: Firefox 49, Opera 15, Chrome 5).
- allow-modals - pozwala otwierać okna modalne, tzn. takie które blokują stronę dopóki użytkownik ich nie zamknie (obsługuje: Firefox 49, Opera 33, Chrome 46). W języku JavaScript są to funkcje:
alert,confirm,print,prompt, a także zdarzenieonbeforeunload. - allow-orientation-lock - zezwala na blokowanie orientacji ekranu, tak aby np. podczas zmiany ułożenia smartfona, jego ekran nie był automatycznie obracany (obsługuje: Firefox 49, Opera 55, Chrome 68).
- allow-pointer-lock - zezwala na używanie API blokującego wskaźnik myszki (obsługuje: Firefox 49, Opera 15, Chrome 23).
- allow-popups - pozwala na otwieranie wyskakujących okien oraz używanie atrybutu
target="_blank"(obsługuje: Internet Explorer 10, Firefox 28, Opera 15, Chrome 17). Każde nowe okno, które zostanie otwarte przez stronę w ramce, przejmuje wszystkie ograniczenia nałożone atrybutemsandbox. - allow-popups-to-escape-sandbox - pozwala, aby otwarte nowe okna nie miały już żadnych ograniczeń (obsługuje: Firefox 49, Opera 33, Chrome 46). 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-same-origin - zezwala odczytywać ciasteczka przeglądarki (ang. cookie) oraz dane użytkownika z innych podobnych mechanizmów (obsługuje: Internet Explorer 11, Firefox 49, Opera 15, Chrome 5). 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 (obsługuje: Firefox 49, Opera 15, Chrome 5).
- allow-top-navigation - pozwala na używanie atrybutu
target="_top"dla odnośników (obsługuje: Firefox 49, Opera 15, Chrome 6). - 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 (obsługuje: Firefox 79, Opera 45, Chrome 58). - allow-top-navigation-to-custom-protocols - zezwala na uruchamianie odsyłaczy, których adres zaczyna się od protokołu innego niż "http:" i "https:" (obsługuje: Firefox 101). 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ąć atrybutsandboxi 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.
Co pozwala traktować zawartość IFRAME jako pochodzącą z tego samego źródła?
Aby traktować zawartość IFRAME jako pochodzącą z tego samego źródła (ang. same-origin), należy do atrybutu sandbox="..." dodać wartość allow-same-origin. Dzięki temu zawartość ramki będzie miała dostęp do zasobów strony nadrzędnej oraz odwrotnie, co umożliwia wymianę danych między nimi.
Jak możemy pozwolić, aby ramka IFRAME w trybie piaskownicy uruchamiała skrypty z tej samej domeny?
Aby pozwolić, by ramka IFRAME w trybie piaskownicy uruchamiała skrypty z tej samej domeny, należy do atrybutu sandbox="..." dodać zarówno wartość allow-scripts, jak i allow-same-origin. Przykład: <iframe src="..." sandbox="allow-scripts allow-same-origin"></iframe>. Dzięki temu skrypty w ramce będą mogły działać i będą miały dostęp do zasobów w tej samej domenie.
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.