Configure CSP rules

Content Security Policy (CSP) is a mechanism by browsers and web servers that restricts resources that are allowed to be loaded. This limits an app's capabilities within the browser and mitigates certain types of vulnerabilities. For example, a Content Security Policy can ensure that data can't be leaked to third-party services as it prevents external network connections. For more information on Content Security Policies, visit MDN's article on Content Security Policy.

By default, the Dynatrace platform only defines a small set of CSP rules. You can configure your app's custom CSP rules if you need to access more sources from your app—such as custom fonts and custom UI widgets from non-platform domains, etc. Requesting these exceptions via the app configuration file ensures transparency and helps users understand the consequences of installing apps in their environment.

Configurable CSP rule exceptions

Because of security restrictions, you can't configure every available CSP rule for your app. You can extend the following directives:

Name	Purpose	Allowed values
font-src	Applying custom fonts to the app.	https://my.domain.com (only https is allowed, no trailing slash) 'data:' 'sha*-*'
img-src	Loading custom images from outside of the platform	https://my.domain.com (only https is allowed, no trailing slash) 'data:' 'blob:' 'sha*-*'
media-src	Loading media files (videos, audio)	https://my.domain.com (only https is allowed, no trailing slash) 'sha*-*'
script-src	Loading custom scripts from outside of the platform	https://my.domain.com (only https is allowed, no trailing slash) 'sha*-*'
style-src	Loading custom styles from outside of the platform	https://my.domain.com (only https is allowed, no trailing slash) 'unsafe-inline' 'sha*-*'

Where to configure custom CSP rules

You can configure custom rules within the app configuration file. Within the app property, you can define your CSP rule exceptions. In the following example, we add two CSP rules to allow images and fonts to load from domains outside the platform.

app.config.json

{
  "environmentUrl": "<Your-Environment-URL>",
  "app": {
    "id": "<Your-App-ID>",
    "name": "<Your-App-Name>",
    "version": "0.0.0",
    "description": "<Your-App-Description>",
    "scopes": [],
    "csp": {
      "img-src": [
        {
          "value": "https://awesome-cdn.net",
          "comment": "allows to load images from awesome CDN"
        }
      ],
      "font-src": [
        {
          "value": "https://font-paradise.com",
          "comment": "allows to load fonts from font paradise"
        }
      ]
    }
  }
}

app.config.ts

import type { CliOptions } from 'dt-app';

const config: CliOptions = {
  environmentUrl: '<Your-Environment-URL>',
  app: {
    id: '<Your-App-ID>',
    name: '<Your-App-Name>',
    version: '0.0.0',
    description: '<Your-App-Description>',
    scopes: [],
    csp: {
      'img-src': [
        {
          value: 'https://awesome-cdn.net',
          comment: 'allows to load images from awesome CDN'
        }
      ],
      'font-src': [
        {
          value: 'https://font-paradise.com',
          comment: 'allows to load fonts from font paradise'
        }
      ]
    }
  }
}

module.exports = config;

Limitations

You can't configure the connect-src directive for your app. That means you can't fetch resources from external domains. To do so, create an app function and fetch external data. To learn more, read the How to create an app function guide.

Note

The unsafe-eval directive is forbidden for all CSP rule exceptions.