Content Security Policy入門セキュリティ設定と違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting

Content Security Policy入門  セキュリティ設定と  違反レポートのはじめ方  uskey512 / Yusuke Uehara @JJUG
CCC 2024 Fall 2024-10-27

自己紹介    @uskey512 / Yusuke Uehara  STORES 株式会社決済グループ所属  バックエンド7年/フロントエンド1年弱 
開発したり、監査対応したり  2

発表のきっかけ・モチベーション  PCI DSSという監査基準の大幅アップデート(v3.2.1->v4.0.1)  フロントエンドセキュリティとより一層向き合う必要が出てきた  一部要件の対応でContent Security Policy(CSP)を導入  ⬇⬇⬇  CSPのキャッチアップ・導入・運用を通じてその良さが少しずつわかってきた  あまり普及していないが、普及するとセキュリティ的に良いのでは🤔 
    3

本発表の主なターゲット・ゴール  主なターゲット  • フロントエンドやセキュリティに興味のあるバックエンドエンジニア  • 運営しているサービスのセキュリティが気になっているエンジニア  本発表では皆さんが20分で以下の状態になるための情報を提供します  • CSPの基礎がわかる  •
CSPの導入方法と動作イメージがわかる  • CSPのレポート運用と既存サイトへの導入に向けた手順がわかる  4

目次  • CSPの基礎  ◦ CSPの基本概念  ◦ CSPの構造・ポリシーディレクティブ   • CSPの導入方法と構成 
◦ サイトの構成にあわせたCSPの導入方法   ◦ CSPの構成例と動作イメージ   • CSPのレポート運用と既存サイトへの導入に向けた手順  ◦ CSP Report-Only 構成例   ◦ CSP違反レポートの読み方と実際のCSP違反レポート   ◦ より良い運用と、既存サイトへの段階的な導入手順   5

目次  • CSPの基礎   ◦ CSPの基本概念   ◦ CSPの構造・ポリシーディレクティブ  
• CSPの導入方法と構成  ◦ サイトの構成にあわせたCSPの導入方法   ◦ CSPの構成例と動作イメージ   • CSPのレポート運用と既存サイトへの導入に向けた手順  ◦ CSP Report-Only 構成例   ◦ CSP違反レポートの読み方と実際のCSP違反レポート   ◦ より良い運用と、既存サイトへの段階的な導入手順   6

Content Security Policy (CSP) とは何か  MDN Web Docs での説明   
            コンテンツセキュリティポリシー (CSP) は、クロスサイトスクリプティング (Cross-site_scripting) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤーです。これらの攻撃はデータの窃取からサイトの改ざん、マルウェアの拡散に至るまで、様々な目的に用いられます。 https://developer.mozilla.org/ja/docs/Web/HTTP/CSP 7

Content Security Policy (CSP) とは何か  MDN Web Docs での説明   
          = Webブラウザに対して制限・許可したいことを伝える仕組み  コンテンツセキュリティポリシー (CSP) は、クロスサイトスクリプティング (Cross-site_scripting) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤーです。これらの攻撃はデータの窃取からサイトの改ざん、マルウェアの拡散に至るまで、様々な目的に用いられます。 https://developer.mozilla.org/ja/docs/Web/HTTP/CSP 8

Content Security Policy (CSP) とは何か  Webブラウザに対して制限・許可したいことを伝える仕組み    具体的に何ができるか？  • リソースの種別毎に取得や読み込み先をホワイトリストで許可 
• Webブラウザの挙動を制限                  9

• Webブラウザの挙動を制限    ウェブサイトに対する一般的な攻撃の一例              10

• Webブラウザの挙動を制限    ウェブサイトに対する一般的な攻撃の一例  • Webページを何らかの方法で書き換えて…            11

• Webブラウザの挙動を制限    ウェブサイトに対する一般的な攻撃の一例  • Webページを何らかの方法で書き換えて…  ◦ あやしいサーバにformの内容を送信  ◦ あやしいプラグインを読み込ませて脆弱性を利用  ◦ あやしいスクリプトを実行      12

• Webブラウザの挙動を制限    ウェブサイトに対する一般的な攻撃の一例  • Webページを何らかの方法で書き換えて…  ◦ あやしいサーバにformの内容を送信  ◦ あやしいプラグインを読み込ませて脆弱性を利用  ◦ あやしいスクリプトを実行  ▪ データの窃取 (例 : カード情報・認証情報など)    13

