CSP (Content-Security Policy)
In order for Alpine to be able to execute plain strings from HTML attributes as JavaScript expressions, for example x-on:click="console.log()"
, it needs to rely on utilities that violate the "unsafe-eval" content security policy.
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".
In order to accommodate environments where this CSP is necessary, Alpine will offer an alternate build that doesn't violate "unsafe-eval", but has a more restrictive syntax.
Installation
The CSP build hasn’t been officially released yet. In the meantime, you may build it from source. Once released, like all Alpine extensions, you will be able to include this either via <script>
tag or module import:
Script tag
<html> <script src="alpinejs/alpinejs-csp/cdn.js" defer></script></html>
Module import
import Alpine from '@alpinejs/csp' window.Alpine = Alpinewindow.Alpine.start()
Restrictions
Since Alpine can no longer interpret strings as plain JavaScript, it has to parse and construct JavaScript functions from them manually.
Due to this limitation, you must use Alpine.data
to register your x-data
objects, and must reference properties and methods from it by key only.
For example, an inline component like this will not work.
<!-- Bad --><div x-data="{ count: 1 }"> <button @click="count++">Increment</button> <span x-text="count"></span></div>
However, breaking out the expressions into external APIs, the following is valid with the CSP build:
<!-- Good --><div x-data="counter"> <button @click="increment">Increment</button> <span x-text="count"></span></div>
Alpine.data('counter', () => ({ count: 1, increment() { this.count++ }}))
Code highlighting provided by Torchlight