Content security policy headers

Content-Security-Policy provides added security by restricting how and where content can be loaded on your website. This reference article covers which content security policy headers are needed with the Web SDK.

Nonce attributes

If you use a nonce value in your script-src or style-src directives, pass that value to the contentSecurityNonce initialization option to propagate it to newly created scripts and styles generated by the SDK:

1
2
3
4
5
6
import * as braze from "@braze/web-sdk";

braze.initialize(apiKey, {
  baseUrl: baseUrl,
  contentSecurityNonce: "YOUR-NONCE-HERE", // assumes a "nonce-YOUR-NONCE-HERE" CSP value
});

Directives

connect-src

• connect-src https://sdk.iad-01.braze.com: allows the SDK to communicate with Braze APIs.
  • Change this URL to match your baseUrl initialization option’s API SDK endpoint.

script-src

• script-src https://js.appboycdn.com: required when using the CDN-hosted integration.
• script-src 'unsafe-eval': required when using the integration snippet which contains reference to appboyQueue
  • To avoid using this directive, integrate using NPM instead.
• script-src 'nonce-...' or script-src 'unsafe-inline': required for certain in-app messages (for example, custom HTML).

img-src

• img-src: appboy-images.com braze-images.com cdn.braze.eu: required when using Braze CDN-hosted images. These hostnames may vary based on dashboard cluster.

Font Awesome

To disable the automatic inclusion of Font Awesome, use the doNotLoadFontAwesome initialization option:

1
2
3
4
5
6
import * as braze from "@braze/web-sdk";

braze.initialize(apiKey, {
  baseUrl: baseUrl,
  doNotLoadFontAwesome: true,
});

If you choose to use Font Awesome, the following CSP directives are required:

• style-src https://use.fontawesome.com
• style-src 'nonce-...' or style-src 'unsafe-inline'
• font-src https://use.fontawesome.com