• Webブラウザの挙動を制限    ウェブサイトに対する一般的な攻撃の一例  • Webページを何らかの方法で書き換えて…  ◦ あやしいサーバにformの内容を送信  ◦ あやしいプラグインを読み込ませて脆弱性を利用  ◦ あやしいスクリプトを実行  ▪ データの窃取 (例 : カード情報・認証情報など)  ➡　これらのリスクを防げる (リスクを軽減する)  14

Content Security Policy (CSP) とは何か  Webブラウザに対して制限・許可したいことを伝える仕組み    どのようにCSPを適用するか？  サーバ側からコンテンツを返す際のHTTP レスポンスヘッダに設定 
(またはhtmlファイル内の<meta>タグ内に記載)                  15 https://a.example.com   Web ブラウザ

(またはhtmlファイル内の<meta>タグ内に記載)                    16 https://a.example.com   Web ブラウザ HTTP Request

HTTP Response Content Security Policy (CSP) とは何か  Webブラウザに対して制限・許可したいことを伝える仕組み    どのようにCSPを適用するか？ 
サーバ側からコンテンツを返す際のHTTP レスポンスヘッダに設定  (またはhtmlファイル内の<meta>タグ内に記載)                  17 https://a.example.com   Web ブラウザ index  .html  HTTP Request

(またはhtmlファイル内の<meta>タグ内に記載)                  18 https://a.example.com   Web ブラウザ index  .html  Content-Security-Policy: script-src a.example.com; HTTP Request HTTP Response HTTP Response Header

CSPの基本構成  ポリシーの設定例  scriptはa.example.comからのみ取得可、imageは無制限に取得可 (未設定)          Content-Security-Policy: script-src
a.example.com; 19

CSPの基本構成  Web ブラウザポリシーの設定例  scriptはa.example.comからのみ取得可、imageは無制限に取得可 (未設定)         
      Content-Security-Policy: script-src a.example.com; index  .html  https://a.example.com   https://a.example.com   https:// b.example.com   .js  .png  .js  .png  20

CSPの基本構成  Web ブラウザポリシーの設定例  scriptはa.example.comからのみ取得可、imageは無制限に取得可 (未設定)         
      Content-Security-Policy: script-src a.example.com; index  .html  https://a.example.com   https://a.example.com   https:// b.example.com   .js  .png  .js  .png  21

CSPの基本構成  Web ブラウザポリシーの設定例  scriptはa.example.comからのみ取得可、imageは無制限に取得可 (未設定)      ポリシーディレクティブ(または単にディレクティブ)  と呼ばれる単位でルールを列挙して設定していく 
        Content-Security-Policy: script-src a.example.com; index  .html  https://a.example.com   https://a.example.com   https:// b.example.com   .js  .png  .js  .png  22

  各ディレクティブは対象をホワイトリストで指定し  指定されていないリソースには影響しない      Content-Security-Policy: script-src a.example.com; index  .html  https://a.example.com   https://a.example.com   https:// b.example.com   .js  .png  .js  .png  23

  各ディレクティブは対象をホワイトリストで指定し  指定されていないリソースには影響しない    CSPの影響範囲はレスポンス単位  この例ではindex.htmlのみ  Content-Security-Policy: script-src a.example.com; index  .html  https://a.example.com   https://a.example.com   https:// b.example.com   .js  .png  .js  .png  24

ディレクティブの種別  MDN Web Docs で記載されているディレクティブは30種類弱  4分類に分けられる    • Fetch Directive 
◦ リソース種別の読み込みを制御する   • Document Directive  ◦ ドキュメントの状態に対する操作を制御する  • Navigation Directive  ◦ フォームの送信やナビゲーションを制御する  • Reporting Directive  ◦ CSP違反が起きた際の挙動を制御する  25

ディレクティブの一覧 (一部省略)        26 Policy Directive Fetch Directive
Report Directive Navigation Directive Document Directive report-uri report-to form-action frame-ancestors base-uri sandbox default-src connect-src child-src img-src frame-src font-src worker-src media-src script-src object-src script-src-elem manifest-src script-src-attr prefetch-src style-src style-src-elem style-src-attr

ディレクティブのフォールバック  ディレクティブには親子関係があり、特定のディレクティブが指定されない場合  フォールバック先のディレクティブの値が参照されるものがある    例：以下の2つのポリシーは等価  27 Content-Security-Policy: default-src 'self'; script-src
other.example.com; Content-Security-Policy: connect-src 'self'; child-src 'self'; style-src 'self'; media-src 'self'; font-src 'self'; object-src 'self'; connect-src 'self'; prefetch-src 'self'; manifest-src 'self'; script-src other.example.com;

