Ctrl-s wraca z lamusa
Wiemy, że strony www które widzimy w przeglądarce to pliki HTML, które mogą być statyczne lub generowane na żądanie. W zamierzchłych czasach, gdy większość polaków nie miała dostępu do internetu, ale niektórzy mieli w domu komputer, funkcjonowały tzw. „kafejki internetowe” – miejsca w których za opłatą można było skorzystać z komputera z internetem – coś a'la publiczne komputery w bibliotece.
Z takiej kafejki korzystałem swego czasu i ja. Zapisywałem sobie rzeczy do wyszukania w internecie i raz na tydzień szedłem z pendrivem 1 GB, ściągałem strony i czytałem na spokojnie w domu. Wiecie, stronę można było zapisać (naciskając ctrl-s w przeglądarce) i później otworzyć ją offline. O ile linki nie działały, zachowywał się tekst i obrazki. Zapisana strona mniej-więcej przypominała wersję online. Sądzę, że nie tylko ja tak robiłem.
Dziś zapisywanie stron jest już niemodne. Zwyczajnie nie ma takiej potrzeby, wystarczy zakładka. Chyba, że spodziewamy się w najbliższym czasie odcięcia od sieci, np. lotu samolotem, przejazdu pociągiem czy wyjazdu za granicę.
Z powodu małego zapotrzebowania na ten feature, funkcja ctrl-s w przeglądarkach to już relikt przeszłości, a developerzy nie biorą tego pod uwagę przy projektowaniu. Sprawdźcie sami – o ile Wikipedia po zapisaniu wygląda niemal identycznie, wiele nowoczesnych stron w najlepszym wypadku traci style:
A w najgorszym jest całkowicie pozbawiona treści:
Jeśli kogoś tu interesuje techniczne wyjaśnienie, nie zapisano istotnych zasobów zewnętrznych, tylko sam „szkielet”. Jak ładuje się coś dynamicznie (można to poznać po sygnalizowaniu wczytywania lub aktualizacjach na żywo), to najprawdopodobniej przeglądarka tego nie zapisze. Tak więc posty na socialach, jednoosobowe gry i inne apki webowe, nie ruszą.
Co zatem możemy zrobić?
Najłatwiej zrzut ekranu. Faktycznie, to właśnie zrobi większość osób. Opcja ta ma kilka zalet, m.in. łatwość zrobienia, wysłania i otwarcia, ma również mnóstwo wad:
- nie można kopiować ani przeszukiwać tekstu,
- kompresja utrudniająca przeczytanie przy długich zrzutach,
- rozmiar pliku,
- brak interaktywności.
Jeśli kiedyś dostaliście snipetkę kodu w formie graficznej, wiecie jakie to potrafi być irytujące. Jednocześnie jest to całkiem niezły sposób na omijanie zautomatyzowanej cenzury.
Można stworzyć PDF-a. Wciskamy ctrl-p (jak print) i wybieramy drukowanie do pliku. Zalety:
- przenośność,
- niewielki rozmiar w porównaniu z grafiką rastrową,
- klikalne linki,
- strony mogą dostosować swój wygląd pod drukowanie (wada jeśli używane złośliwie),
- generowane z już wyświetlanej strony po załadowaniu dynamicznej treści.
Wady:
- kopiowanie bywa uciążliwe (lubią pojawić się dodatkowe białe znaki),
- wymuszony podział na strony,
- nie nadaje się do stron interaktywnych.
SingleFile
SingleFile zrzuca całą zawartość strony do jednego, samo-rozpakowującego się pliku HTML, którego stan odpowiada stanowi Dla zmniejszenia rozmiaru domyślnie pomija zapis audio i wideo.
W ustawieniach można włączyć zapis JavaScript (sieć/skrypty), niezbędny do działania aplikacji webowych, ale mogą występować błędy.
Pozwólcie, że pokażę wam coś tak niewiarygodnego, że wam szczęka opadnie. Gdybym sam tego nie sprawdził, nie uwierzyłbym.
💡 Kliknij aby przejść do strony pobierania
Zapiszcie sobie ten obrazek i spróbujcie otworzyć. OK, a teraz zmieńcie rozszerzenie na html i spróbujcie otworzyć.
Zaskoczeni? Na tym nie koniec. Teraz zmieńcie rozszerzenie na zip i otwórzcie.
Za każdym razem plik otwierał się poprawnie: jako obrazek, strona www i archiwum z plikami strony.
Jak?!
🛑 Uwaga: niskopoziomowe wyjaśnienie i zagłębianie się w binarną strukturę pliku!
Pierwsze 8 bajtów, to sygnatura PNG – jest ona stała dla każdego pliku tego typu. Reszta pliku to następujące po sobie ramki:
- 4 bajty – długość danych
- 4 bajty – typ ramki
- dane
- 4 bajty – suma kontrolna CRC
Pierwsza ramka to IHDR (ang. Image Header). Zawiera metadane grafiki: wymiary, kolory, kompresja, etc. niezbędne do prawidłowego wyświetlenia. Po niej następuje ramka tTXt – ramka tekstowa. W niej znajduje się początek HTML-a:
<html data-sfz><meta charset=windows-1252><title></title><meta name=viewport content="width=device-width, initial-scale=1"><body hidden><!--
Z uwagi na poprzedzającą zawartość, nie jest to prawidłowy plik HTML, ale przeglądarki są bardzo tolerancyjne. <!-- oznacza początek komentarza. W tym miejscu kończy się też ramka tekstowa. Dla przeglądarki dalsza treść do odwołania będzie nieistotna.
Następnie mamy sRGB – przestrzeń kolorów, a potem od 0xCA do 0x88A8 to już skompresowane piksele (IDAT). Ciekawostka: cały plik łącznie z zip-em waży 140 kB. Bez kompresji PNG same piksele ważyłyby 2 MB.
Aż dochodzimy do kolejnego pola tTXt stanowiącego większość pliku. Tutaj komentarz HTML-a się zamyka i wstawiony zostaje zminifikowany kod JavaScript (około 47 kB), który wyciąga ze znajdującego się dalej ZIP-a poszczególne pliki do pamięci i składa z nich stronę.
--><script>var e,t;e=this;t=function(e)
...
</script><!--PK
PK\x03\x04 sygnalizuje ramkę ZIP-a. Specyfikacja tego formatu pozwala, aby przed pierwszą ramką i za ostatnią znajdowały się dowolne dane. Program od archiwów po prostu je zignoruje, szukając sygnatury ZIP-a. Tak więc jest to prawidłowy plik ZIP. Nie będziemy się w niego bardziej zagłębiać, ponieważ nie to tutaj znaczenia.
Podsumowując, struktura zagadkowego pliku przedstawia się następująco:
- sygnatura PNG
- ramka
IHDR - ramka
tTXt- HTML
- ramka
sRGB - 5 ramek
IDAT - ramka
iTXt- HTML
- ZIP
- HTML
- ramka
IEND
Przy czym nie jest to prawidłowy kod HTML. Nie trzyma się standardowej struktury. Mimo wszystko – działa.
Wracamy na wysoki poziom!
Plik ten pochodzi stąd: https://gildas-lormeau.github.io i przy pomocy wtyczki SingleFile sami możemy je wytworzyć z dowolnej strony!
- Wchodzimy w ustawienia wtyczki, w zakładkę format pliku.
- Wybieramy format „samorozpakowujący się ZIP (uniwersalny)
- Zaznaczamy niedołączanie danych po ZIP i osadzanie obrazu.
Niestety muszę was rozczarować – wtyczka nie zrobi za was zrzutu ekranu zapisywanej strony, tylko poprosi was o obrazek do osadzenia. Nie działa to też w każdym przypadku, zdarzają się błędy i glitche, jako że funkcja ta została stworzona niedawno. Osobiście trzymam ją wyłączoną.
Obsługiwane są nawet zaszyfrowane archiwa i je również można otworzyć w przeglądarce!
Opcji konfiguracji i automatyzacji jest naprawdę wiele. Można np. ustawić automatyczne wysyłanie zapisanych stron do chmury, autozapis stron dodanych do zakładek albo zamykanie karty po skończonym zapisie. Łatwo jest też zapisać wiele stron naraz.
A wracając do głównego wątku, jest jeszcze jeden warty odnotowania sposób zapisu stron offline, tym razem z wszystkimi linkami. Przypuszczalnie to właśnie z tego narzędzia korzystają cyberprzestępcy tworząc idealne kopie popularnych serwisów internetowych. Cóż, u nas podobne strony są na porządku dziennym – są przecież setki identycznych instancji Mastodona, Invidiousa czy Nextclouda i jakoś nikt nie próbuje logować się na nie-swoim serwerze. Zawsze sprawdzamy domenę, VPN-a i czy nie ma wycieków DNS-a.
To są tematy, które planuję poruszyć w kolejnych wpisach, a o HTTrack wspomnę może innym razem. Jeśli podobał ci się ten wpis, pamiętaj, że możesz otrzymywać powiadomienia o kolejnych, subskrybując mój kanał RSS. Jest to całkowicie anonimowe, a ja nie mam żadnych statystyk ile osób mnie subskrybuje. Jak zauważyłem, wyszukiwarki straciły już zainteresowanie moją stroną, a ja zamierzam tworzyć treści nie pod nie, ale dla was, dlatego zachęcam również do dzielenia się opinią zwrotną w komentarzach.