【図解で解説】CSP（Content Security Policy）について
CSPとは
ウェブブラウザに実装されているセキュリティ標準で、
クロスサイトスクリプティングやそのほかのコードインジェクション攻撃を防ぐためのものです。
CSPの仕組み
HTTPのContent-Security-Policyレスポンスヘッダーを設定することで、クロスサイトスクリプティングなどの攻撃を防ぐことができます。
引用：ゼロから学ぶCSP（Content Security Policy）入門
index.htmlに記載されている全ての外部リソースのうち、CSPに違反していないリソースのみ読み込みと実行が行われます。
レスポンスヘッダのContent-Security-Policyについて解説します。
img-srcに'self'を指定している場合、同一オリジンからの画像リソースのみ許可されます。
https://example.com で 画像リソース（https://bbb.com/BBB.jpg) を読み込みしようとしていますが、同一オリジンではないため読み込みは拒否されます。
script-src nonce-xxxxと指定しているため、nonce値が一致するccc.jsはスクリプト実行されますが、ddd.jsはnonce値がないのでCSP違反で実行されません。
CSPの設定
CSPでは主に下記のディレクティブを使うことが多いです。
ディレクティブとは、日本語に訳すと「命令」で、Webブラウザに対してどのようにコンテンツを制限・許可するかを指示するルールのことです。
default-src: リソースを取得する際のデフォルトポリシーを定義
script-src: JavaScriptの有効なソースを定義
style-src: スタイルシートの有効なソースを定義
img-src: 画像の有効なソースを定義
frame-ancestors: リソースを埋め込むことができるURLを制限
CSP設定時の注意点
CSPを適用すると、指定されたポリシーに違反するリソースが読み込まれなくなるので、事前に影響範囲を調査する必要があります。
例えば、Google Analyticsなどの外部サービスが使用できなくなる場合もあります。
そのためにもまずはテスト環境でCSPを設定し、どのリソースがブロックされるかを確認した方が良いです。
また、古いブラウザではCSPが完全にサポートされていないことがあります。
主要ブラウザでテストを実施し、互換性を確認します。
参考になった記事・動画
ゼロから学ぶCSP（Content Security Policy）入門
サイト脆弱性をチェックしよう！ -- 第20回：CSP（Content Security Policy）
Discussion