コンテンツセキュリティポリシー：ページの設定により、リソースの読み込みがブロックされました

ページの読み込み時に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とdefault-srcの*）ので、おそらく、正直に言うと、あまりにも多くの価値を付加されていません。

私とASP.NETコア角度のプロジェクトは、Visual Studio 2019で実行して、時々私は、Firefoxのコンソールで、このエラーメッセージが表示されます。

コンテンツセキュリティポリシー：ページの設定により、インラインでのリソースの読み込みがブロックされました（「default-src」）。

Chromeでは、代わりにエラーメッセージは次のとおりです。

リソースの読み込みに失敗しました：サーバーはステータス404（）で応答しました

私の場合、それは私のコンテンツセキュリティポリシーとは何の関係もありませんでしたが、代わりに私の側のTypeScriptエラーの結果でした。

次のようなTypeScriptエラーがないかIDE出力ウィンドウを確認してください。

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

_{注：この質問は、このエラーメッセージに対するGoogleでの最初の結果であるためです。}

同様のエラータイプがありました。まず、コードにメタタグを追加しようとしましたが、機能しませんでした。

nginx Webサーバーで、外部コードの実行をブロックする可能性のあるセキュリティ設定がある可能性があることがわかりました。

# 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:configFirefoxのアドレスバーに入力し、検索security.csp.enableしてに設定しfalseます。

クロム

Disable Content-Security-PolicyCSPを無効にするために呼び出される拡張機能をインストールできます。