-
Notifications
You must be signed in to change notification settings - Fork 67
Description
Is this a support request?
Yes
Describe the bug
When enabling a strict Content Security Policy (CSP) in an Angular application (via autoCsp, i.e., an auto-generated CSP that disallows 'unsafe-eval'), the app fails to load as soon as the LaunchDarkly JS Client SDK is included. The browser reports a CSP violation caused by use of the Function constructor. The stack trace points to a new Function("return this") call within the SDK bundle, which is blocked by CSP and prevents Angular from bootstrapping.
To reproduce
- Create a new Angular app and add the LaunchDarkly JS Client SDK:
npx @angular/cli@latest new ld-csp-repro --routing=false --style=scss
cd ld-csp-repro
npm install launchdarkly-js-client-sdk@<X.Y.Z>- Initialize the SDK early in app startup (e.g.,
main.tsor an app-level service invoked during bootstrap):
// main.ts (example)
import { initialize } from 'launchdarkly-js-client-sdk';
const ldClient = initialize('<YOUR_CLIENT_SIDE_ID>', {
key: 'example-user-key',
anonymous: true,
});
ldClient.on('ready', () => {
console.log('LD ready');
});- Enable a strict CSP that does not include
'unsafe-eval'(either via server headers or Angular’sautoCsp). For example:
Content-Security-Policy:
default-src 'self';
script-src 'self' 'nonce-{{RANDOM_NONCE}}';
connect-src 'self' https://*.launchdarkly.com https://clientstream.launchdarkly.com https://events.launchdarkly.com;
img-src 'self' data:;
style-src 'self' 'nonce-{{RANDOM_NONCE}}';
object-src 'none';
(Note: there is no 'unsafe-eval' in script-src.)
4. Run the app and open it in the browser.
5. Observe that the app fails to load and a CSP error appears in the console referencing a blocked eval/Function call from the LaunchDarkly SDK.
Expected behavior
The browser build of the SDK should be compatible with strict CSP (no 'unsafe-eval') and avoid new Function(...) or other eval-like constructs. The application should load normally with CSP enforced.
Logs
Example console output (Chrome):
Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'strict-dynamic' 'sha256-xxxxx
Angular then fails to bootstrap due to the uncaught error.
SDK version
launchdarkly-js-client-sdk <3.9.0>
Language version, developer tools
- Angular
20 - TypeScript
5.8.3 - Node
20 - Build system: Angular CLI
19.2.0
OS/platform
- Browser(s): Chrome
141.0.7390.108 - OS: macOS
14.5
Additional context
- Allowing
'unsafe-eval'inscript-srcmakes the issue disappear, but that’s not acceptable for our security posture. - The pattern
new Function("return this")is typically used to obtain a global object reference, but it violates strict CSP. Modern browsers provideglobalThis/selfin the web context without eval-like behavior. - A CSP-compliant resolution would be to rely on
globalThis/selfin the browser build (and fall back to safe checks per environment) rather than using theFunctionconstructor. - I can provide a minimal reproduction repository if helpful:
<link to repro, if available>.
Thanks in advance for taking a look!