Content Security Policy: unsafe-eval

Builder's custom code and data binding features may require the 'unsafe-eval' directive in Content Security Policy headers to evaluate complex expressions.

Most apps need no additional configuration. Alternatives are available when Content Security Policy restrictions prevent using 'unsafe-eval'.

Content Security Policy

Content Security Policy (CSP) is a security standard that prevents cross-site scripting (XSS) attacks by controlling which resources web pages can load and execute. CSP uses HTTP headers or HTML meta tags to instruct browsers about allowed content sources.

CSP Configuration

Builder's custom code and data binding features execute JavaScript dynamically on the client side. Simple bindings like state.item.title are optimized, but complex expressions require JavaScript's eval() function.

Complex expressions work only if the app's CSP includes the 'unsafe-eval' directive:

Content-Security-Policy: script-src 'self' 'unsafe-eval'

For guidance on implementing CSP headers with unsafe-eval, see Unsafe eval expressions on MDN.

Alternatives for restricted policies

If the app's CSP cannot include 'unsafe-eval', and adjusting CSP is not possible, these alternatives are available:

Use basic data bindings

Builder optimizes basic property access like state.item.name and state.product.price. Replace complex expressions with these simple bindings and implement complex logic in custom components within the app codebase.

Use the Edge build

Builder provides an Edge build that includes a JavaScript interpreter and doesn't require 'unsafe-eval':

javascript // Standard import import { builder } from '@builder.io/sdk-react'; // Edge build import import { builder } from '@builder.io/sdk-react/bundle/edge';

Edge build availability:

Framework	Availability	SDK version
React	✅	Gen 2
Vue	✅	Gen 2
Svelte	✅	Gen 2
Angular	🔵	Gen 2

✅ Full support

🔵 In development

Trade-offs to consider:

Performance impact. Ships a heavy JavaScript interpreter to each customer, which significantly impacts performance due to its size and slower code evaluations.
JavaScript support. Only supports ES5 syntax, so there is no support for features such as const, let, Promise, or spread operator.
Import pattern. Update imports from '@builder.io/sdk-*' to '@builder.io/sdk-*/bundle/edge'.

What's next

Was this article helpful?