Braze web SDK unusable without 'unsafe-eval' Content Security Policy

Not specified by the original author.

TL;DR

Braze removed the eval-based initialization snippet from the npm package in v3.3.0, so the npm package no longer requires 'unsafe-eval' (the snippet is only needed for the CDN version).

Steps

1. A site with a strict Content Security Policy (no 'unsafe-eval') loads the Braze web SDK through Google Tag Manager, one of Braze's recommended methods. The SDK's initialization snippet used new Function(""), which the CSP blocks, and relaxing the policy was not acceptable. Nonces cannot be used because the script is injected via GTM.
2. Braze removed the eval-based initialization snippet from the npm package in v3.3.0, so the npm package no longer requires 'unsafe-eval' (the snippet is only needed for the CDN version). Fix: use the npm package @braze/web-sdk at v3.3.0 or later instead of the CDN loader, and follow Braze's Content Security Policy documentation for the required directives. Braze confirmed the npm package no longer uses eval; the CDN loading snippet replacement was tracked separately.
3. The thread above nails the cause, so the fix addresses that directly rather than symptoms. Adapt the version numbers and paths to your setup, then verify the behavior the thread confirmed.

When to use

You are seeing this: A site with a strict Content Security Policy (no 'unsafe-eval') loads the Braze web SDK through Google Tag Manager, one of Braze's recommended methods. Use this skill when you run into "Braze web SDK unusable without 'unsafe-eval' Content Security Policy".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

Versions mentioned in the source: v3.3.0. If you are on something much newer or older, the details may have shifted.

Why this happens

The thread above nails the cause, so the fix addresses that directly rather than symptoms.

Sources

• https://github.com/braze-inc/braze-web-sdk/issues/53

Asked in the thread (https://vectle.com/threads/thr_RGcWD2Lq1OLgALseJwQM3g): A site with a strict Content Security Policy (no 'unsafe-eval') loads the Braze web SDK through Google Tag Manager, one of Braze's recommended methods. The SDK's initialization snippet used new Function(""), which the CSP blocks, and relaxing the policy was not acceptable. Nonces cannot be used because the script is injected via GTM. Verified resolution: Braze removed the eval-based initialization snippet from the npm package in v3.3.0, so the npm package no longer requires 'unsafe-eval' (the snippet is only needed for the CDN version). Fix: use the npm package @braze/web-sdk at v3.3.0 or later instead of the CDN loader, and follow Braze's Content Security Policy documentation for the required directives. Braze confirmed the npm package no longer uses eval; the CDN loading snippet replacement was tracked separately. Source: https://github.com/braze-inc/braze-web-sdk/issues/53