Jak ukradłem czcionkę - czyli security by obscurity

Jeśli użytkownik jest w stanie wyświetlić dowolny element twojej strony w swojej przeglądarce, jest też w stanie go zapisać. Potem z danym medium może robić to co mu się żywnie podoba - niektórzy próbują temu usilnie zapobiec.

Na taki zabieg mamy określenie - DRM. Według Wikipedii jest to

System zabezpieczeń oparty na mechanizmach kryptograficznych lub innych metodach ukrywania treści mający przeciwdziałać używaniu danych w formacie elektronicznym w sposób sprzeczny z wolą ich wydawcy.

W prostych słowach - DRM ma za zadanie ogarniczyć to, co możesz zrobić z treścią wyświetlaną na twoim ekranie.

Przykładem wykorzystania DMR może być nawet i najbardziej popularna na świecie platforma stremingowa - Netflix. Stosują oni Googlowskie rozwiązanie DRM o nazwie Widevine, które ma zapobiegać przechwytywaniu filmów z Netflixa.

Ciekawostka: polski player.pl korzysta z tej samej technologii

Widevine blokuje nawet takie funkcje jak robienie zrzutów ekranu, albo nagrywanie obrazu dowolnym programem do przechwytywania ekranu.

Innym znanym rozwiązaniem DRM jest Denuvo, technologia antyingerencyjna utrudniająca użytkownikowi modyfikacje plików w np. grach, aby oszustwa były możliwie jak najtrudniejsze.

Wszystko wydaje się być OK, problemem jest to, że

idealne rozwiązanie DRM NIE ISTNIEJE

Nie jest możliwe wyświetlenie treści użytkownikowi w taki sposób, żeby nie był w stanie go w żaden sposób zapisać. Blokowanie screenshotów Netflixa da się zwalczyć wyłączając akcelerację sprzętową w ustawieniach przeglądarki, a WideVine zostało wielokrotnie złamane.

Kryptografia ma sens kiedy użytkownik nie zna klucza do odszyfrowania danych. Sprawy komplikują się, kiedy użytkownik dane odszyfrowuje po swojej stronie, czyli musi posiadać klucz.

Więc jak to działa?

Od tego też mamy termin. Security by obscurity. W naszym przypadku oczywiście nie da się zablokować pewnych działań użytkownika, da się je tylko utrudnić. Na tym głównie to polega.

Utrudniamy działania użytkownika tak bardzo, żeby nie chciało mu się dalej dłubać, lub by opóźnić niepożądane akcje. Na tym opiera się min. Denuvo; Przez pierwsze tygodnie/miesiące gier nie da się piracić, więc firma może zarobić. Denuvo jest łamane po pewnym czasie zapewniając firmie pewny dochód.

Jak to się ma do czcionek w internecie?

Wiadomo - możemy wyświetlić, to możemy pobrać. Wystarczy zajrzeć w narzędzia developera w przeglądarce i znaleźć tę, która nam się podoba. Aspekty moralne zostawiamy na teraz w spokoju.

Sztuczka działa nawet na stronach Googla. Youtube, i inne strony nie mają z tym problemu i nie robią wiele, żeby nam przeszkodzić. Czasem można spotkać się z tym, że czionki zapisane są w obrazku, ale to zazwyczaj tylko i wyłącznie na potrzeby prezentacji, na stronach gdzie czcionki można kupić.

Co dalej?

Tak się składa, że jestem fetyszystą tłustych czcionek, a jedna wpadła mi w oko. Oczywiście po wypatrzeniu tej najpiękniejszej musiałem ją zdobyć - narzędzia developera i jazda.

Devtoolsy

Na pierwszy rzut oka widać, że coś jest nie tak. Nazwy czcionek są tak długie, że nie widać nawet ich rozszerzeń.

Devtoolsy

Kiedy chciałem zobaczyć ich podgląd - nie dało się. Nic strasznego, na YouTubie było podobnie.

Następnie chciałem zobaczyć z jakiego pliku czcionka jest ładowana - tak najłatwiej sprawdzić jej źródło.

Headery

Headery

Nietrudno jest zorientować się, że jest to czionka w formacie woff2 zakodowana w base64.

Base64 zostawia za sobą padding. Niestety to słowo nie ma odpowiednika w języku polskim, ale chodzi tu o = zostawiane na końcu zakodowanej treści.

Skopiowałem więc wszystko od przecinka aż do ostatniego znaku = i wrzuciłem do dekodera.

zdekodowana treść

Otrzymane wOF2 oznaczało dla mnie sukces i potwierdzenie, że czcionka rzeczywiście jest zakodowana w base64, wOF2 bardzo łatwo skojarzyć z woff2, czyli prawidłowym formatem czcionki.

Oznacza to dla nas tyle, że czcionka nie jest w oddzielnym pliku na serwerze, a siedzi gdzieś w kodzie strony, najpewniej w CSSie.

Czas na poszukiwania

Któraś z tych na pewno jest tą, której szukamy. Skąd się dowiedzieć która?

czcionki

Sprawdzamy używaną nazwę w CSS, żeby potem móc znaleźć ją w kodzie i stamtąd ją wyciągnąć.

devtoolsy css

Narzędzia developerskie mówią, że czcionka nazywa się Decimal. Niestety pojawił się kolejny problem - używane są 2 czcionki, a nie tylko jedna!

Ktoś sprytnie pomyślał, żeby jedną czcionkę podzielić na dwie. Jeden plik zawiera połowę znaków, a drugi drugą połowę. Da się to łatwo sprawdzić po prostu usuwając jedną z wartości font-family. Tylko jeśli użyjemy obu czcionek na raz, zadziała ona poprawnie. Jeśli coś pójdzie nie tak, efekt będzie podobny do tego:

naglowek tego artykulu

Oznacza to dla nas tyle, że musimy teraz ukraść 2 czcionki, a nie tylko jedną. Security by obscurity pełną parą.

Kiedy wiemy już jak nazywa się czcionka, możemy poszukać jej w CSSie. W zakładce Initiator sprwdziłem, któy plik css wczytuje tę czcionkę.

initiator

Następnie znalazłem go w zakładce requests, i przeszedłem do najczystszego pliku CSS, aby go przejrzeć.

plik css

Już na samej górze pliku była moja pożądana czcionka - jedynym haczykiem na który dałem się złapać to to, że była ona wczytywana 2 razy, z różnymi wagami, na polskie grubością. Trzeba było poscrollować trochę niżej, żeby znaleźć ten grubszy wariant, który mnie interesował.

Teraz kiedy mamy już nazwę czcionki, możemy porównać zakodowane stringi z tymi które widzieliśmy wcześniej w devtoolsach i pobrać te, które się zgadzają.

porownanie

Kiedy już znajdziemy i pobierzemy oba fragmenty czcionki, możemy je normalnie załadować na naszej stronie.

kod css

I tyle

Jak widać, każdy taki zabieg da się obejść, trzeba się tylko trochę nagłowić.

Oryginalna data napisania artykułu: 11.09.2022 Ostatnio modyfikowany: 11.09.2022