News

Alpine adds a new build to work with Content Security Policies

Published Updated
Alpine adds a new build to work with Content Security Policies image

Caleb Porzio announced that Alpine.js now has a CSP build that will work with environments where CSP is required:

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 that some applications may enforce for security purposes.

In order to accommodate environments where this CSP is necessary, Alpine offer's an alternate build that doesn't violate "unsafe-eval", but has a more restrictive syntax.

One thing to note with this new build is you must use Alpine.data:

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.

This new build is available as a CDN or via npm install @alpinejs/csp

See the official documentation for complete details and for instructions.

Note: When asked about Livewire support, Caleb says, "Not yet unfortunately because there is one or two places Livewire relies on eval (wire:click="something('one', 'two')") kinda thing"

Eric L. Barnes photo

Eric is the creator of Laravel News and has been covering Laravel since 2012.

Sponsored

serpapi logo
SerpApi

The Web Search API for Your LLM and AI Applications

Visit SerpApi

The latest

View all →
Agent Run Observability in Laravel AI SDK 0.11 image

Agent Run Observability in Laravel AI SDK 0.11

Read article
Debounced Queued Event Listeners in Laravel image

Debounced Queued Event Listeners in Laravel

Read article
Statamic Mailables Viewer Previews Laravel Emails in the Control Panel image

Statamic Mailables Viewer Previews Laravel Emails in the Control Panel

Read article
Laravel Tackle: Run an AI Coding Agent in Your Laravel App image

Laravel Tackle: Run an AI Coding Agent in Your Laravel App

Read article
Queue::forward(): Reroute Laravel Queues in One Place image

Queue::forward(): Reroute Laravel Queues in One Place

Read article
Laravel Read-Through Filesystem: Lazy Storage Migration image

Laravel Read-Through Filesystem: Lazy Storage Migration

Read article