Skip to content

JS Client SDK uses new Function(...) and breaks with strict CSP (no 'unsafe-eval') in Angular #329

@gomezcabo

Description

@gomezcabo

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

  1. 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>
  1. Initialize the SDK early in app startup (e.g., main.ts or 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');
});
  1. Enable a strict CSP that does not include 'unsafe-eval' (either via server headers or Angular’s autoCsp). 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' in script-src makes 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 provide globalThis/self in the web context without eval-like behavior.
  • A CSP-compliant resolution would be to rely on globalThis/self in the browser build (and fall back to safe checks per environment) rather than using the Function constructor.
  • I can provide a minimal reproduction repository if helpful: <link to repro, if available>.

Thanks in advance for taking a look!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions