← Wszystkie wpisy

API i helpers

Jak JustZix wstrzykuje kod na stronach z surowym CSP

Niektóre strony mają tak rygorystyczne Content-Security-Policy, że nie wykonają żadnego skryptu, którego nie napisał ich autor. A jednak JustZix potrafi wstrzyknąć tam Twój JS i podpiąć Output Console pod console.log strony. Ten artykuł tłumaczy, jak — i dlaczego pierwsza wersja tego nie potrafiła.

Czym jest CSP i dlaczego przeszkadza

Content-Security-Policy to nagłówek HTTP, którym strona deklaruje, skąd wolno ładować skrypty. Typowa surowa polityka to script-src 'self' — „wykonuj tylko skrypty z mojej domeny". Taka polityka blokuje inline <script>: jeśli wstrzykniesz do DOM-u tag <script>kod...</script>, przeglądarka go nie uruchomi. Tak działają m.in. GitHub, panele bankowe i wiele stron korporacyjnych.

Pierwsze podejście — i regresja

Wczesna wersja hooka Output Console (v2.13.72–73) wstrzykiwała kod właśnie przez inline <script> dodawany do <head>. Na zwykłych stronach działało. Na stronach z script-src 'self' przeglądarka po cichu odrzucała skrypt — hook się nie podpinał, Output Console była pusta. To była regresja: funkcja, która działała „w demie", padała dokładnie tam, gdzie deweloper najbardziej jej potrzebuje.

Fix — chrome.scripting.executeScript

Rozwiązanie (v2.13.74) nie wstrzykuje już tagu <script>. Zamiast tego service worker wtyczki woła chrome.scripting.executeScript. To kluczowa różnica: ten skrypt jest wykonywany z przywileju rozszerzenia, nie z poziomu strony. CSP strony go nie dotyczy — przeglądarka traktuje go jak kod zaufanego rozszerzenia, na które użytkownik wyraził zgodę przy instalacji.

MAIN world kontra ISOLATED world

Skrypty treści rozszerzenia żyją domyślnie w „świecie izolowanym" (ISOLATED) — mają własny window, odseparowany od strony. To bezpieczne, ale bezużyteczne, gdy chcesz podpiąć się pod prawdziwe console.log strony albo dotknąć jej zmiennych globalnych.

Dlatego hook ląduje w świecie MAIN — tym samym kontekście JavaScript, w którym żyje kod strony. Tam może opakować console.log/warn/error, podpiąć listenery error i unhandledrejection i widzieć dokładnie to, co widzi strona.

Most między światami — postMessage

Hook w świecie MAIN przechwytuje logi, ale samo okno Output Console renderuje skrypt treści w świecie ISOLATED. Dwa światy nie współdzielą zmiennych — potrzebny jest most. Tym mostem jest window.postMessage:

  1. Hook w MAIN przechwytuje wpis console.log.
  2. Serializuje argumenty i robi window.postMessage z tagowanym ładunkiem.
  3. Skrypt treści w ISOLATED nasłuchuje message, filtruje po tagu i renderuje wpis w oknie Output Console.

postMessage to jeden z niewielu kanałów, które przecinają granicę światów — i robi to bez naruszania CSP, bo nie jest wykonywaniem skryptu, tylko przekazaniem komunikatu.

Co to znaczy w praktyce

Output Console i wstrzykiwanie JS działają na stronach, na których poległaby klasyczna sztuczka z inline skryptem — GitHub, panele bankowości, intranety korporacyjne z twardym CSP. Nie musisz nic konfigurować; wtyczka sama wybiera tę ścieżkę.

Granice — czego CSP i tak nie przepuści

Aktualizacja v3.2.0 — także reguły JS, akcje i okna TEMP

Powyższy mechanizm dotyczył hooka Output Console — tego, jak rozszerzenie nasłuchuje console.log strony. Wykonywanie kodu Twoich reguł JS, akcji i okien TEMP JS to oddzielna ścieżka — i ona także działała tylko na stronach z CSP dopuszczającym 'unsafe-eval'. W v3.2.0 dorzuciliśmy do tej drugiej ścieżki tę samą filozofię „warstwowej strategii": kolejność prób to chrome.userScripts.executenew Function<script src="blob:…">. Reguły, akcje i okna JS pane / JS Console działają teraz nawet na Facebooku (przez fallback blob) i na pełnym CSP-strict (przez userScripts po jednorazowym włączeniu „Skryptów użytkownika"). Pełny opis: Reguły JS działają teraz nawet na Facebooku, X i GitHubie.

Zobacz też

Zainstaluj JustZix — i wstrzykuj kod nawet tam, gdzie strona mówi „nie".

Oceń ten wpis

Brak ocen — oceń jako pierwszy.

Wypróbuj samodzielnie

Zainstaluj JustZix i wklej dowolny snippet z tego artykułu. Dwie minuty od zera do działającej reguły na wszystkich Twoich urządzeniach.

Pobierz JustZix

Funkcje · Jak to działa · Przykłady · Zastosowania