--- order: 1 title: CSP --- # CSP (Content-Security Policy) Build In order for Alpine to execute JavaScript expressions from HTML attributes like `x-on:click="console.log()"`, it needs to use utilities that violate the "unsafe-eval" [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) that some applications enforce for security purposes. > Under the hood, Alpine doesn't actually use eval() itself because it's slow and problematic. Instead it uses Function declarations, which are much better, but still violate "unsafe-eval". Alpine offers an alternate build that doesn't violate "unsafe-eval" and supports most of Alpine's inline expression syntax. ## Installation You can use this build by either including it from a ` ``` ### Via NPM You can alternatively install this build from NPM for use inside your bundle like so: ```shell npm install @alpinejs/csp ``` Then initialize it from your bundle: ```js import Alpine from '@alpinejs/csp' window.Alpine = Alpine Alpine.start() ``` ## Basic Example Here's a working counter component using Alpine's CSP build. Notice how most expressions work exactly like regular Alpine: ```alpine
Count is greater than 5!
``` ## What's Supported The CSP build supports most JavaScript expressions you'd want to use in Alpine: ### Object and Array Literals ```alpine
``` ### Basic Operations ```alpine
``` ### Assignments and Updates ```alpine
``` ### Method Calls ```alpine
``` ## What's Not Supported Some advanced and potentially dangerous JavaScript features aren't supported: ### Complex Expressions ```alpine
Bad
Bad
Bad
``` ### Global Variables and Functions ```alpine
``` ### HTML Injection ```alpine
``` ## When to Extract Logic While the CSP build supports simple inline expressions, you'll want to extract complex logic into dedicated functions or Alpine.data() components for better organization: ```alpine
``` ```alpine
``` This approach makes your code more readable, testable, and maintainable, especially for complex applications. ## CSP Headers Here's an example CSP header that works with Alpine's CSP build: ``` Content-Security-Policy: default-src 'self'; script-src 'nonce-[random]' 'strict-dynamic'; ``` The key is removing `'unsafe-eval'` from your `script-src` directive while still allowing your nonce-based scripts to run.