ERRBLOCKEDBY_CSP (ang. Blocked by Content Security Policy) to komunikat błędu, który pojawia się w narzędziach deweloperskich przeglądarki (np. w zakładce Network w Chrome DevTools) przy wyświetlaniu statusu ładowanego zasobu. Oznacza on, że przeglądarka nie pobrała określonego pliku (JavaScript, CSS, obraz, czcionka, XHR itp.), ponieważ polityka bezpieczeństwa (CSP, Content Security Policy) strony wyraźnie tego zabrania.
CSP to mechanizm bezpieczeństwa, który pozwala właścicielowi strony albo webdeveloperowi określić, skąd mogą pochodzić zasoby ładowane na stronie (np. tylko z własnej domeny, tylko z zaufanych CDN-ów, bez ładowania zewnętrznych skryptów). CSP może być ustawiony przez nagłówek HTTP (najczęściej) lub przez meta tag HTML.
Przykład typowej polityki CSP
Content-Security-Policy: default-src 'self' Oznacza to, że przeglądarka pozwoli tylko na ładowanie zasobów z tej samej domeny, z której pochodzi sama strona HTML.
Najczęstsze przyczyny błędu
- Polityka CSP jest zbyt restrykcyjna – np. blokuje ładowanie skryptów z zewnętrznych serwerów, nawet jeśli są one niezbędne do działania strony.
- Brak świadomości webmastera – ktoś dodaje nowe generatory bibliotek, CDN-y, widgety społecznościowe, analitykę, ale nie aktualizuje polityki CSP o nowe źródła.
- Brak wiedzy u frontend developera – ktoś łamie politykę CSP, np. wstawiając bezpośrednio JS w atrybuty HTML (inline scripts), co jest domyślnie blokowane przez CSP.
- Testowa polityka CSP – czasem wersja stagingowa ma inną politykę niż produkcja, co prowadzi do nieoczekiwanych blokad.
- Polityka CSP konfliktu z wywołaniami backendowymi – np. czaty, interfejsy API, WebSocket, WebRTC – każdy taki mechanizm wymaga odpowiedniego wpisu w CSP.
Krok po kroku – jak zdiagnozować błąd ERRBLOCKEDBY_CSP
Dla webmastera / web developera
- Sprawdź nagłówki odpowiedzi HTTP
Otwórz narzędzia deweloperskie przeglądarki (F12 → zakładka Network), przeładuj stronę, zerknij na nagłówki odpowiedzi HTTP. Powinieneś znaleźć wpis Content-Security-Policy albo Content-Security-Policy-Report-Only. - Zidentyfikuj zablokowane zasoby
W zakładce Console lub Network na liście żądań znajdziesz komunikaty o typieblocked:csplubERR_BLOCKED_BY_CSP. Sprawdź, który zasób jest blokowany i z jakiego źródła jest ładowany. - Zdekoduj politykę CSP
Skorzystaj z narzędzi online (np. Google CSP Evaluator), aby zobaczyć, czego konkretnie brakuje w polityce. - Wyloguj się z polityki CSP (CSP-Report-Only)
Jeśli masz ustawioną politykę CSP-Report-Only, przeglądarka nie blokuje zasobów, a jedynie raportuje naruszenia. Możesz włączyć raportowanie na własny serwer (parametrreport-urilubreport-to), aby zbierać szczegółowe dane o potencjalnych problemach. - Dodaj brakujące źródła do polityki
Jeśli np. blokowany jest skrypt z Google Analytics, dodaj do polityki wpisscript-src https://www.google-analytics.com. Analogicznie dla innych zasobów. - Przetestuj zmiany
Przeładuj stronę, sprawdź w DevTools, czy nie pojawiają się nowe bloki.
Dla użytkownika końcowego
Komunikat „ERRBLOCKEDBY_CSP” nie jest błędem po stronie Twojej przeglądarki ani wtyczek – to informacja, że właściciel strony celowo zablokował ładowanie danego zasobu. Jako użytkownik nie możesz obejść tej polityki bez naruszania bezpieczeństwa przeglądarki.
Możesz jedynie poinformować obsługę strony (kontakt, e-mail, formularz zgłoszeniowy) o wystąpieniu błędu i podać, która część strony lub jej funkcjonalność nie działa.
Pamiętaj –
Jeśli na stronie widzisz błąd ERRBLOCKEDBYCLIENT (a nie ERRBLOCKEDBYCSP), oznacza to najczęściej, że Twoja przeglądarka lub jej wtyczka (np. AdBlock) blokuje niektóre zasoby. W takim przypadku postępuj zgodnie z instrukcją czyszczenia pamięci podręcznej, resetu przeglądarki lub czasowego wyłączenia blokerów reklam.
Instrukcje krok po kroku – jak naprawić błąd ERRBLOCKEDBY_CSP
Krok 1: Zidentyfikuj politykę CSP
Jak sprawdzić politykę CSP?
- Otwórz narzędzia deweloperskie (F12 w Chrome/Firefox).
- Przejdź do zakładki Network.
- Kliknij w nazwę dokumentu (góra listy, np.
index.html). - Przewiń w dół nagłówków odpowiedzi i znajdź Content-Security-Policy.
Krok 2: Znajdź zablokowane zasoby
- W DevTools przejdź do zakładki Console.
- Przeładuj stronę.
- Wyszukaj komunikaty typu blocked:csp lub ERRBLOCKEDBY_CSP.
- Zapisz sobie, który zasób jest blokowany i z jakiego adresu.
Krok 3: Zmodyfikuj politykę CSP
Zmiana przez nagłówek HTTP (serwer WWW)
Przykład –
Masz w polityce:
Content-Security-Policy: default-src 'self' A chcesz pobierać skrypty z Google Analytics i obrazki z zewnętrznego CDN.
Nowa polityka może wyglądać tak:
Content-Security-Policy: default-src 'self'; script-src 'self' https://www.google-analytics.com; img-src 'self' https://cdn.example.com; Jak edytować nagłówek?
- Apache – Dodaj w pliku
.htaccesslub konfiguracji wirtualnego hosta, np.
Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://www.google-analytics.com; img-src 'self' https://cdn.example.com;" - Nginx – Dodaj do bloku
serverlublocation, np.
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://www.google-analytics.com; img-src 'self' https://cdn.example.com;" always; - PHP – Możesz dodać PHP w pliku
index.php(najlepiej jako pierwszą instrukcję).
header("Content-Security-Policy: default-src 'self'; script-src 'self' https://www.google-analytics.com; img-src 'self' https://cdn.example.com;");
Zmiana przez meta tag HTML
Jeśli nie masz dostępu do serwera, możesz ustawić politykę przez meta tag w sekcji <head> dokumentu HTML:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://www.google-analytics.com; img-src 'self' https://cdn.example.com;"> Nie jest to jednak oficjalnie polecane i może być mniej skuteczne niż nagłówek HTTP.
Krok 4: Testuj i raportuj naruszenia
- Przeładuj stronę i sprawdź w DevTools, czy zasoby są ładowane.
- Skorzystaj z raportów CSP – Jeśli korzystasz z CSP-Report-Only, sprawdzaj zgłoszenia o naruszeniach polityki.
- Ważne – Po każdej zmianie polityki CSP zawsze testuj stronę na różnych przeglądarkach i urządzeniach.
Najczęstsze pułapki i dobre praktyki
- Nie dodawaj znaku „*” (wildcarda) do security policy bez potrzeby – to bardzo słabe rozwiązanie. Staraj się precyzyjnie określać źródła.
- CSP nie zadziała na inline scripts/styles – jeśli musisz używać event handlerów bezpośrednio w HTML, dodaj wpis
'unsafe-inline'do dyrektywyscript-srclubstyle-src. - Czasem konieczne jest użycie
'unsafe-eval'– np. jeśli korzystasz z dynamicznie generowanych skryptów przez JS. - Używaj
'strict-dynamic'– jeśli Twój projekt tego wymaga i korzystasz z zaufanych skryptów z hashem. - Dodaj dyrektywy frame-src, connect-src, font-src, media-src – jeśli na stronie są iframe, czaty, API, czcionki, audio/video.
- Regularnie monitoruj raporty CSP – utwórz endpoint na serwerze, który będzie zbierał informacje o naruszeniach polityki.
Podsumowanie tabelaryczne: ERRBLOCKEDBYCLIENT vs ERRBLOCKEDBYCSP
| Typ błędu | Przyczyna | Kto naprawia? | Jak naprawić? |
|---|---|---|---|
| ERRBLOCKEDBY_CLIENT | Blokada przez plugin/wtyczkę | Użytkownik/programista | Wyłączenie wtyczki, reset przeglądarki |
| ERRBLOCKEDBY_CSP | Polityka bezpieczeństwa CSP | Webmaster/developer | Dopisanie adresu do polityki CSP |
Gdzie szukać dalszej pomocy?
- Google CSP Evaluator – narzędzie do analizy i oceny polityki CSP.
- DevTools przeglądarki – źródło wiadomości o konkretnych błędach.
- Dokumentacje przeglądarek i standardów – np. MDN Web Docs czy dokumentacja CSP.
- Fora developerów – jeśli napotkasz dziwny błąd, zapytaj społeczność webdev na Stack Overflow.
ERRBLOCKEDBY_CSP to nie uszkodzenie przeglądarki ani strony, a mechanizm ochrony bezpieczeństwa. Zrozumienie działania CSP i regularne testowanie polityki pozwala uniknąć problemów z ładowaniem zasobów i zapewnić użytkownikom wysokie bezpieczeństwo oraz komfort korzystania ze strony.
Ostatnia aktualizacja polityki CSP powinna być częścią każdej ważniejszej aktualizacji strony lub wdrożenia nowych funkcji.
