Slide 1
Slide 1 text
©2022 TC3株式会社 Confidential
©2022 TC3株式会社
1
IDaaS勉強会
Content Security Policy (CSP)
10.25,2022
Yuki Sanada, Technical Lead
Slide 2
Slide 2 text
©2022 TC3株式会社 Confidential 2
Content Security Policy (CSP) は、ウェブブラウザ標準の脆弱性動的解析診断ツール
サードパーティーのツールを導入してアプリケーションを守っているのに、
ウェブブラウザ標準のCSPを有効にしていないなんてもったいない！
default-src *;
ただ設定をONにするのではなく、防ぎたい攻撃を意識して設定をしないと意味がない。
なんかCSPのエラーがコンソールに出ているからといって、以下のようにガバガバな設定をしてしまわないようにしよう。
Slide 3
Slide 3 text
©2022 TC3株式会社 Confidential 3
CSPは以下のような脆弱性からアプリケーションを守ってくれる
1. 悪意あるユーザーによるアプリの脆弱性を利用したスクリプト実行
2. 自アプリにマッシュアップしていたサードパーティーアプリが乗っ取られたことによるアプリ内データの外部送信
3. 悪意あるブラウザ拡張機能によるアプリ内データの外部送信
注: 完全に防げるわけではありません。
CSPを正しく設定し、予期せぬデータ漏えいによる損害を未然に防ぎましょう。
Slide 4
Slide 4 text
©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実装状況
Slide 5
Slide 5 text
©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
Slide 6
Slide 6 text
©2022 TC3株式会社 Confidential 6
さらにCSP違反があった際にエラーにはせず、レポートを送信することも可能
Ex. HTTPレスポンスヘッダーでレポート送信を設定する
参考: https://www.w3.org/TR/CSP3/#cspro-header
Slide 7
Slide 7 text
©2022 TC3株式会社 Confidential 7
例1. iframeを制限する
child-srcディレクティブで "example.com" だけを許可しているため、 iframe で "example.org" を指定するとエラーになる
Slide 8
Slide 8 text
©2022 TC3株式会社 Confidential 8
例2. imgタグを制限する
imgディレクティブで "example.com" だけを許可しているため、 imgタグに "example.org" を指定するとエラーになる
Slide 9
Slide 9 text
©2022 TC3株式会社 Confidential 9
例3. 全Fetch系ディレクティブにまとめて制約をかける
default-srcディレクトリを指定する
Slide 10
Slide 10 text
©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
Slide 11
Slide 11 text
©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
Slide 12
Slide 12 text
©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] .