> ## Content Index
> Fetch the complete content index at: https://securinglaravel.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Security Tip: Use the Alpine.js CSP Build!
- URL: https://securinglaravel.com/security-tip-use-the-alpinejs-csp/
- Published: 2024-01-15T02:39:23.000Z
- Updated: 2025-05-11T08:49:14.000Z
- Description: [Tip#68] If you use Alpine and a CSP on your app, you'll want to use the new CSP-friendly build to avoid needing `unsafe-eval` in your policies.
- Author: Stephen Rees-Carter
- Tags: Security Tips, Newsletter, #substack, #substack-type-newsletter, #substack-access-everyone, #Import 2024-03-28 07:14, Alpine, Content Security Policy

We’ve talked about using **Content Security Policies (CSP)** before, but if you’re not familiar with them, then check out my [**Getting Started with CSPs**](https://securinglaravel.com/security-tip-getting-started-with-csp/) tip and [**CSP In Depth**](https://securinglaravel.com/in-depth-content-security-policy/) articles to learn what they are and how they work. We haven’t talked about **Alpine.js** before though, so if you’ve never heard of it, go check out the website: [alpinejs.dev](https://alpinejs.dev/?ref=securinglaravel.com). It’s a lightweight javascript framework with a inline-to-HTML syntax designed to avoid having to write complex external scripts.

Alpine is a great way to write minimal javascript, however it’s inline syntax uses *Function declarations*, which violate the `unsafe-eval` CSP directive. This meant you always had to choose between using Alpine or running a CSP without `unsafe-eval`, which was frustrating when you wanted to lock down your CSP but still use the cool features Alpine has to offer.

As a result of many folks raising the issue, [Caleb Porzio](https://twitter.com/calebporzio?ref=securinglaravel.com) (the creator of Alpine and Livewire), recently announced a new CSP-friendly build of Alpine is available:

[![](https://storage.ghost.io/c/d9/0d/d90de76f-6031-4e2c-85b8-3447a38c4992/content/images/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https-3a-2f-2fsubstack-post-media.s3.amazonaws.com-2fpublic-2fimages-2f37094a11-fc16-4686-a756-f9270eceebbb_614x361.png)](https://twitter.com/calebporzio/status/1743005575800053986?ref=securinglaravel.com)

You can find all the details on the Alpine docs page: [https://alpinejs.dev/advanced/csp](https://alpinejs.dev/advanced/csp?ref=securinglaravel.com).

The key difference with the CSP-friendly version is you can’t use inline scripts, but need to extract them into data components.

For example, you can’t do this with the CSP build:

```
<div x-data="{ count: 1 }">
    <button @click="count++">Increment</button>
 
    <span x-text="count"></span>
</div>
```

You need to do this instead:

```
<div x-data="counter">
    <button @click="increment">Increment</button>
 
    <span x-text="count"></span>
</div>
```

```
Alpine.data('counter', () => ({
    count: 1,
 
    increment() {
        this.count++
    },
}))
```

If you’re putting the work into running a strict CSP without `` `unsafe-eval` ``, then extracting components like this and being more intentional and structed around your javascript is a good trade-off, in my opinion.

Note that Livewire 3 doesn’t yet support the CSP build. [Caleb is aware of the issue](https://twitter.com/calebporzio/status/1743092509872443581?ref=securinglaravel.com), and I’ll keep bugging him about it so we can make it happen.

---

***If you found this security tip useful,*** [***subscribe***](#/portal/signup) ***to get weekly*** [***Security Tips***](https://securinglaravel.com/tag/tips/) **straight to your inbox.* Upgrade to a* [*premium subscription*](#/portal/signup) *for exclusive monthly* [*In Depth articles*](https://securinglaravel.com/tag/in-depth/)*, or drop a coin in the* [*tip jar*](#/portal/support) *to show your support.*

*When was the last time you had a penetration test? Book a* [*Laravel Security Audit and Penetration Test*](https://stephenreescarter.net/laravel-security-audits-and-pentesting/?utm%5Fsource=securinglaravel.com)*, or a budget-friendly* [*Security Review*](https://stephenreescarter.net/laravel-security-reviews/?utm%5Fsource=securinglaravel.com)*!* 

*You can also connect with me on* [*Bluesky*](https://bsky.app/profile/valorin.bsky.social?ref=securinglaravel.com)*, or* [*other socials*](https://pinkary.com/@valorin?ref=securinglaravel.com)*, and check out* [*Practical Laravel Security*](https://practicallaravelsecurity.com/?utm%5Fsource=securinglaravel.com)*, my interactive course designed to boost your Laravel security skills.*