©2022 TC3株式会社 Confidential ©2022 TC3株式会社 1
 IDaaS勉強会 Content Security Policy (CSP) 10.25,2022 Yuki Sanada, Technical Lead 

©2022 TC3株式会社 Confidential 2
 Content Security Policy (CSP) は、ウェブブラウザ標準の脆弱性動的解析診断ツール サードパーティーのツールを導入してアプリケーションを守っているのに、 ウェブブラウザ標準のCSPを有効にしていないなんてもったいない！ default-src *; ただ設定をONにするのではなく、防ぎたい攻撃を意識して設定をしないと意味がない。 なんかCSPのエラーがコンソールに出ているからといって、以下のようにガバガバな設定をしてしまわないようにしよう。 

©2022 TC3株式会社 Confidential 3
 CSPは以下のような脆弱性からアプリケーションを守ってくれる 1. 悪意あるユーザーによるアプリの脆弱性を利用したスクリプト実行 2. 自アプリにマッシュアップしていたサードパーティーアプリが乗っ取られたことによるアプリ内データの外部送信 3. 悪意あるブラウザ拡張機能によるアプリ内データの外部送信 注: 完全に防げるわけではありません。 CSPを正しく設定し、予期せぬデータ漏えいによる損害を未然に防ぎましょう。 

©2022 TC3株式会社 Confidential 4
 注: CSPは現在version 2まで公開されており、 version 3がドラフト公開されています。詳細な対応状況は参考リンクをご確認ください。 - W3C CSP version 3 working draft(10/14): https://www.w3.org/TR/CSP3/ - 主要ブラウザ実装状況 : https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#browser_compatibility 主要ブラウザのCSP実装状況 

©2022 TC3株式会社 Confidential 5
 設定方法は2種類 1. HTTPレスポンスヘッダーで設定する 参考: https://www.w3.org/TR/CSP3/#csp-header 2. HTML Metaタグで設定する 参考: https://www.w3.org/TR/CSP3/#meta-element 

©2022 TC3株式会社 Confidential 6
 さらにCSP違反があった際にエラーにはせず、レポートを送信することも可能 Ex. HTTPレスポンスヘッダーでレポート送信を設定する 参考: https://www.w3.org/TR/CSP3/#cspro-header 

©2022 TC3株式会社 Confidential 7
 例1. iframeを制限する child-srcディレクティブで "example.com" だけを許可しているため、 iframe で "example.org" を指定するとエラーになる 

©2022 TC3株式会社 Confidential 8
 例2. imgタグを制限する imgディレクティブで "example.com" だけを許可しているため、 imgタグに "example.org" を指定するとエラーになる 

©2022 TC3株式会社 Confidential 9
 例3. 全Fetch系ディレクティブにまとめて制約をかける default-srcディレクトリを指定する 

©2022 TC3株式会社 Confidential 10
 設定例1. 新規開発時 default-src 'self'; 1. まずは自ホストからの Fetchのみ許可する default-src 'self'; style-src 'unsafe-inline' https:; img-src 'self' data: blob: https:; font-src https:; 2. 必要に応じて順次制限を緩めていく 3. 運用時には report-to(report-uri) も設定しておく default-src 'self'; style-src 'unsafe-inline' https:; img-src 'self' data: blob: https:; font-src https:; report-to csp-reporting-endpoint 

©2022 TC3株式会社 Confidential 11
 設定例2. 既存アプリケーションに後から追加するとき Content-Security-Policy-Report-Only: default-src 'self'; report-to csp-reporting-endpoint 1. エラーにはせず、レポートのみ送信する Datadogにレポートを送信する例 : https://www.datadoghq.com/blog/content-security-policy-reporting-with-datadog/ 2. エラーレポートが十分集まったら、その結果から適切な設定を適用する Content-Security-Policy: default-src 'self'; style-src 'unsafe-inline' https:; img-src 'self' data: blob: https:; font-src https:; report-to csp-reporting-endpoint 

©2022 TC3株式会社 Confidential 12
 Thank you for your attention. G I G I N N O V A T E D . If you are interested, please contact to [email protected] .