コンテンツセキュリティポリシー

To find out if this integration is available in your organization, see your Datadog Integrations page or ask your organization administrator.

To initiate an exception request to enable this integration for your organization, email [email protected].

概要

Datadog Content Security Policy (CSP) インテグレーションは、Web ブラウザが CSP を解釈して違反を検出すると、そのログを Datadog に送信します。CSP インテグレーションを使用すると、CSP データを集計するための専用エンドポイントをホストまたは管理する必要がありません。

CSP の詳細については、Content-Security-Policy を参照してください。

前提条件

CSP ヘッダーにディレクティブを追加する前に、Datadog アカウントでクライアントトークンを生成します。

セキュリティ上の理由から、Web ブラウザからログを収集するには、クライアントトークンを使用する必要があります。Datadog Browser Logs SDK の構成に Datadog API キーを使用すると、クライアント側に公開されるため、使用することができません。詳細については、クライアントトークンのドキュメントを参照してください。

CSP の URL を用意する

ブラウザがポリシー違反のレポートを送信できる URL が必要です。URL は以下の形式である必要があります。

https:///api/v2/logs?dd-api-key=<client-token>&dd-evp-origin=content-security-policy&ddsource=csp-report

オプションとして、URL に ddtags キー (サービス名、環境、サービスバージョン) を追加して、統合サービスタグ付けを設定します。

  • env: アプリケーションの環境。
  • service: アプリケーションのサービス名。
  • version: アプリケーションのバージョン。

ddtags の値をフォーマットする場合、以下を行う必要があります。

  • キーと値をコロン (:) でグループ化する
  • キーと値をカンマ (,) で連結する
  • URL エンコーディングを使用する

例えば、キーと値のペア {"service": "billingService", "env": "production"} の場合、URL エンコードされた文字列は次のようになります。

service%3AbillingService%2Cenv%3Aproduction

そして、タグを使った最終的な URL はこうなります。

https:///api/v2/logs?dd-api-key=<client-token>&dd-evp-origin=content-security-policy&ddsource=csp-report&ddtags=service%3AbillingService%2Cenv%3Aproduction

CSP に URL を追加する

HTTP ヘッダーに URL を埋め込むか (推奨)、<meta> HTML タグに埋め込むことができます。

ポリシーを HTTP ヘッダーに埋め込む

Datadog は、HTTP ヘッダーにコンテンツセキュリティポリシーを埋め込むことを推奨しています。report-uri ディレクティブまたは report-to ディレクティブのどちらかを使用することができます。report-to ディレクティブは最終的には report-uri に取って代わりますが、まだすべてのブラウザでサポートされているわけではありません。

  • report-uri ディレクティブを使用している場合

    Content-Security-Policy: ...; report-uri https:///api/v2/logs?dd-api-key=<client-token>&dd-evp-origin=content-security-policy&ddsource=csp-report

  • report-to ディレクティブを使用している場合

    Content-Security-Policy: ...; report-to browser-intake-datadoghq
Report-To: { "group": "browser-intake-datadoghq",
            "max_age": 10886400,
            "endpoints": [
                { "url": "https:///api/v2/logs?dd-api-key=<client-token>&dd-evp-origin=content-security-policy&ddsource=csp-report" }
            ] }

HTML タグ <meta> に埋め込まれたポリシー

また、<meta> HTML タグの中に URL を埋め込むこともできます。

<meta http-equiv="Content-Security-Policy"
    content="...; report-uri 'https:///api/v2/logs?dd-api-key=<client-token>&dd-evp-origin=content-security-policy&ddsource=csp-report'">

違反レポートの例

各ブラウザは、レポートの形式を異なる方法で解釈します。

    {
  'csp-report': {
    'blocked-uri': 'https://evil.com/malicious.js',
    'document-uri': 'http://localhost:8000/',
    'original-policy': 'script-src http://good.com; report-uri http://127.0.0.1:8000/csp_reports',
    referrer: '',
    'violated-directive': 'script-src'
  }
}

    {
  'csp-report': {
    'document-uri': 'http://localhost:8000/',
    referrer: '',
    'violated-directive': 'script-src-elem',
    'effective-directive': 'script-src-elem',
    'original-policy': 'trusted-types toto; script-src good.com; report-uri http://127.0.0.1:8000/csp_reports',
    disposition: 'enforce',
    'blocked-uri': 'https://evil.com/malicious.js',
    'status-code': 200,
    'script-sample': ''
  }
}

    {
  'csp-report': {
    'document-uri': 'http://localhost:8000/',
    referrer: '',
    'violated-directive': 'script-src good.com',
    'effective-directive': 'script-src',
    'original-policy': 'trusted-types toto; script-src good.com; report-uri http://127.0.0.1:8000/csp_reports',
    'blocked-uri': 'https://evil.com',
    'status-code': 200
  }
}

    リアルユーザーモニタリングとセッションリプレイで CSP を使う

    Web サイトで CSP を使用する場合は、ユースケースに応じて、以下の URL を既存のディレクティブに追加してください。

    取込先 URL

    リアルユーザーモニタリング]4またはブラウザログ収集の初期化に使用した site オプションに応じて、適切な connect-src エントリを追加してください。

    connect-src https://

    Web Worker

    セッションリプレイまたは RUM compressIntakeRequests 初期化パラメーターを使用している場合、以下の worker-src エントリを追加して blob: URI スキームを持つワーカーを許可するようにしてください。

    worker-src blob:;

    また、バージョン 4.47.0 からは、以下のいずれかの方法で、Datadog ブラウザ SDK ワーカー JavaScript ファイルをセルフホストし、workerUrl オプションを提供して RUM ブラウザ SDK を初期化することもできます。

    要件:

    • ワーカーのメジャーバージョンが、使用しているブラウザ SDK のバージョンと一致していることを確認してください。
    • Web アプリケーションと同じオリジンでファイルをホストします。ブラウザの制限により、別ドメイン (例えば、サードパーティの CDN ホスト) や異なるスキームでホストすることはできません。

    CDN バンドル URL

    リアルユーザーモニタリングまたはブラウザログ収集で CDN 非同期または CDN 同期の設定を使用している場合、以下の script-src 項目も追加してください。

    script-src https://www.datadoghq-browser-agent.com

    その他の参考資料

    お役に立つドキュメント、リンクや記事:

    統合サービスタグ付けについてDOCUMENTATION more more

    Further Reading

    お役に立つドキュメント、リンクや記事:

    統合サービスタグ付けについてDOCUMENTATION more more