Define custom CSP rule exceptions

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.

The Dynatrace platform only defines a small set of CSP rules by default. If you need to access more sources (for example, custom fonts, custom UI widgets from non-platform domains, ...) from your app, you can configure custom CSP rules for your application. Requesting these exceptions via the app configuration file ensures transparency and helps users understand the consequences of installing apps in their environment.

Which CSP rule exceptions can you configure

Because of security restrictions, you can't configure every available CSP rule for your app. The following directives you can extend: Please read the corresponding MDN documentation to read more about allowed values.

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

Where to configure custom CSP rules for your app

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, two CSP rules are added to allow the loading of images and fonts from domains outside the platform.

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;

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"
        }
      ]
    }
  }
}

Limitations

You can't configure the connect-src directive for your app. Therefore, you can't fetch resources from external domains. To do so, create an app function and fetch external data. To read more on how to do this, read the following guide: How to create an app function.