Privacy Thing

Strony internetowe mogą próbować rozpoznawać użytkowników bez zapisania ani jednego pliku cookie. Wystarczy zestawić adres IP z geolokalizacją udostępnianą przez przeglądarkę, językiem, strefą czasową, rozdzielczością ekranu, właściwościami Canvas i WebGL czy informacjami o urządzeniu. Każdy z tych parametrów osobno wydaje się mało znaczący, ale razem mogą tworzyć charakterystyczny odcisk przeglądarki.

Rozszerzenie nie może zmienić wszystkich tych danych, w szczególności publicznego adresu IP. Privacy Thing koncentruje się na informacjach, na które przeglądarka pozwala mu rzeczywiście wpływać. Użytkownik decyduje, jakie wartości zobaczy konkretna witryna, i może przypisać różnym domenom osobne profile geolokalizacji, języka, strefy czasowej oraz wybranych mechanizmów ochrony.

Przykładowo dla wybranej witryny można przygotować profil z konkretną lokalizacją, językiem i strefą czasową. Privacy Thing przypisze go do domeny i zastosuje, zanim strona zdąży odczytać prawdziwe wartości. Panel X-Ray pokaże następnie, po jakie obsługiwane dane witryna rzeczywiście sięgnęła i które ustawienia miały na nie wpływ.

Projekt rozpoczął się pod nazwą GeoWarp jako proste narzędzie do podmiany geolokalizacji. Pierwsza wersja robiła jedną rzecz: zwracała stronom inne współrzędne. Szybko okazało się jednak, że sama lokalizacja to za mało. Witryna może jednocześnie sprawdzić język, strefę czasową, ustawienia regionalne, nagłówki i dane urządzenia. Kiedy informacje te do siebie nie pasują, niespójność staje się cechą równie charakterystyczną jak wartości, które miała ukryć.

Z tego eksperymentu wyrósł Privacy Thing - system pozwalający kontrolować nie pojedynczą wartość, lecz spójny obraz środowiska widziany przez witrynę.

• Geolokalizacja
• Czas i ustawienia regionalne
• Canvas
• WebGL
• Audio
• Navigator
• Screen
• Client Hints
• Battery
• WebRTC
• Dedicated Workers
• Service Workers
• Shared Workers

Każdy kolejny etap ujawniał następną granicę prostego rozwiązania. Podmiana współrzędnych wymagała spójnych ustawień regionalnych, profile domenowe - niezawodnego dostarczania konfiguracji podczas nawigacji, a obsługa głównego dokumentu - objęcia ochroną pozostałych kontekstów wykonawczych. Architektura projektu nie powstała więc jako gotowy plan: rozwijała się w odpowiedzi na zachowania, których nie dało się wiarygodnie obsłużyć wcześniejszym modelem.

Nawet najszerszy zestaw automatycznych testów nie zastąpi sprawdzania rozszerzenia na żywym organizmie. LinkedIn okazał się szczególnie pouczającym przypadkiem: jego warstwa interfejsu (frontend), delikatnie mówiąc, nie oszczędza wywołań funkcji czasu. X-Ray zarejestrował blisko 200 tysięcy odczytów w jednej sesji, co w połączeniu z ówczesnym sposobem raportowania zdarzeń potrafiło zawiesić przeglądarkę. Taki przypadek ujawnił problem wydajnościowy, którego kontrolowane scenariusze wcześniej nie pokazały. Błąd został naprawiony, a LinkedIn trafił do zestawu stałych testów porównawczych wydajności (benchmarków) :P

Rozbudowane testy Chromium i Firefoksa są uruchamiane przy wsparciu webh.pl, które udostępnia projektowi infrastrukturę serwerową opartą na procesorach AMD EPYC. Zapewnia ona szybkie i powtarzalne środowisko do sprawdzania kolejnych zmian przed wydaniem.

Przy zmianie nazwy na Privacy Thing odszedłem od ilustracyjnej maskotki na rzecz prostego, abstrakcyjnego Thinga, logotypu zapisanego krojem o stałej szerokości i kursora. Siłą Thinga jest niemal absurdalnie prosty kształt. Właśnie dlatego łatwo odtworzyć go przy użyciu technologii webowych, płynnie przekształcać i animować bez utraty czytelności - także tam, gdzie do dyspozycji jest tylko kilkanaście pikseli. Zamiast jednego zamkniętego znaku powstał system obejmujący różne kierunki spojrzenia, mruganie, sen oraz animowany kursor. Działa zarówno jako mała ikona rozszerzenia, jak i pełne logo.

Nowa nazwa miała być bezpretensjonalna i celowo nie walczyć o uwagę. GeoWarp brzmiał efektownie, ale nie mówił wiele o szerszych możliwościach rozszerzenia, a przy tym sam próbował zostać bohaterem komunikacji. Privacy Thing zostawia więcej miejsca produktowi i postaci, nie udając, że jednym słowem wyjaśni cały system. Poszukiwania następcy GeoWarpa trwały właściwie od początku projektu. W momencie wyboru nowej nazwy kanoniczna baza w Notion liczyła 891 rekordów - nazw, wariantów i kierunków tematycznych. W 2026 roku naprawdę trudno znaleźć dobrą nazwę ;-)

Identyfikację projektowałem w Affinity Designer. Inkscape dołączył do procesu jako narzędzie do kontroli i poprawiania zgodności SVG, dzięki czemu te same pliki mogły być bezpiecznie używane w różnych przeglądarkach i częściach produktu.

Thing nie jest osadzonym na sztywno obrazkiem, lecz natywnym komponentem webowym (Web Component) <privacy-thing-logo>. Dzięki temu pozostaje niezależny od frameworka, czyli szkieletu użytego do budowy aplikacji, i może zachowywać się tak samo w rozszerzeniu, na stronie produktu oraz tutaj - w portfolio. SVG SMIL, mechanizm animacji zapisany bezpośrednio w grafice, odpowiada wewnątrz komponentu za kierunki spojrzenia, mruganie, sen i płynne przekształcenia znaku. Przejścia CSS prowadzą oczy pomiędzy pozami i animują kursor, a Web Animations API obsługuje krótkie reakcje boop i jelly.

Thing miał być przyjazną postacią łagodzącą brutalnie techniczny charakter produktu. Dlatego animacje nie są wyłącznie dekoracją. Przemawiają do użytkownika: pomagają dostrzec zmianę stanu, ważną informację albo wydarzenie podczas korzystania z przeglądarki. Po włączeniu ograniczenia ruchu komponent zachowuje spokojną, statyczną formę i nadal przekazuje ten sam stan.

Ten sam sposób myślenia przeniosłem na ramki dialogów. Ich akcent powstaje z maskowanego gradientu stożkowego (conic-gradient), którego kąt, szerokość smugi i intensywność efektu halo, czyli zewnętrznej poświaty, są rejestrowanymi właściwościami CSS. Osobne animacje sterują obrotem i delikatnym „oddechem” poświaty, więc kolor i tempo można dobierać niezależnie. Ruch prowadzi wzrok do aktywnego okna, a przy ograniczeniu animacji pozostaje statyczną ramką.

Na koniec dziękuję osobom, które jeszcze przed premierą zechciały poświęcić czas na testowanie rozszerzenia i dzielić się swoimi uwagami. Ich obserwacje z codziennego użycia pozwoliły znaleźć problemy, których nie dało się odtworzyć samą automatyzacją.