{"id":8839,"date":"2026-08-20T18:45:00","date_gmt":"2026-08-20T16:45:00","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=8839"},"modified":"2026-10-24T01:52:30","modified_gmt":"2026-10-23T23:52:30","slug":"zero-server-side-browser-tools-jak-projektowac-bezpieczne-narzedzia","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/zero-server-side-browser-tools-jak-projektowac-bezpieczne-narzedzia\/","title":{"rendered":"Zero-Server-Side Browser Tools: Jak projektowa\u0107 bezpieczne narz\u0119dzia w czystym JS"},"content":{"rendered":"

Lokalne narz\u0119dzie przegl\u0105darkowe mo\u017ce haszowa\u0107, analizowa\u0107 lub przekszta\u0142ca\u0107 dane bez wysy\u0142ania tych tre\u015bci do serwera aplikacji. Korzy\u015bci\u0105 jest mniejszy przep\u0142yw danych: endpoint przetwarzaj\u0105cy nie potrzebuje poufnej zawarto\u015bci. Sama strona nadal mo\u017ce by\u0107 pobierana z sieci, a serwer hostingu otrzymywa\u0107 metadane \u017c\u0105dania. Okre\u015blenie \u201eprzetwarzanie lokalne\u201d wymaga wi\u0119c precyzyjnego zakresu.<\/p>\n

Granica zaufania przy lokalnym przetwarzaniu<\/h2>\n

Piaskownica przegl\u0105darki oddziela tre\u015bci internetowe od cz\u0119\u015bci systemu operacyjnego. Kod na tej samej stronie nadal mo\u017ce odczytywa\u0107 pola wej\u015bciowe. Przej\u0119ty skrypt, niebezpieczne wstawianie HTML lub rozszerzenie z odpowiednimi uprawnieniami mo\u017ce naruszy\u0107 poufno\u015b\u0107. Vanilla JavaScript oznacza kod bez frameworka, a nie gwarancj\u0119 bezpiecze\u0144stwa.<\/p>\n

Ma\u0142a liczba zale\u017cno\u015bci, dostarczanie przez HTTPS, przegl\u0105d kodu i brak analityki lub nagrywania sesji przy polach wej\u015bciowych ograniczaj\u0105 ryzyko. Dane wej\u015bciowe nie powinny trafia\u0107 do URL-i, log\u00f3w aplikacji ani telemetrii b\u0142\u0119d\u00f3w. Dowolny tekst nale\u017cy wy\u015bwietla\u0107 przez textContent<\/code> lub value<\/code> pola, zamiast przez innerHTML<\/code>.<\/p>\n

\n\"Lokalne
Lokalne przetwarzanie tekstu przez Web Crypto. CSP ogranicza okre\u015blone kana\u0142y komunikacji i uzupe\u0142nia przegl\u0105d kodu.<\/figcaption><\/figure>\n

Haszowanie w\u0142a\u015bciwych bajt\u00f3w<\/h2>\n

TextEncoder<\/code> koduje tekst JavaScript jako bajty UTF-8. TextDecoder<\/code> wykonuje operacj\u0119 odwrotn\u0105 dla wybranego kodowania. Operacje nadal wymagaj\u0105 pami\u0119ci i czasu. crypto.subtle.digest()<\/code> zwraca Promise, ale przygotowanie tekstu i p\u0119tle mog\u0105 nadal obci\u0105\u017ca\u0107 g\u0142\u00f3wny w\u0105tek. Akceleracja sprz\u0119towa i zerowe op\u00f3\u017anienie nie s\u0105 gwarantowane.<\/p>\n

Przyk\u0142ad oblicza SHA-256 reprezentacji UTF-8 bez usuwania spacji i zmiany wielko\u015bci liter. Limit miliona jednostek kodowych UTF-16 jest przyk\u0142adowym ograniczeniem aplikacji, a nie gwarancj\u0105 przegl\u0105darki ani limitem bajt\u00f3w. Interfejs wywo\u0142uj\u0105cy musi czytelnie prezentowa\u0107 odrzucone dane i b\u0142\u0119dy.<\/p>\n

async function sha256Text(text) {\n  if (typeof text !== 'string') throw new TypeError('Expected text');\n  if (text.length > 1_000_000) throw new RangeError('Input too large');\n  if (!globalThis.isSecureContext || !globalThis.crypto?.subtle) {\n    throw new Error('Web Crypto requires a supported secure context');\n  }\n  const bytes = new TextEncoder().encode(text);\n  const digest = await crypto.subtle.digest('SHA-256', bytes);\n  return Array.from(new Uint8Array(digest),\n    byte => byte.toString(16).padStart(2, '0')).join('');\n}\n<\/code><\/pre>\n
Suma kontrolna pliku powinna obejmowa\u0107 oryginalne bajty, a nie tekst ponownie zdekodowany i zakodowany. digest()<\/code> wymaga ca\u0142ego wej\u015bcia w pami\u0119ci i nie obs\u0142uguje przyrostowego strumieniowania. Bardzo du\u017ce pliki wymagaj\u0105 innej, sprawdzonej implementacji oraz zmierzonych limit\u00f3w zasob\u00f3w. Sam SHA-256 nie jest szyfrowaniem ani odpowiedni\u0105 metod\u0105 przechowywania hase\u0142. Skr\u00f3t przewidywalnych danych osobowych nie staje si\u0119 automatycznie anonimowy.<\/p>\n
CSP ogranicza okre\u015blone kana\u0142y transmisji<\/h2>\n
connect-src 'self'<\/code> dopuszcza po\u0142\u0105czenia skryptowe z w\u0142asnym originem. connect-src 'none'<\/code> blokuje API obj\u0119te t\u0105 dyrektyw\u0105, mi\u0119dzy innymi fetch, WebSocket i beacony. Obrazy, formularze, ramki i \u0142adowanie skrypt\u00f3w maj\u0105 osobne regu\u0142y. Polityka lokalnego narz\u0119dzia musi uwzgl\u0119dnia\u0107 r\u00f3wnie\u017c te drogi i \u015bci\u015ble ogranicza\u0107 wykonywany kod.<\/p>\n
CSP jest egzekwowana przez przegl\u0105dark\u0119 i stanowi dodatkow\u0105 warstw\u0119 ochrony. Nie jest jednak og\u00f3lnym firewallem sieciowym ani matematycznym dowodem braku wycieku. Nawigacja i dozwolone pobieranie zasob\u00f3w wymagaj\u0105 osobnej oceny. Skrypty hostowane lokalnie r\u00f3wnie\u017c mog\u0105 zosta\u0107 przej\u0119te. Polityka egzekwuj\u0105ca wymaga test\u00f3w; Report-Only zg\u0142asza naruszenia bez blokowania.<\/p>\n
Workers poprawiaj\u0105 responsywno\u015b\u0107, nie poufno\u015b\u0107<\/h2>\n
Web Worker mo\u017ce przenie\u015b\u0107 kosztowne obliczenia poza w\u0105tek interfejsu. Worker nie ma bezpo\u015bredniego dost\u0119pu do DOM, ale strona przekazuje wej\u015bcie i odbiera wynik. Z\u0142o\u015bliwy kod strony mo\u017ce przechwyci\u0107 oba etapy. Workers mog\u0105 r\u00f3wnie\u017c wykonywa\u0107 \u017c\u0105dania sieciowe.<\/p>\n
Osobny plik workera wymaga odpowiedniego nag\u0142\u00f3wka CSP dla w\u0142asnego kontekstu wykonania. Dyrektywa worker-src<\/code> strony kontroluje \u0142adowanie workera, a nie automatycznie p\u00f3\u017aniejsze po\u0142\u0105czenia. Worker z adresu blob dziedziczy polityk\u0119 tw\u00f3rcy i wymaga odpowiedniego zezwolenia na uruchomienie. Osobny plik u\u0142atwia przegl\u0105d, ale sama suma kontrolna nie potwierdza braku komunikacji.<\/p>\n
Dowody i ograniczenia<\/h2>\n
Przydatny test obejmuje \u0142adowanie, wprowadzanie danych, przetwarzanie, kopiowanie lub pobieranie wyniku, b\u0142\u0119dy i czyszczenie. Kontrola sieci powinna obejmowa\u0107 workers i ewentualny aktywny service worker. Pr\u00f3ba offline po za\u0142adowaniu potwierdza sprawdzon\u0105 wersj\u0119 oraz przebieg, a nie ka\u017cd\u0105 przysz\u0142\u0105 aktualizacj\u0119. \u015arodowisko testowe z zablokowan\u0105 sieci\u0105 daje dodatkowy dow\u00f3d.<\/p>\n
Wyczyszczenie p\u00f3l i usuni\u0119cie referencji ogranicza przypadkowe ponowne u\u017cycie. JavaScript nie mo\u017ce jednak zagwarantowa\u0107 usuni\u0119cia wszystkich kopii z pami\u0119ci przegl\u0105darki i systemu w spos\u00f3b odporny na analiz\u0119 informatyczn\u0105. Schowek, pobrane pliki i celowo zapisane dane mog\u0105 przetrwa\u0107 zamkni\u0119cie karty. Unikanie zb\u0119dnego zapisu jest bardziej wiarygodne ni\u017c obietnica ca\u0142kowitego usuni\u0119cia przy zamkni\u0119ciu.<\/p>\n
\n
Pytania i odpowiedzi<\/h2>\n
Czy worker podlega tej samej CSP co strona?<\/h3>\n
Zwyk\u0142y osobny plik ma w\u0142asny kontekst i potrzebuje nag\u0142\u00f3wka CSP w odpowiedzi dostarczaj\u0105cej skrypt. Zezwolenie worker-src<\/code> dotyczy utworzenia workera. Dla blob obowi\u0105zuje dziedziczenie polityki tw\u00f3rcy; brak odpowiedniego zezwolenia blokuje uruchomienie. Test powinien obejmowa\u0107 zar\u00f3wno start, jak i pr\u00f3b\u0119 po\u0142\u0105czenia z wn\u0119trza workera.<\/p>\n
Gdzie dzia\u0142a Web Crypto?<\/h3>\n
crypto.subtle<\/code> wymaga obs\u0142ugiwanego bezpiecznego kontekstu. HTTPS i typowy localhost podczas developmentu s\u0105 odpowiednie; zwyk\u0142y adres HTTP w prywatnej sieci LAN zazwyczaj nie jest. Przyk\u0142ad sprawdza kontekst oraz dost\u0119pno\u015b\u0107 API.<\/p>\n<\/div>\n
\n
\u0179r\u00f3d\u0142a<\/h2>\n