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 (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.
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.
If the app's CSP cannot include 'unsafe-eval', and adjusting CSP is not possible, these alternatives are available:
Builder optimizes simple 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.
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'.
Review CSP configuration requirements and test the chosen approach with existing Builder content. For complex logic requirements, explore custom components as an alternative to Builder's custom code features.
For more information: