TC3 社内勉強会 Content Security Policy

昨今のウェブフロントエンドアプリケーションにおいて、外部サービスとのマッシュアップ(連携)は当たり前のように行われていますが、外部のサービスを完全に信用することはできません。

例えば、突然連携していた外部サービスが第三者によって改ざんされ、ユーザーの入力したクレジットカード情報等を外部に流出させてしまうといった可能性は大いにあります。

この資料では、そういった脆弱性からアプリケーションを守ってくれる Content Security Policy(CSP) について解説しています。

Transcript

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