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 a few exceptions, the set policy mainly involves specifying the server's origin and script endpoints, thereby helping to prevent Cross-Site Scripting attacks (Cross-Site Script).

For more details, refer to Content-Security-Policy

Multiple Content Security Policies¶

CSP allows specifying multiple policies in a resource, including through the Content-Security-Policy header, the Content-Security-Policy-Report-Only header, and the meta component.

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 Website Application Using CSP¶

If your website 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, hosting web worker files yourself is supported. Add workerUrl in 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 (see documentation for Webpack 4, Webpack 5, Vite, and Rollup).

CDN Address¶

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

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