ディレクティブのフォールバック  28 default-src connect-src font-src img-src prefetch-src object-src media-src manifest-src
child-src script-src script-src-attr script-src-elem worker-src style-src style-src-attr style-src-elem frame-src 凡例直接設定されたディレクティブ影響を受けるディレクティブ

目次  • CSPの基礎  ◦ CSPの基本概念  ◦ CSPの構造・ポリシーディレクティブ   • CSPの導入方法と構成
  ◦ サイトの構成にあわせたCSPの導入方法   ◦ CSPの構成例と動作イメージ   • CSPのレポート運用と既存サイトへの導入に向けた手順  ◦ CSP Report-Only 構成例   ◦ CSP違反レポートの読み方と実際のCSP違反レポート   ◦ より良い運用と、既存サイトへの段階的な導入手順   32

CSPの導入方法  CSPについて、その構成や動作・種類などが理解できた    各サイトへの導入にあたっては  CSPポリシーをHTTPレスポンスヘッダに設定する仕組み上  導入するサイトの構成で設定方法が異なる    2つの構成について導入方法を紹介  • 1.
バックエンド/フロントエンドが分離していないMPA  • 2. フロントエンドが分離していてCDNを経由して配布されているSPA  33

CSPの導入方法 - MPA (Spring Security) - 1  バックエンドとフロントエンドの実装が分かれていない  バックエンドアプリケーションがhtmlを直接配布するようなMPA  アプリケーション内でHTTPレスポンスヘッダを設定する 
            Spring Boot x Thymeleaf の1台構成のような構成  Spring Securityの機能でCSPを設定することができる  34 Web ブラウザサーバーリクエストレスポンス

CSPの導入方法 - MPA (Spring Security) - 2  Spring Securityでの設定例   
  35 @Configuration @EnableWebSecurity public class WebSecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http // ... .headers(headers -> headers .contentSecurityPolicy(csp -> csp .policyDirectives("script-src 'self'; object-src 'src';") ) ); return http.build(); } }

CSPの導入方法 - MPA (Spring Security) - 3  Spring Securityでの設定例   
  36 @Configuration @EnableWebSecurity public class WebSecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http // ... .headers(headers -> headers .contentSecurityPolicy(csp -> csp .policyDirectives("script-src 'self'; object-src 'src';") ) ); return http.build(); } } 文字列でヘッダ名を除いたポリシー全体を渡すだけ

CSPの導入方法 - SPA (CDN CloudFront) - 1  バックエンドとフロントエンドが分離していてAPIで通信をしている場合  フロントエンドのhtmlファイルを配布する側で設定を行う   
            例えばCDNでindex.htmlや各種jsファイルを配布している場合  CDN側のHTTPレスポンスヘッダの設定にCSPを設定する  37 Web ブラウザ API サーバー CDN 静的リソースの取得は CDN (index.html, *.js, *.css) 静的リソース以外の取得、 API通信 (Fetch, XMLHttpRequest 等) は CDN経由または直接APIサーバーに

CSPの導入方法 - SPA (CDN CloudFront) - 2  AWS CloudFrontの場合  CloudFront
> ポリシー > レスポンスヘッダ > レスポンスヘッダポリシー  38

CSPの動作確認  様々な外部リソースを読み込むページを作成して  その通信をCSPでブロックする/しないの2パターンを評価    読み込む外部リソースは  画像・動画・音声・フォント・スタイル・外部スクリプト  GitHub APIの利用など    CSPが動作するときにどのような挙動を取るか確認する 
39

CSPの動作確認 - 1  様々な外部リソースを読み込むページ             
        https://uskey512.github.io/csp-sample/csp-disable.html     画像・動画・音声・フォント・スタイル  外部スクリプト、GitHub APIの利用など  40

CSPの動作確認 - 2  様々な外部リソースを読み込めないページ         
            https://uskey512.github.io/csp-sample/csp-enable.html           41 Content-Security-Policy: default-src 'self';

CSPによって通信が制限されている  CSPの動作確認 - 3  42 Web ブラウザ index  .html  .css 
.jpg  .js  .ttf  .wav  GitHub  API 

CSPを安全に導入したい  最終的にCSPを導入したいが…                 
      43

