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

script-src

img-src

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:

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