Content Security Policy¶

The HTTP response header Content-Security-Policy allows site administrators to control which resources user agents can load for a specified page. With few exceptions, the set policy mainly involves specifying the server's origin and script endpoints, thereby helping prevent Cross-Site Scripting (XSS) attacks.

For more details, refer to Content-Security-Policy

Multiple Content Security Policies¶

CSP allows specifying multiple policies in one resource, including via the Content-Security-Policy header, as well as the Content-Security-Policy-Report-Only header and meta element.

Example:

// header
Content-Security-Policy: connect-src http://example.com/;
                         script-src http://example.com/

// meta tag
<meta http-equiv="Content-Security-Policy" content="connect-src http://example.com/;
                         script-src http://example.com/">

How to Integrate RUM SDK into a Web Application Using CSP¶

If your web application is using CSP, after integrating the Guance RUM SDK, you may encounter security violation prompts in the browser. You need to add the following URLs to the corresponding directives:

Datakit Reporting URLs¶

Depends on the datakitOrigin option in the RUM SDK initialization configuration:

 DATAFLUX_RUM.init({
      ...
      datakitOrigin: 'https://test.dk.com',
      ...
    })

In the CSP security directive, please add the following entry:

    connect-src https://*.dk.com

Web Worker¶

If you have enabled the RUM SDK Session Replay feature or added the compressIntakeRequests configuration during RUM initialization, please ensure to add the following worker-src entry:

 worker-src blob:;

Starting from SDK version >=3.2.0, self-hosting web worker files is supported. Add workerUrl to the SDK configuration to specify the hosting address. You can obtain the worker file in the following two ways:

1. Download from the Guance official address: https://static.guance.com/browser-sdk/v3/worker.js
2. Install the @cloudcare/browser-worker NPM package and include it in the build assets using a build tool (refer to documentation for Webpack 4, Webpack 5, Vite, and Rollup).

CDN Addresses¶

If you are using CDN Asynchronous or CDN Synchronous methods to import the RUM SDK, please add the following script-src entry:

script-src https://static.guance.com