--- title: Getting Started with Datadog description: Detect and aggregate CSP violations with Datadog breadcrumbs: Docs > Integrations > Content Security Policy --- # Content Security Policy ## Overview{% #overview %} The Datadog Content Security Policy (CSP) integration sends logs to Datadog from web browsers as they interpret your CSP and detect violations. By using the CSP integration, you don't have to host or manage a dedicated endpoint to aggregate your CSP data. For more information about CSP, see [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy). ## Prerequisites{% #prerequisites %} Before you add a directive to a CSP header, [generate a client token in your Datadog account](https://app.datadoghq.com/organization-settings/client-tokens). {% alert level="info" %} For security reasons, you must use a client token to collect logs from web browsers. You cannot use Datadog API keys to configure the Datadog Browser Logs SDK as they would be exposed client-side. For more information, see the [client token documentation for more details](https://docs.datadoghq.com/logs/log_collection.md?tab=host#setup). {% /alert %} ## Prepare a URL for the CSP{% #prepare-a-url-for-the-csp %} You need a URL where browsers can send policy violation reports. The URL must have the following format: ``` https:///api/v2/logs?dd-api-key=&dd-evp-origin=content-security-policy&ddsource=csp-report ``` Optionally, add the `ddtags` key (service name, the environment, and service version) to the URL to set up [Unified Service Tagging](https://docs.datadoghq.com/getting_started/tagging/unified_service_tagging.md): - `env`: the application's environment. - `service`: the service name for your application. - `version`: the application's version. When formatting the `ddtags` values, you must: - Group keys and values with a colon (`:`) - Concatenate keys and values with a comma (`,`) - Use URL encoding For example, given the key-value pairs `{"service": "billingService", "env": "production"}`, the URL-encoded string would look like this: ``` service%3AbillingService%2Cenv%3Aproduction ``` And the final URL with tags would be: ``` https:///api/v2/logs?dd-api-key=&dd-evp-origin=content-security-policy&ddsource=csp-report&ddtags=service%3AbillingService%2Cenv%3Aproduction ``` ## Add the URL to the CSP{% #add-the-url-to-the-csp %} You can either embed the URL in an HTTP header (recommended), or embed it in a `` HTML tag. ### Embed the policy in an HTTP header{% #embed-the-policy-in-an-http-header %} Datadog recommends embedding the Content Security Policy in an HTTP header. You can either use the `report-uri` directive or the `reporting-endpoints` directive. The `reporting-endpoints` directive will eventually supersede `report-uri`, but is not yet supported by all browsers. - If you're using the `report-uri` directive: ```bash Content-Security-Policy: ...; report-uri https:///api/v2/logs?dd-api-key=&dd-evp-origin=content-security-policy&ddsource=csp-report ``` - If you're using the `reporting-endpoints` directive: ```json Content-Security-Policy: ...; report-to browser-intake-datadoghq Reporting-Endpoints: browser-intake-datadoghq="https:///api/v2/logs?dd-api-key=&dd-evp-origin=content-security-policy&ddsource=csp-report" ``` ### Policy embedded in a `` HTML tag{% #policy-embedded-in-a-meta-html-tag %} You can also embed the URL in a `` HTML tag. ```html ``` ## Violation reports examples{% #violation-reports-examples %} Each browser interprets the report format differently: {% tab title="Firefox" %} ```json { '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' } } ``` {% /tab %} {% tab title="Chrome" %} ```json { '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': '' } } ``` {% /tab %} {% tab title="Safari" %} ```json { '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 } } ``` {% /tab %} ## Use CSP with Real User Monitoring and Session Replay{% #use-csp-with-real-user-monitoring-and-session-replay %} If you're using CSP on your websites, add the following URLs to your existing [directives](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#directives) depending on your use case. ### Intake URLs{% #intake-urls %} Depending on the `site` option used to initialize [Real User Monitoring](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup.md#initialization-parameters) or [browser log collection](https://docs.datadoghq.com/logs/log_collection/javascript.md#initialization-parameters), add the appropriate `connect-src` entry: ```txt connect-src https:// ``` ### Web Worker{% #web-worker %} If you are using Session Replay or the RUM [`compressIntakeRequests` initialization parameter](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup.md#initialization-parameters), make sure to allow workers with `blob:` URI schemes by adding the following `worker-src` entry: ```txt worker-src blob:; ``` Alternatively, starting from [version 4.47.0](https://github.com/DataDog/browser-sdk/blob/main/CHANGELOG.md#v4470), you can self-host the Datadog Browser SDK Worker JavaScript file and provide the `workerUrl` option to initialize the [RUM Browser SDK](https://github.com/DataDog/browser-sdk/blob/main/CHANGELOG.md#v4470) by doing one of the following: - Download it from [https://unpkg.com/@datadog/browser-worker](https://unpkg.com/@datadog/browser-worker), and store it alongside your Web application assets. - Install the [`@datadog/browser-worker` NPM package](https://www.npmjs.com/package/@datadog/browser-worker) and use your build tool to include it in the built assets (see documentation for [Webpack 4](https://v4.webpack.js.org/loaders/file-loader/), [Webpack 5](https://webpack.js.org/guides/asset-modules/#url-assets), [Vite](https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url), and [Rollup](https://github.com/rollup/plugins/tree/master/packages/url/#readme)). Requirements: - Make sure the Worker major version matches the Browser SDK version you are using. - Host the file on the same origin as your web application. Due to [browser restrictions](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker), it cannot be hosted on a separate domain (for example, a third-party CDN host) or a different scheme. ### CDN bundle URL{% #cdn-bundle-url %} If you are using the CDN async or CDN sync setup for [Real User Monitoring](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup.md) or [browser log collection](https://docs.datadoghq.com/logs/log_collection/javascript.md#cdn-async), also add the following `script-src` entry: ```txt script-src https://www.datadoghq-browser-agent.com ``` ## Further Reading{% #further-reading %} - [Learn about Unified Service Tagging](https://docs.datadoghq.com/getting_started/tagging/unified_service_tagging.md) - [Monitor Content Security Policy violations with Datadog](https://www.datadoghq.com/blog/content-security-policy-reporting-with-datadog/)