CSPを安全に導入したい  最終的にCSPを導入したいが…    • 本番環境への導入にハードルがある  ◦ 通信が意図せず制御されてしまうと何かが壊れる = 障害  
                44

  • ポリシー作成が難しい  ◦ サイトが大規模すぎる  ◦ 読み込まれるリソースとして何があるのか把握できていない           45

  • ポリシー作成が難しい  ◦ サイトが大規模すぎる  ◦ 読み込まれるリソースとして何があるのか把握できていない     CSPをレポート通知のみで適用する方法がある  CSPの評価結果をレポート通知だけを行って通信の制御をしない →Content-Security-Policy-Report-Only というヘッダがある  46

目次  • CSPの基礎  ◦ CSPの基本概念  ◦ CSPの構造・ポリシーディレクティブ   • CSPの導入方法と構成 
◦ サイトの構成にあわせたCSPの導入方法   ◦ CSPの構成例と動作イメージ   • CSPのレポート運用と既存サイトへの導入に向けた手順   ◦ CSP Report-Only 構成例   ◦ CSP違反レポートの読み方と実際のCSP違反レポート   ◦ より良い運用と、既存サイトへの段階的な導入手順   47

Report-Onlyでの運用 - 1  Report-Only ヘッダでレポート通知だけを行う    既存サイトの機能・表示を壊さず  作成したポリシーの妥当性を確認しながら確認・調整が行える  CSPに違反した内容はコンソール・指定したエンドポイントに通知される   
これまでの設定内容に加えてレポート運用に必要になるのは  • レポート先ヘッダの設定 (Report-To/Reporting-Endpoints)  • CSP違反レポートを受け取るサーバ  48

Report-Onlyでの運用 - 2 - ヘッダへの追記   違反レポートの送信先をReport-Toヘッダで設定して  CSPヘッダのreport-toディレクティブで指定  49 Report-To:
{ "group": "csp-endpoint", "max_age": 10886400, "endpoints": [ { "url" : "https://a.example.com/csp-reports" } ] } Content-Security-Policy-Report-Only: default-src a.example.com; report-to csp-endpoint; report-uri /csp-reports; ① CSP違反レポート用のグループを定義 ③ 定義したグループを report-to ディレクティブで指定古いブラウザとの互換性のために report-uriも指定 ② ヘッダをReport-Onlyに変更

Report-Onlyでの運用 - 3 - CSP違反レポートの内容  CSP違反レポートの送信  CSP違反が発生するとWebブラウザはCSP違反レポートを送信するようになる  (違反レポートはjson形式でPOSTメソッドで送信される)    違反レポートには下記のような項目が含まれる 
• document-uri  ◦ 違反が発生したドキュメントのURI  • blocked-uri  ◦ 読み込みがブロックされるリソースのURI  • violated-directive  ◦ 違反したディレクティブの名前  50

Report-Onlyでの運用 - 4 - CSP違反レポートサーバー  発生したCSP違反レポートを受け取るためのエンドポイントが必要    監視系のSaaSはCSP違反レポートを受け取るエンドポイントを提供している  • Sentry 
• Datadog    POSTでjson形式のデータを受け取るだけなので  CSP違反レポートを受け取るエンドポイントを自作しても基本的に問題はない    大量にCSP違反レポートが来ることが想定される場合  集計や分析を行える仕組みがあった方がその後の運用を進めやすい  51

CSP Report-Onlyの動作確認サイトを作る  コンテンツ配信を行いCSP違反レポートも受け取るサイトを作る    52 Web ブラウザサーバーリクエストレスポンス
CSP違反レポート https://github.com/uskey512/csp-sample

CSP Report-Onlyの動作確認サイトを作る  コンテンツ配信を行いCSP違反レポートも受け取るサイトを作る  • http://localhost:8080/index   ◦ htmlファイルをThymeleafで配布    53
Web ブラウザサーバーリクエストレスポンス CSP違反レポート https://github.com/uskey512/csp-sample

CSP Report-Onlyの動作確認サイトを作る  コンテンツ配信を行いCSP違反レポートも受け取るサイトを作る  • http://localhost:8080/index   ◦ htmlファイルをThymeleafで配布  • http://localhost:8080/api/csp_reports
  ◦ POST で CSP違反レポートを受け取る  ◦ 受け取ったレポートはログに吐き出す  54 Web ブラウザサーバーリクエストレスポンス CSP違反レポート https://github.com/uskey512/csp-sample

