콘텐츠 보안 정책 : 페이지 설정이 리소스로드를 차단했습니다.

페이지로드 시 CAPTCHA 를 사용 하고 있지만 보안상의 이유로 차단됩니다.

이 문제에 직면하고 있습니다.

    콘텐츠 보안 정책 : 페이지 설정으로 인해로드가 차단되었습니다.
    자원의
    http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit
    ( "script-src http://test.com:8080 'unsafe-inline' 'unsafe-eval'").

다음 JavaScript 및 메타 태그를 사용했습니다.

<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>

자신의 사이트 (자신)에서만 스크립트를로드 할 수 있다고 말씀하셨습니다. 그런 다음 다른 사이트 ( www.google.com ) 에서 스크립트를로드하려고했지만 이를 제한했기 때문에 로드 할 수 없습니다. 이것이 콘텐츠 보안 정책 (CSP)의 요점입니다 .

첫 번째 줄을 다음과 같이 변경할 수 있습니다.

<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">

또는 CSP에 대해 자세히 알아볼 때까지 해당 줄을 완전히 제거하는 것이 좋습니다. 현재 CSP는 어쨌든 상당히 느슨하므로 unsafe-inline( unsafe-eval및 a default-srcof 허용 *) 솔직히 말하면 너무 많은 가치를 추가하지 않을 것입니다.

내 ASP.NET Core Angular 프로젝트가 Visual Studio 2019에서 실행 중일 때 가끔 Firefox 콘솔에 다음 오류 메시지가 표시됩니다.

콘텐츠 보안 정책 : 페이지의 설정이 인라인 ( "default-src")에서 리소스로드를 차단했습니다.

Chrome에서 오류 메시지는 다음과 같습니다.

리소스로드 실패 : 서버가 404 () 상태로 응답했습니다.

제 경우에는 콘텐츠 보안 정책과 아무 관련이 없었지만 대신 단순히 TypeScript 오류의 결과였습니다.

IDE 출력 창에서 다음과 같은 TypeScript 오류를 확인하십시오.

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

_{참고 :이 질문은이 오류 메시지에 대한 Google의 첫 번째 결과이기 때문입니다.}

비슷한 오류 유형이 있습니다. 먼저 코드에 메타 태그를 추가하려고했지만 작동하지 않았습니다.

nginx 웹 서버에서 외부 코드 실행을 차단할 수있는 보안 설정이있을 수 있음을 발견했습니다.

# 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'";

Content-Security-Policy를 확인하십시오. 소스 참조를 추가해야 할 수도 있습니다.

이 헤더로 모든 필수 사이트를 허용했습니다.

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

내가 사용하고 있던 Angular 버전 (v8-> v9)과 TypeScript 버전 (3.5.3-> 최신 버전)을 모두 업그레이드하여이 문제를 해결했습니다.

브라우저에서 비활성화 할 수 있습니다.

Firefox

입력 about:config파이어 폭스의 주소 표시 줄에 찾아 security.csp.enable와로 설정false .

크롬

Disable Content-Security-PolicyCSP를 비활성화하기 위해 호출 된 확장을 설치할 수 있습니다 .