セキュリティとCSPポリシー

1）なぜセキュリティポリシーが必要なのか

最新のフロントエンドとAPIは、多くのソース（CDN、アナリティクス、PSP、 3DS、チャット）に依存しています。厳しいポリシーがなければ、XSS、クリックジャッキング、データ漏洩、セッションハイジャックのリスクは増加します。セキュリティポリシーは、ブラウザをallow-listモデルに移動することで、デフォルトで許可されているものを制限します。

2）基本的な柱

CSP （Content Security Policy）は、許可されたJS/CSS/メディアソースと動作の「メニュー」を一元化したものです。
信頼されたタイプ-DOM-XSSに対するタイプレベルの保護。
SRI （Subresource Integrity）-スクリプト/スタイルの整合性を制御します。
COOP/COEP/CORP-ソース間のコンテキストとリソースの厳密な分離。
Fetch Metadata （'Sec-Fetch-'）は、クロスサイトリクエストをフィルタリングするためのサーバーソリューションです。
CORS-クロスドメインAPIアクセスポリシー。
古典的なタイトル：HSTS、 'X-Frame-Options'/' frame-ancestors'、' Referrer-Policy'、'Permissions-Policy'、SameSite-Cookie。

3） CSP： 基礎と原則

3.1ディレクティブ（キー）

'default-src'-他のディレクティブのデフォルト。
'script-src'-JSソース、nonce/hash、 'strict-dynamic'、 'report-sample'。
'style-src'-CSSソース；'unsafe-inline'を最小化します。
'img-src'、 'font-src'、 'media-src'、 'object-src' （'none'）。
'connect-src'-ネットワークリクエスト（XHR/fetch/WebSocket）。
'frame-src'/'child-src'-サードパーティフレーム（PSP、 3DS）。
「フレーム祖先」-誰が私たちのサイトを埋め込むことができます（アンチクリックジャッキング）。
'base-uri'-'<base>'の置換を禁止します。
'form-action'-フォームの送信が許可されています。
'upgrade-insecure-requests'、 'block-all-mixed-content'-HTTP/HTTPSミックスと戦う。
'report-uri'/'report-to'-違反を送信する場所。

3.2 Nonce 'hash

Nonceアプローチ： HTTPレスポンスごとに暗号ランダムな'nonce'を生成し、'