CSP違反レポートをうけとる - 1 - WebSecurityConfig  55 @Configuration @EnableWebSecurity public class
WebSecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { var cspDirectives = List.of( "default-src 'self'", "report-uri /api/csp_reports" ); http .csrf(AbstractHttpConfigurer::disable) .headers(headers -> headers .contentSecurityPolicy(csp -> csp .policyDirectives(String.join("; ", cspDirectives)) .reportOnly() ) ); return http.build(); } } 'self' 以外をすべて制限 report-uriでCSP違反レポートを送信するエンドポイントを設定 reportOnly()でReport-Onlyに変更

CSP違反レポートをうけとる - 2 - WebConfig    56 @Configuration public class
WebConfig implements WebMvcConfigurer { @Override public void configureContentNegotiation(ContentNegotiationConfigurer configurer) { configurer .mediaType("csp-report", MediaType.valueOf("application/csp-report")); } @Override public void configureMessageConverters(List<HttpMessageConverter<?>> converters) { // Jacksonを使用するJSON用のHttpMessageConverterにカスタムメディアタイプを追加 MappingJackson2HttpMessageConverter jsonConverter = new MappingJackson2HttpMessageConverter(); jsonConverter.setSupportedMediaTypes(List.of( MediaType.APPLICATION_JSON, // 既存のJSON MediaType.valueOf("application/csp-report") // カスタムメディアタイプ )); converters.add(jsonConverter); } } MediaType : "application/csp-report" を処理出来るように設定を追加設定しないと415 Unsupported Media Type 発生

CSP違反レポートをうけとる - 3 - RestController    57 @RestController @RequestMapping("/api") public
class CspReportController { // ... @PostMapping(value = "/csp_reports", consumes = { "application/csp-report" }) public ResponseEntity<String> postCspReport( @RequestBody Object jsonData ) { try { String prettyJson = prettyWriter.writeValueAsString(jsonData); logger.info("Received JSON:\n{}", prettyJson); } catch (Exception e) { logger.error("Error processing JSON", e); return ResponseEntity.badRequest().body("Invalid JSON format"); } // Return a success response return ResponseEntity.ok("JSON received and logged"); } } "application/csp-report"を処理することを明示

CSP Report-Onlyの動作確認 - 1  58

CSP Report-Onlyの動作確認 - 2  59

CSP違反レポートを読む  60 { "csp-report" : { "document-uri" : "http://localhost:8080/index", "referrer"
: "", "violated-directive" : "img-src", "effective-directive" : "img-src", "original-policy" : "default-src 'self'; report-uri /api/csp_reports", "disposition" : "report", "blocked-uri" : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/June_odd-eyed-cat_cropped. jpg/512px-June_odd-eyed-cat_cropped.jpg?20120228074717", "line-number" : 20, "source-file" : "http://localhost:8080/index", "status-code" : 200, "script-sample" : "" } } 違反したディレクティブ違反が発生した行数・ファイル名

実際のCSP違反レポートを見てみる  実際に導入した際に届いた意外だったCSP違反レポートをいくつか紹介  (問題のありそうなフィールドは隠します)      61

実際のCSP違反レポート - 1 - Google翻訳  62 { "csp-report": { "original-policy":
" ", "source-file": " ", "document-uri": " ", "line-number": 386, "referrer": "", "status-code": 0, "violated-directive": "style-src-elem", "column-number": 32, "effective-directive": "style-src-elem", "blocked-uri": "https://www.gstatic.com/_/translate_http/_/ss/k=translate_http.tr.26tY-h6gH9w.L.W.O/ am=DAY/d=0/rs=AN8SPfrCcgxoBri2FVMQptvuOBiOsolgBw/m=el_main_css" } } <style>と<link rel="stylesheet">を制限・許可するディレクティブ www.gstatic.com...translateと読める Google翻訳に関連するcss

実際のCSP違反レポート - 2 - 拡張機能  63 { "referrer": "", "disposition":
"report", "originalPolicy": " ", "columnNumber": 433, "documentURL": " ", "effectiveDirective": "script-src", "lineNumber": 39, "sample": "", "sourceFile": "https://pwm-image.trendmicro.jp/5.8/extensionFrame/scout.bundle.js", "blockedURL": "eval", "statusCode": 200 } Trend Microのパスワードマネージャに関する拡張機能のscriptファイル

CSPを導入・メンテナンスしていてわかったこと  64

CSPを導入・メンテナンスしていてわかったこと  • 導入初期は大量にCSP違反レポートが出る  ◦ default-src:'self'などを設定すると更に大量に出る  ◦ 少しずつディレクティブを追加した方が効果を把握しやすい    65

CSPを導入・メンテナンスしていてわかったこと  • 導入初期は大量にCSP違反レポートが出る  ◦ default-src:'self'などを設定すると更に大量に出る  ◦ 少しずつディレクティブを追加した方が効果を把握しやすい    • サイト由来でなく、攻撃でもないCSP違反レポートもかなり出る 
◦ Google翻訳 (font-src, connect-src, img-src, etc.)  ◦ 各ブラウザの拡張機能 (script-src)  ◦ アプリ内ブラウザに埋め込まれているスクリプト (script-src)  66

既存サイトへのCSPを導入するには？  CSPの既存サイトへの段階的な導入手順      67

既存サイトへのCSPを導入するには？  CSPの既存サイトへの段階的な導入手順  1. ポリシーを小さく作って、Report-Onlyで導入する  2. 上がってくるCSP違反レポートを読んで対応をする  a. 問題の無い通信なら注意してポリシーを修正する  b. 問題がありそうな通信ならサイト側の修正を考える 
3. CSP違反レポートが来ないようになったらReport-Onlyを外す    ➡　Report-Onlyでもセキュリティを意識するきっかけになる    68

まとめ  本発表では皆さんが20分で以下の状態になるための情報を提供しました  • CSPの基礎がわかる  ◦ →CSPの基本概念の説明・ディレクティブ・フォールバックについて説明   • CSPの導入方法と動作イメージがわかる  ◦
→サイトの構成ごとに異なる導入手順を紹介   • CSPのレポート運用と既存サイトへの導入に向けた手順がわかる  ◦ →Report-Onlyで運用に必要なもの・レポートの例などを紹介   69

参考文献など  Webサイト  - MDN Web Docs: https://developer.mozilla.org/ja/docs/Web/HTTP/CSP  書籍など  - 『Webブラウザセキュリティ
Webアプリケーションの安全性を支える仕組みを整理する』米内貴志 (ラムダノート, 2021)  70

QA用スライド 

とりあえず入れとけという設定  1. object-src  プラグインを利用したコンテンツの利用を制限する  <embed>, <applet>, <object>タグなどで利用するリソースの制限  使っていないなら'none'を設定 (ほとんどのサイトがそう)  2.
base-uri  <base>タグの利用を制限  全ての相対URLを書き換えられてしまうので使ってないなら'none'を設定  3. frame-ancestors  自サイトを別のページからiframe内に表示させてよいかを制限する  iframeで表示されることを想定していないページなら'none'を設定  クリックジャッキング攻撃対策になる  72

CSP導入が難しいケースは？  1. インラインスクリプト・インラインスタイルを活用している場合  そのままだとscript-src, style-srcの適用ができない  2. 動的コード評価を使っているライブラリなどの利用  eval(), new Function()を利用しているとscript-srcを適用できない 
厳密には'unsafe-eval'を有効にすれば適用できるがリスクがある  3. 動的にCSPの内容を変更したい場合でフロントエンドがSPAという構成  マルチテナント型のサービスでクライアントごとにCSPの内容を変えたい時  フロントエンドがSPAの場合だとバックエンドから制御ができない  4. 広告ネットワークやGoogle Tag Managerなど外部からの動的ロードがある  あらかじめホワイトリストを作るのが難しく、回避方法も複雑  73

導入時に苦労したポイントは？  1. Google Tag Manager(GTM)  動的に色々なタグを導入されてしまうのでとても困る(場合による)  社内の利用チームと調整してGoogle Tag Manager自体を外した  広告ネットワーク・GTMがある場合、難易度が数段階上がりそう 
(特にscript-srcの適用)  2. ポリシーの整理  default-src:'self'を起点に始めて細分化していったので  個別ディレクティブを指定した際'self'の追加を忘れて全拒否になったりした  違反レポートでの運用なのでレポート量が増えた以外は問題なし  74

参考情報 

CSP構文チェッカ  CSP Evaluator  https://csp-evaluator.withgoogle.com/    作成したCSPが適切かどうかを評価してくれるサイト・拡張機能  構文レベルでのチェックに加えベストプラクティスに  沿っていない内容について指摘をしてくれる     
76

Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方...

Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting

Other Decks in Programming

Featured

Transcript

Content Security Policy入門セキュリティ設定と違反レポートのはじめ方...

Content Security Policy入門セキュリティ設定と違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting