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 to prevent Cross-Site Scripting attacks.

For more details, refer to Content-Security-Policy

Multiple Content Security Policies¶

CSP allows specifying multiple policies for a 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 in 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 in the RUM initialization configuration, 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 and replayCanvasWorkerUrl (SDK version >= 3.3.0) in the SDK configuration to specify the hosting addresses. You can obtain the worker files in the following two ways:

1. Download from the Guance official addresses: https://static.guance.com/browser-sdk/v3/worker.js and https://static.guance.com/browser-sdk/v3/canvas-worker.js.

2. Install the @cloudcare/browser-worker NPM package and include it in your build assets using a build tool (see documentation for Webpack 4, Webpack 5, Vite, and Rollup).

CDN Address¶

If you are introducing the RUM SDK using the CDN Async or CDN Sync method, please add the following script-src entry:

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