Podgląd HTML – przeglądarka plików HTML

Jak z tego korzystać

1. Otwórz plik lub wklej kod. Upuść na stronę plik .html, .htm, .xhtml lub .svg, wybierz go z urządzenia albo wklej kod HTML w pole tekstowe. Pliki mogą mieć do 5 MB.
2. Obejrzyj podgląd. Strona wyświetla się w ramce z piaskownicą. Wybierz szerokość telefonu, tabletu albo pełną, aby zobaczyć, jak zachowuje się na różnych ekranach.
3. Sprawdź panel „Informacje”. Zobacz rozmiar, liczbę wierszy, tytuł, typ dokumentu, kodowanie znaków, język, liczbę skryptów, arkuszy stylów, obrazów, linków i formularzy oraz domeny zewnętrzne, z którymi plik próbowałby się połączyć.
4. Włączaj przełączniki tylko w razie potrzeby. Jeśli strona wygląda na pozbawioną stylów albo jest pusta, spróbuj opcji „Wczytuj zasoby zewnętrzne” lub „Uruchamiaj skrypty”. Obie działają wewnątrz piaskownicy, ale przy plikach, którym nie ufasz, zostaw je wyłączone.

Jak działa podgląd

Plik HTML to zwykły tekst, który przeglądarka zamienia w stronę. Po dwukrotnym kliknięciu otwiera się w przeglądarce z pełnymi uprawnieniami: może uruchamiać skrypty i pobierać dowolne treści z internetu. To narzędzie otwiera ten sam kod w ograniczonej ramce, dzięki czemu możesz go najpierw obejrzeć.

• Ramka w piaskownicy. Podgląd to element iframe z atrybutem sandbox i bez uprawnienia allow-same-origin. Plik jest traktowany tak, jakby pochodził z nieznanego źródła, i nie ma dostępu do danych ani plików cookie tej witryny.
• Content-Security-Policy. Domyślnie na początku dokumentu wstawiana jest polityka bezpieczeństwa treści. Blokuje skrypty i wszystko, co miałoby zostać pobrane z innych witryn: obrazy, czcionki i arkusze stylów z internetu nie są wczytywane. Obrazy osadzone jako data: i style wpisane w znaczniku <style> działają normalnie.
• Bez wysyłania. Plik jest odczytywany w przeglądarce za pomocą File API. Nie trafia na żaden serwer, a przy ustawieniach domyślnych jego otwarcie nie wysyła żadnych żądań do zewnętrznych serwerów.
• Formularze i nawigacja. Z podglądu nie da się wysłać formularza, a żądania sieciowe wykonywane przez skrypty (fetch, XHR) pozostają zablokowane nawet wtedy, gdy skrypty są włączone.

Ponieważ zasoby zewnętrzne są zablokowane, zapisana strona internetowa może wyglądać tutaj skromniej niż w zwykłej przeglądarce. To oczekiwane i zarazem przydatne: widzisz, co plik zawiera sam w sobie.

Panel „Informacje” jest wyliczany z tekstu źródłowego za pomocą dopasowywania wzorców, a nie pełnego parsera HTML. Traktuj podane liczby jako szybkie podsumowanie: przy liczeniu znaczników pomijane są komentarze oraz zawartość bloków skryptów i stylów.

Dwa przełączniki i co zmieniają

Dwa przełączniki decydują o tym, co może robić wyświetlana strona. Oba są domyślnie wyłączone. Niezależnie od Twojego wyboru ramka pozostaje w piaskownicy i nigdy nie uzyskuje dostępu do tej witryny.

Nawet przy włączonych skryptach żądania wysyłane przez skrypty (fetch, XHR) pozostają zablokowane, a formularzy nie da się wysłać. Wczytywanie zasobów zewnętrznych powoduje jednak rzeczywiste połączenia z innymi serwerami.

Do czego się przydaje

Na ile jest to bezpieczne i czego narzędzie nie robi

Oglądanie podejrzanego pliku tutaj przy ustawieniach domyślnych jest bezpieczniejsze niż dwukrotne kliknięcie, bo nic się nie uruchamia i nic nie jest pobierane. Ochronę zapewniają piaskownica przeglądarki i polityka Content-Security-Policy, czyli te same mechanizmy, których przeglądarki używają dla każdej osadzonej ramki.

To jednak nadal przeglądarka plików, a nie program zabezpieczający.

• To nie jest antywirus. Nie skanuje plików w poszukiwaniu złośliwego oprogramowania, nie rozpoznaje znanych zagrożeń i nie wydaje werdyktu, czy plik jest bezpieczny.
• Strona nadal może Cię oszukać. Fałszywy formularz logowania wygląda prawdziwie, nawet jeśli nie może wysłać danych. Nigdy nie wpisuj haseł, numerów kart ani kodów na stronie otwartej z załącznika.
• Linki. Nie klikaj linków w podglądzie niezaufanego pliku. Jeśli strona każe Ci coś pobrać lub zainstalować, nie rób tego.
• Przełączniki zmieniają ryzyko. Wczytywanie zasobów zewnętrznych łączy się z serwerami osób trzecich, a uruchamianie skryptów wykonuje kod pliku w piaskownicy.
• Liczby są przybliżone. Panel „Informacje” podsumowuje tekst pliku i może pominąć elementy, które skrypty tworzą dopiero w trakcie działania.

W przypadku plików, którym naprawdę nie możesz zaufać, najbezpieczniej jest ich wcale nie otwierać albo zapytać nadawcę innym kanałem, na przykład telefonicznie. Aktualizuj system i przeglądarkę. Wiadomości phishingowe zgłaszaj do CERT Polska (incydent.cert.pl).

Jak czytać panel „Informacje”

Panel to lista kontrolna, którą przeczytasz w kilka sekund. Pokazuje rozmiar w bajtach i liczbę wierszy, a następnie:

• Tytuł, typ dokumentu, doctype. Dokument to pełna strona HTML, obraz SVG albo fragment. Strona bez deklaracji doctype może być wyświetlana przez przeglądarki w trybie zgodności wstecznej (ang. quirks mode).
• Kodowanie znaków i język. Jeśli plik nie deklaruje kodowania, polskie litery mogą wyświetlać się jako „krzaki”. Atrybut lang pomaga czytnikom ekranu i tłumaczom automatycznym.
• Elementy. Liczba znaczników znalezionych w kodzie.
• Skrypty i arkusze stylów. Liczba wpisanych w dokument i zewnętrznych. Zewnętrzne skrypty to typowy sposób, w jaki strona pobiera kod z innych witryn.
• Obrazy, linki, formularze, ramki. Szybkie sygnały ostrzegawcze: formularz na stronie, której się nie spodziewasz, albo iframe wskazujący na inną witrynę zasługują na uwagę.
• Domeny zewnętrzne. Serwery wymienione w atrybutach src, href, srcset oraz w url(...) i @import. Krótka lista znanych domen to norma w zapisanej stronie internetowej; wiele nieznanych warto sprawdzić dokładniej.

Aby przeliczyć daty lub terminy z wyeksportowanego raportu, skorzystaj z kalkulatora dat.

Najczęściej zadawane pytania