How Do I Set a Custom Content-Security-Policy Header?

The Content-Security-Policy header is a HTTP response header that allows you to restrict resources (such as JavaScript, CSS, and images) that can be loaded in your app and from where. By default, Visual Builder sets an appropriate value for the header, but you can choose to override it for your app.

The default value denies embedding (or allows it if configured in the Security tab of the app-level Settings editor). It also allows the use of scripts and styles imported from HTTPS sources alone, in addition to inline scripts and styles. If this isn't suitable for your app, you can set your own header value by adding the contentSecurityPolicy property to the userConfig element in your application's app-flow.json file.

On the Web Apps tab in the Navigator, select your web app, then click the JSON tab to open the app-flow.json file.
Configure the userConfig element in the file, which by default is defined as:
```
"userConfig": {
   "type": "vb/DefaultSecurityProvider",   
   "configuration": {},
   "embedding": "deny"
    },
```
Add the contentSecurityPolicy property and define its value to the exact directives you want for the header in your server responses (refer to the CSP Reference for details):
```
  "contentSecurityPolicy": "<your-value>",
```
If you want to allow embedding, make sure you define the directive as part of your header; otherwise, the embedding configuration specified in the app-level Security settings takes effect. This setting by default denies embedding ("embedding": "deny").
When the contentSecurityPolicy property isn't specified, the following default configuration takes effect:
```
   "contentSecurityPolicy": "frame-ancestors 'self', script-src 'self' 'unsafe-eval' 'unsafe-inline'
      https:, style-src 'self' 'unsafe-inline' https:"
```