Polityka bezpieczeństwa treści: ustawienia strony zablokowały ładowanie zasobu

Używam CAPTCHA podczas ładowania strony, ale blokuje się z jakichś powodów bezpieczeństwa.

Stoję przed tym problemem:

    Polityka bezpieczeństwa treści: ustawienia strony zablokowały ładowanie
    zasobu w
    http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit
    („script-src http://test.com:8080 'unsafe-inline' 'unsafe-eval'”).

Użyłem następującego kodu JavaScript i metatagu:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<script src="http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>

Powiedziałeś, że możesz ładować skrypty tylko z własnej witryny (siebie). Następnie próbowałeś załadować skrypt z innej witryny ( www.google.com ), ale ponieważ to ograniczyłeś, nie możesz. O to właśnie chodzi w polityce bezpieczeństwa treści (CSP).

Możesz zmienić swoją pierwszą linię na:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com">

Lub, alternatywnie, warto całkowicie usunąć tę linię, dopóki nie dowiesz się więcej o CSP. Twój obecny CSP i tak jest dość luźny (co pozwala unsafe-inline, unsafe-evala default-srcz *), więc prawdopodobnie nie dodając zbyt wiele wartości, aby być uczciwym.

Z moim ASP.NET Core Angular projektu działającego w programie Visual Studio 2019 czasami pojawia się ten komunikat o błędzie w konsoli Firefox:

Polityka bezpieczeństwa treści: ustawienia strony blokowały ładowanie zasobu w tekście („default-src”).

W Chrome zamiast tego komunikat o błędzie to:

Nie udało się załadować zasobu: serwer odpowiedział statusem 404 ()

W moim przypadku nie miało to nic wspólnego z moją polityką bezpieczeństwa treści, a zamiast tego było po prostu wynikiem błędu TypeScript z mojej strony.

Sprawdź okno wyjściowe IDE pod kątem błędu TypeScript, na przykład:

> ERROR in src/app/shared/models/person.model.ts(8,20): error TS2304: Cannot find name 'bool'.
>
> i ｢wdm｣: Failed to compile.

_{Uwaga: ponieważ to pytanie jest pierwszym wynikiem w Google dla tego komunikatu o błędzie.}

Miałem podobny typ błędu. Najpierw próbowałem dodać metatagi w kodzie, ale to nie zadziałało.

Dowiedziałem się, że na serwerze WWW nginx możesz mieć ustawienie bezpieczeństwa, które może blokować uruchamianie zewnętrznego kodu:

# Security directives
server_tokens off;
add_header X-Frame-Options SAMEORIGIN;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'  https://ajax.googleapis.com  https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://assets.zendesk.com; font-src 'self' https://fonts.gstatic.com  https://themes.googleusercontent.com; frame-src https://player.vimeo.com https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'";

Sprawdź Content-Security-Policy. Może być konieczne dodanie odwołania do źródła.

Udało mi się zezwolić na wszystkie moje wymagane witryny z tym nagłówkiem:

header("Content-Security-Policy: default-src *; style-src 'self' 'unsafe-inline'; font-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' stackexchange.com");                    

Poradziłem sobie z tym, aktualizując zarówno wersję Angulara, której używałem (z v8 -> v9), jak i wersję TypeScript (z 3.5.3 -> najnowszą).

Możesz je wyłączyć w swojej przeglądarce.

Firefox

Wpisz about:configpasek adresu przeglądarki Firefox, znajdź security.csp.enablei ustaw na false.

Chrom

Możesz zainstalować rozszerzenie o nazwie, Disable Content-Security-Policyaby wyłączyć CSP.