From 0face10523658543097ad024b8897d627d0df04d Mon Sep 17 00:00:00 2001
From: Ajay D'Souza <ajaydsouza@users.noreply.github.com>
Date: Tue, 20 Oct 2026 03:32:18 +0000
Subject: [PATCH] Add a strict Content-Security-Policy app-wide

A second lock behind the HTML sanitiser for the reader, which prints
third-party article markup. Every web page, the installer included, now
sends a policy that allows scripts only from this origin or with a
per-request nonce: no unsafe-inline, no unsafe-eval, no inline event
handlers, javascript: URLs or style attributes, nothing framing the app
and forms posting only to it. Stored article images keep their own
tighter policy, and the Vite dev server is allowed while it runs.

To work under it, Alpine is now its CSP build: the reader and bulk
selection are registered components that read their config from data
attributes, and the inline onclick/onsubmit/onchange attributes are
replaced by data-* hooks handled in resources/js/behaviours.js. The
unused Breeze modal and dropdown components are removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014DPvSBmPyHN2QVmXsQQVKe
---
 README.md                                     |   9 +
 app/Http/Middleware/ContentSecurityPolicy.php |  90 +++++++++
 bootstrap/app.php                             |   5 +-
 package-lock.json                             |  22 +--
 package.json                                  |   2 +-
 resources/css/app.css                         |  15 ++
 resources/js/app.js                           |  11 +-
 resources/js/behaviours.js                    |  43 +++++
 resources/js/bulk-selection.js                |  51 ++++++
 resources/js/reader.js                        |  20 +-
 .../views/components/dropdown-link.blade.php  |   1 -
 resources/views/components/dropdown.blade.php |  35 ----
 resources/views/components/modal.blade.php    |  78 --------
 resources/views/install/layout.blade.php      |   2 +-
 resources/views/items/index.blade.php         |  21 +--
 resources/views/items/partials/row.blade.php  |   2 +-
 resources/views/items/show.blade.php          |  33 ++--
 resources/views/partials/pwa.blade.php        |   2 +-
 resources/views/save/done.blade.php           |  18 +-
 resources/views/settings/edit.blade.php       |   8 +-
 resources/views/tags/index.blade.php          |   8 +-
 tests/Feature/ContentSecurityPolicyTest.php   | 172 ++++++++++++++++++
 tests/Feature/Items/ReaderTest.php            |   5 +-
 23 files changed, 474 insertions(+), 179 deletions(-)
 create mode 100644 app/Http/Middleware/ContentSecurityPolicy.php
 create mode 100644 resources/js/behaviours.js
 create mode 100644 resources/js/bulk-selection.js
 delete mode 100644 resources/views/components/dropdown-link.blade.php
 delete mode 100644 resources/views/components/dropdown.blade.php
 delete mode 100644 resources/views/components/modal.blade.php
 create mode 100644 tests/Feature/ContentSecurityPolicyTest.php

diff --git a/README.md b/README.md
index d6ce812..f17ced6 100644
--- a/README.md
+++ b/README.md
@@ -252,6 +252,15 @@ hostile:
   checked by content, not by the server's `Content-Type`, and only raster
   formats are stored; SVG stays remote. Images are served only to the
   logged-in owner, with `nosniff`.
+- **Content-Security-Policy** on every page, as a second lock behind the
+  sanitiser: scripts only from this origin or carrying the per-request
+  nonce, no `unsafe-inline` or `unsafe-eval`, no inline event handlers or
+  style attributes, nothing framing the app, forms posting only here.
+  Alpine is its CSP build, so components live in `resources/js` rather
+  than inline in the markup; add behaviour there (or as a `data-*` hook in
+  `resources/js/behaviours.js`), never as an `onclick` attribute. Images
+  may come from any `https:` host, because undownloaded article images
+  stay remote. `npm run dev` is allowed automatically while it runs.
 - The bookmarklet and share target are `GET` requests, because that is
   how they arrive. A third-party page could link you to `/save?url=…`; the
   worst that does is add a link to your own list.
diff --git a/app/Http/Middleware/ContentSecurityPolicy.php b/app/Http/Middleware/ContentSecurityPolicy.php
new file mode 100644
index 0000000..40c2d05
--- /dev/null
+++ b/app/Http/Middleware/ContentSecurityPolicy.php
@@ -0,0 +1,90 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Vite;
+use Symfony\Component\HttpFoundation\Response;
+
+/**
+ * A strict Content-Security-Policy on every web page.
+ *
+ * The reader prints third-party article HTML unescaped. The sanitiser is
+ * what keeps scripts out of it; this is the second lock: even if markup
+ * slipped past the sanitiser, the browser would refuse to run inline
+ * scripts, inline event handlers, javascript: URLs or code from any other
+ * origin.
+ *
+ *  - Scripts: this origin, plus inline <script> tags carrying the
+ *    per-request nonce (Vite::useCspNonce() stamps it on the built assets
+ *    too). No 'unsafe-inline', no 'unsafe-eval': Alpine is the CSP build.
+ *  - Styles and fonts: this origin and the Bunny Fonts stylesheet. No
+ *    inline style attributes.
+ *  - Images: this origin, plus any https host, because article images that
+ *    weren't downloaded keep their remote src.
+ *  - Nothing may frame the app from elsewhere, and forms only post here.
+ *
+ * Responses that already carry a policy (stored article images send
+ * "default-src 'none'") keep their own.
+ */
+class ContentSecurityPolicy
+{
+    public const FONT_HOST = 'https://fonts.bunny.net';
+
+    /**
+     * Handle an incoming request.
+     *
+     * @param  Closure(Request): (Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        $nonce = Vite::useCspNonce();
+
+        $response = $next($request);
+
+        if (! $response->headers->has('Content-Security-Policy')) {
+            $response->headers->set('Content-Security-Policy', $this->policy($nonce));
+        }
+
+        return $response;
+    }
+
+    protected function policy(string $nonce): string
+    {
+        $script = ["'self'", "'nonce-{$nonce}'"];
+        $style = ["'self'", self::FONT_HOST];
+        $connect = ["'self'"];
+
+        // `npm run dev`: assets come from the Vite dev server, which also
+        // injects CSS through <style> tags and talks over a websocket.
+        if (Vite::isRunningHot()) {
+            $hot = rtrim(trim((string) file_get_contents(Vite::hotFile())), '/');
+            $socket = (string) preg_replace('#^http#', 'ws', $hot);
+
+            $script[] = $hot;
+            $style[] = $hot;
+            $style[] = "'unsafe-inline'";
+            $connect[] = $hot;
+            $connect[] = $socket;
+        }
+
+        $directives = [
+            'default-src' => ["'none'"],
+            'script-src' => $script,
+            'style-src' => $style,
+            'font-src' => ["'self'", self::FONT_HOST],
+            'img-src' => ["'self'", 'https:', 'data:'],
+            'connect-src' => $connect,
+            'manifest-src' => ["'self'"],
+            'worker-src' => ["'self'"],
+            'form-action' => ["'self'"],
+            'frame-ancestors' => ["'self'"],
+            'base-uri' => ["'none'"],
+        ];
+
+        return collect($directives)
+            ->map(fn (array $sources, string $directive): string => $directive.' '.implode(' ', $sources))
+            ->implode('; ');
+    }
+}
diff --git a/bootstrap/app.php b/bootstrap/app.php
index 3b46fac..0269e5d 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Middleware\ContentSecurityPolicy;
 use App\Http\Middleware\EnsureNotInstalled;
 use App\Http\Middleware\SecurityHeaders;
 use Illuminate\Foundation\Application;
@@ -18,12 +19,12 @@
             // The web installer runs before the app is usable — the
             // database (and with it the session store) may not exist yet —
             // so its routes deliberately skip the 'web' middleware group.
-            Route::middleware([EnsureNotInstalled::class, SecurityHeaders::class])
+            Route::middleware([EnsureNotInstalled::class, SecurityHeaders::class, ContentSecurityPolicy::class])
                 ->group(base_path('routes/install.php'));
         },
     )
     ->withMiddleware(function (Middleware $middleware): void {
-        $middleware->web(append: SecurityHeaders::class);
+        $middleware->web(append: [SecurityHeaders::class, ContentSecurityPolicy::class]);
         $middleware->api(append: SecurityHeaders::class);
     })
     ->withExceptions(function (Exceptions $exceptions): void {
diff --git a/package-lock.json b/package-lock.json
index 02e2d3c..bd39c31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,15 +5,25 @@
     "packages": {
         "": {
             "devDependencies": {
+                "@alpinejs/csp": "^3.17.4",
                 "@tailwindcss/forms": "^0.5.11",
                 "@tailwindcss/vite": "^4.3.3",
-                "alpinejs": "^3.16.2",
                 "concurrently": "^10.0.5",
                 "laravel-vite-plugin": "^3.2",
                 "tailwindcss": "^4.3.3",
                 "vite": "^8.2.2"
             }
         },
+        "node_modules/@alpinejs/csp": {
+            "version": "3.17.4",
+            "resolved": "https://registry.npmjs.org/@alpinejs/csp/-/csp-3.17.4.tgz",
+            "integrity": "sha512-SlRXmqO6kYhnxlg+99etmuzJtE9Lk4QbKjBHqerXzaMflJqoJXdz/SI3IvHJGZ/vRVyC3bR0SSBz40oY7goBeg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vue/reactivity": "~3.5.40"
+            }
+        },
         "node_modules/@jridgewell/gen-mapping": {
             "version": "0.3.13",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -638,16 +648,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/alpinejs": {
-            "version": "3.17.4",
-            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.17.4.tgz",
-            "integrity": "sha512-N2gsr+58XVUt7OAPKnUGiKPDtkd+xbSGTae8C8IJxeRdkkhBJPIautkJ+qcwb7lcjJ/QK3/CPVIbN20JPvtK7A==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "@vue/reactivity": "~3.5.40"
-            }
-        },
         "node_modules/ansi-regex": {
             "version": "6.4.0",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.4.0.tgz",
diff --git a/package.json b/package.json
index add6229..0ca2c87 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,9 @@
         "dev": "vite"
     },
     "devDependencies": {
+        "@alpinejs/csp": "^3.17.4",
         "@tailwindcss/forms": "^0.5.11",
         "@tailwindcss/vite": "^4.3.3",
-        "alpinejs": "^3.16.2",
         "concurrently": "^10.0.5",
         "laravel-vite-plugin": "^3.2",
         "tailwindcss": "^4.3.3",
diff --git a/resources/css/app.css b/resources/css/app.css
index 4789264..fc86506 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -197,3 +197,18 @@
     padding: 0.4em 0.6em;
     text-align: left;
 }
+
+/* Reader controls that follow the theme (no inline style attributes: the CSP forbids them). */
+.reader-border {
+    border-color: var(--reader-rule);
+}
+
+.reader-swatch-sepia {
+    background: #f6efe0;
+    color: #4a3b2a;
+}
+
+.reader-swatch-dark {
+    background: #121417;
+    color: #d6d9de;
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index 590035b..6a7176f 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,8 +1,17 @@
-import Alpine from 'alpinejs';
+// The CSP build of Alpine: it evaluates directive expressions with its own
+// parser instead of new Function(), so the Content-Security-Policy needs
+// no 'unsafe-eval'. Anything with real logic lives in a registered
+// component below rather than inline in the markup.
+import Alpine from '@alpinejs/csp';
+import behaviours from './behaviours';
+import bulkSelection from './bulk-selection';
 import reader from './reader';
 
 window.Alpine = Alpine;
 
+Alpine.data('bulkSelection', bulkSelection);
 Alpine.data('reader', reader);
 
+behaviours(document);
+
 Alpine.start();
diff --git a/resources/js/behaviours.js b/resources/js/behaviours.js
new file mode 100644
index 0000000..704b3ad
--- /dev/null
+++ b/resources/js/behaviours.js
@@ -0,0 +1,43 @@
+/**
+ * Small page behaviours that used to be inline onclick/onsubmit/onchange
+ * attributes, which the Content-Security-Policy blocks. Each is opted into
+ * with a data attribute and handled by one delegated listener.
+ *
+ *   <form data-confirm="Delete this?">       ask before submitting
+ *   <select data-autosubmit>                 submit the form on change
+ *   <input data-select-on-click>             select the text when clicked
+ *   <a data-bookmarklet-hint="Drag me…">     explain instead of navigating
+ */
+export default function behaviours(root) {
+    root.addEventListener('submit', (event) => {
+        const form = event.target;
+
+        if (form instanceof HTMLFormElement && form.dataset.confirm && !window.confirm(form.dataset.confirm)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }, true);
+
+    root.addEventListener('change', (event) => {
+        const field = event.target;
+
+        if (field instanceof HTMLSelectElement && field.hasAttribute('data-autosubmit') && field.form) {
+            field.form.requestSubmit();
+        }
+    });
+
+    root.addEventListener('click', (event) => {
+        const target = event.target instanceof Element ? event.target : null;
+
+        const selectable = target?.closest('[data-select-on-click]');
+        if (selectable instanceof HTMLInputElement || selectable instanceof HTMLTextAreaElement) {
+            selectable.select();
+        }
+
+        const bookmarklet = target?.closest('[data-bookmarklet-hint]');
+        if (bookmarklet instanceof HTMLElement) {
+            event.preventDefault();
+            window.alert(bookmarklet.dataset.bookmarkletHint);
+        }
+    });
+}
diff --git a/resources/js/bulk-selection.js b/resources/js/bulk-selection.js
new file mode 100644
index 0000000..531e384
--- /dev/null
+++ b/resources/js/bulk-selection.js
@@ -0,0 +1,51 @@
+/**
+ * Ticking items in a list and applying a bulk action. The item IDs on the
+ * page and the delete confirmation come in as data attributes on the
+ * component's root element:
+ *
+ *   <div x-data="bulkSelection" data-ids='["1","2"]' data-confirm-delete="…">
+ *
+ * IDs are strings because checkbox values are.
+ */
+export default () => ({
+    selected: [],
+    ids: [],
+    action: '',
+    confirmDelete: '',
+
+    init() {
+        try {
+            this.ids = JSON.parse(this.$el.dataset.ids || '[]').map(String);
+        } catch {
+            this.ids = [];
+        }
+
+        this.confirmDelete = this.$el.dataset.confirmDelete || 'Delete the selected items?';
+    },
+
+    get all() {
+        return this.ids.length > 0 && this.selected.length === this.ids.length;
+    },
+
+    get count() {
+        return this.selected.length;
+    },
+
+    get countLabel() {
+        return `${this.selected.length} selected`;
+    },
+
+    get tagging() {
+        return this.action === 'tag';
+    },
+
+    toggleAll() {
+        this.selected = this.all ? [] : [...this.ids];
+    },
+
+    submit(event) {
+        if (this.action === 'delete' && !window.confirm(this.confirmDelete)) {
+            event.preventDefault();
+        }
+    },
+});
diff --git a/resources/js/reader.js b/resources/js/reader.js
index d2132a0..d550886 100644
--- a/resources/js/reader.js
+++ b/resources/js/reader.js
@@ -27,15 +27,25 @@ export function applyPreferences(prefs, root = document.documentElement) {
     root.style.setProperty('--reader-size', `${prefs.size}px`);
 }
 
-export default (config) => ({
+/**
+ * Registered as Alpine.data('reader'). The progress endpoint and the saved
+ * position come in as data attributes on the root element (the CSP build
+ * can't take a config object built in the markup):
+ *
+ *   <body x-data="reader" data-progress-url="…" data-progress="0.42">
+ */
+export default () => ({
     prefs: loadPreferences(),
     panel: false,
-    progressUrl: config.progressUrl,
-    savedProgress: Number(config.progress) || 0,
+    progressUrl: '',
+    savedProgress: 0,
     lastSent: null,
     timer: null,
 
     init() {
+        this.progressUrl = this.$el.dataset.progressUrl || '';
+        this.savedProgress = Number(this.$el.dataset.progress) || 0;
+
         applyPreferences(this.prefs);
 
         this.$watch('prefs', (prefs) => {
@@ -89,6 +99,10 @@ export default (config) => ({
     },
 
     send(leaving) {
+        if (!this.progressUrl) {
+            return;
+        }
+
         const progress = Math.round(this.progress() * 10000) / 10000;
 
         if (this.lastSent !== null && Math.abs(progress - this.lastSent) < 0.005) {
diff --git a/resources/views/components/dropdown-link.blade.php b/resources/views/components/dropdown-link.blade.php
deleted file mode 100644
index 38ba97f..0000000
--- a/resources/views/components/dropdown-link.blade.php
+++ /dev/null
@@ -1 +0,0 @@
-<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-slate-700 hover:bg-slate-100 focus:outline-none focus:bg-slate-100 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
deleted file mode 100644
index a46f7c8..0000000
--- a/resources/views/components/dropdown.blade.php
+++ /dev/null
@@ -1,35 +0,0 @@
-@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white'])
-
-@php
-$alignmentClasses = match ($align) {
-    'left' => 'ltr:origin-top-left rtl:origin-top-right start-0',
-    'top' => 'origin-top',
-    default => 'ltr:origin-top-right rtl:origin-top-left end-0',
-};
-
-$width = match ($width) {
-    '48' => 'w-48',
-    default => $width,
-};
-@endphp
-
-<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
-    <div @click="open = ! open">
-        {{ $trigger }}
-    </div>
-
-    <div x-show="open"
-            x-transition:enter="transition ease-out duration-200"
-            x-transition:enter-start="opacity-0 scale-95"
-            x-transition:enter-end="opacity-100 scale-100"
-            x-transition:leave="transition ease-in duration-75"
-            x-transition:leave-start="opacity-100 scale-100"
-            x-transition:leave-end="opacity-0 scale-95"
-            class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
-            style="display: none;"
-            @click="open = false">
-        <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
-            {{ $content }}
-        </div>
-    </div>
-</div>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
deleted file mode 100644
index b919fff..0000000
--- a/resources/views/components/modal.blade.php
+++ /dev/null
@@ -1,78 +0,0 @@
-@props([
-    'name',
-    'show' => false,
-    'maxWidth' => '2xl'
-])
-
-@php
-$maxWidth = [
-    'sm' => 'sm:max-w-sm',
-    'md' => 'sm:max-w-md',
-    'lg' => 'sm:max-w-lg',
-    'xl' => 'sm:max-w-xl',
-    '2xl' => 'sm:max-w-2xl',
-][$maxWidth];
-@endphp
-
-<div
-    x-data="{
-        show: @js($show),
-        focusables() {
-            // All focusable element types...
-            let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
-            return [...$el.querySelectorAll(selector)]
-                // All non-disabled elements...
-                .filter(el => ! el.hasAttribute('disabled'))
-        },
-        firstFocusable() { return this.focusables()[0] },
-        lastFocusable() { return this.focusables().slice(-1)[0] },
-        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
-        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
-        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
-        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
-    }"
-    x-init="$watch('show', value => {
-        if (value) {
-            document.body.classList.add('overflow-y-hidden');
-            {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
-        } else {
-            document.body.classList.remove('overflow-y-hidden');
-        }
-    })"
-    x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
-    x-on:close-modal.window="$event.detail == '{{ $name }}' ? show = false : null"
-    x-on:close.stop="show = false"
-    x-on:keydown.escape.window="show = false"
-    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
-    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
-    x-show="show"
-    class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
-    style="display: {{ $show ? 'block' : 'none' }};"
->
-    <div
-        x-show="show"
-        class="fixed inset-0 transform transition-all"
-        x-on:click="show = false"
-        x-transition:enter="ease-out duration-300"
-        x-transition:enter-start="opacity-0"
-        x-transition:enter-end="opacity-100"
-        x-transition:leave="ease-in duration-200"
-        x-transition:leave-start="opacity-100"
-        x-transition:leave-end="opacity-0"
-    >
-        <div class="absolute inset-0 bg-slate-500 opacity-75"></div>
-    </div>
-
-    <div
-        x-show="show"
-        class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
-        x-transition:enter="ease-out duration-300"
-        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-        x-transition:leave="ease-in duration-200"
-        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-    >
-        {{ $slot }}
-    </div>
-</div>
diff --git a/resources/views/install/layout.blade.php b/resources/views/install/layout.blade.php
index 856f9ca..f7b67da 100644
--- a/resources/views/install/layout.blade.php
+++ b/resources/views/install/layout.blade.php
@@ -10,7 +10,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="robots" content="noindex">
     <title>Install Docket</title>
-    <style>
+    <style nonce="{{ \Illuminate\Support\Facades\Vite::cspNonce() }}">
         * { box-sizing: border-box; margin: 0; padding: 0; }
         body {
             font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
diff --git a/resources/views/items/index.blade.php b/resources/views/items/index.blade.php
index 2d52ef5..bedf08d 100644
--- a/resources/views/items/index.blade.php
+++ b/resources/views/items/index.blade.php
@@ -25,7 +25,7 @@ class="flex flex-wrap items-center gap-2">
                     class="w-56 rounded-md border-slate-300 text-sm shadow-sm focus:border-teal-500 focus:ring-teal-500">
 
                 <label for="sort" class="sr-only">{{ __('Sort') }}</label>
-                <select id="sort" name="sort" onchange="this.form.submit()"
+                <select id="sort" name="sort" data-autosubmit
                     class="rounded-md border-slate-300 text-sm shadow-sm focus:border-teal-500 focus:ring-teal-500">
                     @if ($q !== '')
                         <option value="" @selected($sort === 'relevance')>{{ __('Most relevant') }}</option>
@@ -79,17 +79,12 @@ class="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500
                     @endif
                 </div>
             @else
-                <div x-data="{
-                        selected: [],
-                        ids: @js($items->pluck('id')->map(fn ($id) => (string) $id)->values()),
-                        get all() { return this.selected.length === this.ids.length },
-                        toggleAll() { this.selected = this.all ? [] : [...this.ids] },
-                    }">
+                <div x-data="bulkSelection"
+                    data-ids="{{ $items->pluck('id')->map(fn ($id) => (string) $id)->values()->toJson() }}"
+                    data-confirm-delete="{{ __('Delete the selected items? This cannot be undone.') }}">
 
                     {{-- Bulk actions: the checkboxes below join this form via form="bulk". --}}
-                    <form id="bulk" method="post" action="{{ route('items.bulk') }}"
-                        x-data="{ action: '' }"
-                        @submit="if (action === 'delete' && ! confirm(@js(__('Delete the selected items? This cannot be undone.')))) $event.preventDefault()"
+                    <form id="bulk" method="post" action="{{ route('items.bulk') }}" @submit="submit($event)"
                         class="mb-3 flex flex-wrap items-center gap-2 text-sm">
                         @csrf
                         <label class="flex items-center gap-2 text-slate-600">
@@ -98,9 +93,9 @@ class="mb-3 flex flex-wrap items-center gap-2 text-sm">
                             {{ __('Select all') }}
                         </label>
 
-                        <template x-if="selected.length > 0">
+                        <template x-if="count > 0">
                             <div class="flex flex-wrap items-center gap-2">
-                                <span class="text-slate-500" x-text="selected.length + ' selected'"></span>
+                                <span class="text-slate-500" x-text="countLabel"></span>
                                 <label for="bulk-action" class="sr-only">{{ __('Action') }}</label>
                                 <select id="bulk-action" name="action" x-model="action" required
                                     class="rounded-md border-slate-300 py-1 text-sm shadow-sm focus:border-teal-500 focus:ring-teal-500">
@@ -109,7 +104,7 @@ class="rounded-md border-slate-300 py-1 text-sm shadow-sm focus:border-teal-500
                                         <option value="{{ $value }}">{{ __($label) }}</option>
                                     @endforeach
                                 </select>
-                                <input x-show="action === 'tag'" name="tags" type="text" placeholder="{{ __('Tags to add') }}"
+                                <input x-show="tagging" name="tags" type="text" placeholder="{{ __('Tags to add') }}"
                                     class="rounded-md border-slate-300 py-1 text-sm shadow-sm focus:border-teal-500 focus:ring-teal-500">
                                 <x-secondary-button type="submit" class="py-1">{{ __('Apply') }}</x-secondary-button>
                             </div>
diff --git a/resources/views/items/partials/row.blade.php b/resources/views/items/partials/row.blade.php
index e4a022e..b7fc64e 100644
--- a/resources/views/items/partials/row.blade.php
+++ b/resources/views/items/partials/row.blade.php
@@ -94,7 +94,7 @@ class="rounded-full bg-teal-50 px-2 py-0.5 text-xs font-medium text-teal-800 hov
                 class="text-slate-600 hover:text-teal-800">{{ __('Original') }} ↗</a>
 
             <form method="post" action="{{ route('items.destroy', $item) }}"
-                onsubmit="return confirm(@js(__('Delete this item? This cannot be undone.')))">
+                data-confirm="{{ __('Delete this item? This cannot be undone.') }}">
                 @csrf
                 @method('delete')
                 <button type="submit" class="text-slate-500 hover:text-red-700">{{ __('Delete') }}</button>
diff --git a/resources/views/items/show.blade.php b/resources/views/items/show.blade.php
index 249d5f9..1aa1730 100644
--- a/resources/views/items/show.blade.php
+++ b/resources/views/items/show.blade.php
@@ -15,7 +15,7 @@
     <title>{{ $item->displayTitle() }} — {{ config('app.name', 'Docket') }}</title>
 
     {{-- Appearance before first paint, so a dark-theme reader never flashes white. Mirrors resources/js/reader.js. --}}
-    <script>
+    <script nonce="{{ \Illuminate\Support\Facades\Vite::cspNonce() }}">
         (function () {
             var p = { theme: 'light', family: 'serif', size: 20 };
             try { Object.assign(p, JSON.parse(localStorage.getItem('docket.reader') || '{}')); } catch (e) {}
@@ -34,8 +34,8 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
 
-<body class="min-h-full antialiased"
-    x-data="reader({ progressUrl: @js(route('items.progress', $item)), progress: {{ (float) $item->read_progress }} })">
+<body class="min-h-full antialiased" x-data="reader"
+    data-progress-url="{{ route('items.progress', $item) }}" data-progress="{{ (float) $item->read_progress }}">
 
     {{-- Top bar --}}
     <header class="reader-bar sticky top-0 z-30 border-b font-sans backdrop-blur">
@@ -83,18 +83,18 @@ class="reader-panel absolute right-0 mt-2 w-64 space-y-4 rounded-lg border p-4 s
                         <div>
                             <p class="reader-muted mb-2 text-xs font-semibold uppercase tracking-wide">{{ __('Text size') }}</p>
                             <div class="flex items-center justify-between">
-                                <button type="button" @click="setSize(-1)" class="rounded-md border px-3 py-1 text-sm" style="border-color: var(--reader-rule)">A−</button>
+                                <button type="button" @click="setSize(-1)" class="reader-border rounded-md border px-3 py-1 text-sm">A−</button>
                                 <span class="reader-muted text-sm" x-text="prefs.size + 'px'"></span>
-                                <button type="button" @click="setSize(1)" class="rounded-md border px-3 py-1 text-lg" style="border-color: var(--reader-rule)">A+</button>
+                                <button type="button" @click="setSize(1)" class="reader-border rounded-md border px-3 py-1 text-lg">A+</button>
                             </div>
                         </div>
                         <div>
                             <p class="reader-muted mb-2 text-xs font-semibold uppercase tracking-wide">{{ __('Typeface') }}</p>
                             <div class="grid grid-cols-2 gap-2">
-                                <button type="button" @click="prefs.family = 'serif'" class="rounded-md border px-3 py-1.5 font-serif text-sm"
-                                    :class="prefs.family === 'serif' && 'ring-2 ring-teal-600'" style="border-color: var(--reader-rule)">{{ __('Serif') }}</button>
-                                <button type="button" @click="prefs.family = 'sans'" class="rounded-md border px-3 py-1.5 font-sans text-sm"
-                                    :class="prefs.family === 'sans' && 'ring-2 ring-teal-600'" style="border-color: var(--reader-rule)">{{ __('Sans') }}</button>
+                                <button type="button" @click="prefs.family = 'serif'" class="reader-border rounded-md border px-3 py-1.5 font-serif text-sm"
+                                    :class="prefs.family === 'serif' && 'ring-2 ring-teal-600'">{{ __('Serif') }}</button>
+                                <button type="button" @click="prefs.family = 'sans'" class="reader-border rounded-md border px-3 py-1.5 font-sans text-sm"
+                                    :class="prefs.family === 'sans' && 'ring-2 ring-teal-600'">{{ __('Sans') }}</button>
                             </div>
                         </div>
                         <div>
@@ -102,10 +102,10 @@ class="reader-panel absolute right-0 mt-2 w-64 space-y-4 rounded-lg border p-4 s
                             <div class="grid grid-cols-3 gap-2">
                                 <button type="button" @click="prefs.theme = 'light'" class="rounded-md border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-900"
                                     :class="prefs.theme === 'light' && 'ring-2 ring-teal-600'">{{ __('Light') }}</button>
-                                <button type="button" @click="prefs.theme = 'sepia'" class="rounded-md border border-amber-200 px-2 py-1.5 text-sm"
-                                    style="background:#f6efe0;color:#4a3b2a" :class="prefs.theme === 'sepia' && 'ring-2 ring-teal-600'">{{ __('Sepia') }}</button>
-                                <button type="button" @click="prefs.theme = 'dark'" class="rounded-md border border-slate-700 px-2 py-1.5 text-sm"
-                                    style="background:#121417;color:#d6d9de" :class="prefs.theme === 'dark' && 'ring-2 ring-teal-600'">{{ __('Dark') }}</button>
+                                <button type="button" @click="prefs.theme = 'sepia'" class="reader-swatch-sepia rounded-md border border-amber-200 px-2 py-1.5 text-sm"
+                                    :class="prefs.theme === 'sepia' && 'ring-2 ring-teal-600'">{{ __('Sepia') }}</button>
+                                <button type="button" @click="prefs.theme = 'dark'" class="reader-swatch-dark rounded-md border border-slate-700 px-2 py-1.5 text-sm"
+                                    :class="prefs.theme === 'dark' && 'ring-2 ring-teal-600'">{{ __('Dark') }}</button>
                             </div>
                         </div>
                     </div>
@@ -142,8 +142,7 @@ class="reader-panel absolute right-0 mt-2 w-64 space-y-4 rounded-lg border p-4 s
                 @if ($item->tags->isNotEmpty())
                     <p class="mt-3 flex flex-wrap gap-1.5 font-sans">
                         @foreach ($item->tags as $tag)
-                            <a href="{{ route('items.tagged', $tag) }}" class="reader-muted rounded-full border px-2 py-0.5 text-xs hover:opacity-80"
-                                style="border-color: var(--reader-rule)">{{ $tag->name }}</a>
+                            <a href="{{ route('items.tagged', $tag) }}" class="reader-muted reader-border rounded-full border px-2 py-0.5 text-xs hover:opacity-80">{{ $tag->name }}</a>
                         @endforeach
                     </p>
                 @endif
@@ -178,7 +177,7 @@ class="font-semibold underline underline-offset-2">{{ __('Open the original') }}
                 </div>
             @endif
 
-            <footer class="mt-16 border-t pt-6 font-sans text-sm" style="border-color: var(--reader-rule)">
+            <footer class="reader-border mt-16 border-t pt-6 font-sans text-sm">
                 <p class="reader-muted">
                     {{ __('Saved :date.', ['date' => $item->added_at?->format('j F Y')]) }}
                     <a href="{{ $item->originalUrl() }}" target="_blank" rel="noopener noreferrer" class="break-all underline underline-offset-2">{{ $item->originalUrl() }}</a>
@@ -203,7 +202,7 @@ class="mt-1 block w-full rounded-md border-slate-300 text-slate-900 shadow-sm fo
                     </form>
 
                     <form method="post" action="{{ route('items.destroy', $item) }}" class="mt-6"
-                        onsubmit="return confirm(@js(__('Delete this item? This cannot be undone.')))">
+                        data-confirm="{{ __('Delete this item? This cannot be undone.') }}">
                         @csrf
                         @method('delete')
                         <button type="submit" class="text-red-700 underline underline-offset-2">{{ __('Delete this item') }}</button>
diff --git a/resources/views/partials/pwa.blade.php b/resources/views/partials/pwa.blade.php
index 0452684..8b9e4ef 100644
--- a/resources/views/partials/pwa.blade.php
+++ b/resources/views/partials/pwa.blade.php
@@ -4,7 +4,7 @@
 <link rel="icon" href="/icons/icon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
 <meta name="apple-mobile-web-app-capable" content="yes">
-<script>
+<script nonce="{{ \Illuminate\Support\Facades\Vite::cspNonce() }}">
     if ('serviceWorker' in navigator) {
         window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js'));
     }
diff --git a/resources/views/save/done.blade.php b/resources/views/save/done.blade.php
index 5797bc9..23691ef 100644
--- a/resources/views/save/done.blade.php
+++ b/resources/views/save/done.blade.php
@@ -28,17 +28,25 @@
 
         <div class="mt-5 flex justify-center gap-4 text-sm">
             <a href="{{ route('items.index') }}" target="_blank" class="font-medium text-teal-800 hover:underline">{{ __('Open Docket') }}</a>
-            <button type="button" onclick="window.opener ? window.close() : history.back()" class="text-slate-600 hover:underline">{{ __('Close') }}</button>
+            <button type="button" id="close-window" class="text-slate-600 hover:underline">{{ __('Close') }}</button>
         </div>
     </main>
 
-    @unless ($error)
-        <script>
+    {{-- Inline (with the CSP nonce) rather than app.js: this popup loads no Alpine. --}}
+    <script nonce="{{ \Illuminate\Support\Facades\Vite::cspNonce() }}">
+        document.getElementById('close-window').addEventListener('click', function () {
+            if (window.opener) {
+                window.close();
+            } else {
+                history.back();
+            }
+        });
+        @unless ($error)
             if (window.opener) {
                 setTimeout(function () { window.close(); }, 1500);
             }
-        </script>
-    @endunless
+        @endunless
+    </script>
 </body>
 
 </html>
diff --git a/resources/views/settings/edit.blade.php b/resources/views/settings/edit.blade.php
index c9b0e08..746d78e 100644
--- a/resources/views/settings/edit.blade.php
+++ b/resources/views/settings/edit.blade.php
@@ -19,7 +19,7 @@
                             </p>
                         </header>
                         <div class="mt-4 flex flex-wrap items-center gap-4">
-                            <a href="{{ $bookmarklet }}" onclick="event.preventDefault(); alert(@js(__('Drag this button to your bookmarks bar rather than clicking it here.')))"
+                            <a href="{{ $bookmarklet }}" data-bookmarklet-hint="{{ __('Drag this button to your bookmarks bar rather than clicking it here.') }}"
                                 class="inline-flex items-center gap-2 rounded-md bg-teal-700 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-800">
                                 <x-application-logo class="h-5 w-5" /> {{ __('Save to Docket') }}
                             </a>
@@ -28,7 +28,7 @@ class="inline-flex items-center gap-2 rounded-md bg-teal-700 px-4 py-2 text-sm f
                         <details class="mt-3 text-sm text-slate-600">
                             <summary class="cursor-pointer">{{ __('Copy the code instead') }}</summary>
                             <p class="mt-2">{{ __('Create a bookmark by hand and paste this as its URL:') }}</p>
-                            <textarea readonly rows="4" onclick="this.select()"
+                            <textarea readonly rows="4" data-select-on-click
                                 class="mt-2 block w-full rounded-md border-slate-300 font-mono text-xs shadow-sm">{{ $bookmarklet }}</textarea>
                         </details>
                     </section>
@@ -53,7 +53,7 @@ class="mt-2 block w-full rounded-md border-slate-300 font-mono text-xs shadow-sm
                         @if ($plainToken)
                             <div class="mt-4 rounded-md border border-amber-200 bg-amber-50 p-4">
                                 <p class="text-sm font-medium text-amber-900">{{ __('Your new token. Copy it now: it will not be shown again.') }}</p>
-                                <input type="text" readonly value="{{ $plainToken }}" onclick="this.select()"
+                                <input type="text" readonly value="{{ $plainToken }}" data-select-on-click
                                     class="mt-2 block w-full rounded-md border-amber-300 bg-white font-mono text-sm shadow-sm">
                             </div>
                         @endif
@@ -81,7 +81,7 @@ class="mt-2 block w-full rounded-md border-amber-300 bg-white font-mono text-sm
                                             </span>
                                         </div>
                                         <form method="post" action="{{ route('tokens.destroy', $token->id) }}"
-                                            onsubmit="return confirm(@js(__('Revoke this token? Anything using it will stop working.')))">
+                                            data-confirm="{{ __('Revoke this token? Anything using it will stop working.') }}">
                                             @csrf
                                             @method('delete')
                                             <button type="submit" class="text-slate-500 hover:text-red-700">{{ __('Revoke') }}</button>
diff --git a/resources/views/tags/index.blade.php b/resources/views/tags/index.blade.php
index 69f921b..f3da22d 100644
--- a/resources/views/tags/index.blade.php
+++ b/resources/views/tags/index.blade.php
@@ -30,10 +30,12 @@ class="block w-full rounded-md border-slate-300 text-sm shadow-sm focus:border-t
                             </form>
 
                             <div class="flex items-center gap-4 text-sm">
-                                <button type="button" @click="editing = ! editing" class="text-slate-600 hover:text-teal-800"
-                                    x-text="editing ? @js(__('Cancel')) : @js(__('Rename'))">{{ __('Rename') }}</button>
+                                <button type="button" @click="editing = ! editing" class="text-slate-600 hover:text-teal-800">
+                                    <span x-show="! editing">{{ __('Rename') }}</span>
+                                    <span x-show="editing" x-cloak>{{ __('Cancel') }}</span>
+                                </button>
                                 <form method="post" action="{{ route('tags.destroy', $tag) }}"
-                                    onsubmit="return confirm(@js(__('Delete this tag? The items stay; only the tag is removed.')))">
+                                    data-confirm="{{ __('Delete this tag? The items stay; only the tag is removed.') }}">
                                     @csrf
                                     @method('delete')
                                     <button type="submit" class="text-slate-500 hover:text-red-700">{{ __('Delete') }}</button>
diff --git a/tests/Feature/ContentSecurityPolicyTest.php b/tests/Feature/ContentSecurityPolicyTest.php
new file mode 100644
index 0000000..faddbb6
--- /dev/null
+++ b/tests/Feature/ContentSecurityPolicyTest.php
@@ -0,0 +1,172 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Models\Item;
+use App\Models\Tag;
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\Queue;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\Vite;
+use Illuminate\Support\Str;
+use Illuminate\Testing\TestResponse;
+use Tests\TestCase;
+
+class ContentSecurityPolicyTest extends TestCase
+{
+    use RefreshDatabase;
+
+    private function policy(TestResponse $response): string
+    {
+        $policy = $response->headers->get('Content-Security-Policy');
+        $this->assertIsString($policy, 'No Content-Security-Policy header.');
+
+        return $policy;
+    }
+
+    private function nonce(TestResponse $response): string
+    {
+        $this->assertSame(1, preg_match("/'nonce-([^']+)'/", $this->policy($response), $match));
+
+        return $match[1];
+    }
+
+    /**
+     * @return array<string, string> directive => sources
+     */
+    private function directives(TestResponse $response): array
+    {
+        $directives = [];
+
+        foreach (explode(';', $this->policy($response)) as $directive) {
+            [$name, $sources] = array_pad(explode(' ', trim($directive), 2), 2, '');
+            $directives[$name] = $sources;
+        }
+
+        return $directives;
+    }
+
+    public function test_pages_send_a_strict_policy(): void
+    {
+        $directives = $this->directives($this->actingAs(User::factory()->create())->get('/'));
+
+        $this->assertSame("'none'", $directives['default-src']);
+        $this->assertStringStartsWith("'self' 'nonce-", $directives['script-src']);
+        $this->assertStringNotContainsString('unsafe-inline', $directives['script-src']);
+        $this->assertStringNotContainsString('unsafe-eval', $directives['script-src']);
+        $this->assertStringNotContainsString('unsafe-inline', $directives['style-src']);
+        $this->assertSame("'self'", $directives['form-action']);
+        $this->assertSame("'self'", $directives['frame-ancestors']);
+        $this->assertSame("'none'", $directives['base-uri']);
+        $this->assertSame("'self' https: data:", $directives['img-src']);
+    }
+
+    public function test_the_nonce_is_fresh_on_every_request_and_on_every_script(): void
+    {
+        $user = User::factory()->create();
+
+        $first = $this->actingAs($user)->get('/');
+        $second = $this->actingAs($user)->get('/');
+
+        $nonce = $this->nonce($first);
+        $this->assertNotSame($nonce, $this->nonce($second));
+        $this->assertGreaterThanOrEqual(16, strlen($nonce));
+
+        preg_match_all('/<script\b[^>]*>/i', (string) $first->getContent(), $scripts);
+        $this->assertNotEmpty($scripts[0]);
+
+        foreach ($scripts[0] as $tag) {
+            $this->assertStringContainsString('nonce="'.$nonce.'"', $tag, "Script without the nonce: {$tag}");
+        }
+    }
+
+    public function test_no_page_relies_on_inline_handlers_or_style_attributes(): void
+    {
+        // Either would be blocked by the policy, so a page using one is
+        // silently broken in the browser.
+        Queue::fake();
+        $user = User::factory()->create();
+        $tag = Tag::factory()->create(['name' => 'reading', 'slug' => 'reading']);
+        $item = Item::factory()->fetched()->favourite()->create();
+        $item->tags()->attach($tag);
+        Item::factory()->failed()->archived()->create();
+        $user->createToken('Shortcut');
+
+        $pages = [
+            '/', '/archive', '/favourites', '/search?q=the', '/tags', '/tags/reading',
+            "/items/{$item->id}", '/import', '/settings', '/tools', '/profile',
+            '/save?url='.urlencode('https://example.com/new'),
+        ];
+
+        foreach ($pages as $page) {
+            $this->assertCompliant($this->actingAs($user)->get($page), $page);
+        }
+
+        $this->app['auth']->forgetGuards();
+        $this->assertCompliant($this->get('/login'), '/login');
+    }
+
+    private function assertCompliant(TestResponse $response, string $page): void
+    {
+        $response->assertOk();
+        $html = (string) $response->getContent();
+        $nonce = $this->nonce($response);
+
+        $this->assertDoesNotMatchRegularExpression('/<[^>]*\son[a-z]+\s*=/i', $html, "{$page} has an inline event handler.");
+        $this->assertDoesNotMatchRegularExpression('/<[^>]*\sstyle\s*=/i', $html, "{$page} has an inline style attribute.");
+
+        preg_match_all('/<script\b[^>]*>/i', $html, $scripts);
+        foreach ($scripts[0] as $tag) {
+            $this->assertStringContainsString('nonce="'.$nonce.'"', $tag, "{$page} has a script without the nonce.");
+        }
+    }
+
+    public function test_the_installer_is_covered_and_its_styles_carry_the_nonce(): void
+    {
+        $envDir = sys_get_temp_dir().'/docket-csp-test-'.Str::random(8);
+        mkdir($envDir);
+        copy(base_path('.env.example'), $envDir.'/.env.example');
+        $this->app->useEnvironmentPath($envDir);
+
+        try {
+            $response = $this->get('/install')->assertOk();
+        } finally {
+            @unlink($envDir.'/.env.example');
+            @rmdir($envDir);
+        }
+
+        $this->assertStringContainsString('<style nonce="'.$this->nonce($response).'">', (string) $response->getContent());
+    }
+
+    public function test_stored_images_keep_their_own_tighter_policy(): void
+    {
+        Storage::fake(Item::DISK);
+        $item = Item::factory()->create();
+        $filename = sha1('x').'.png';
+        Storage::disk(Item::DISK)->put("items/{$item->id}/{$filename}", 'png');
+
+        $this->actingAs(User::factory()->create())
+            ->get(route('items.image', ['item' => $item, 'filename' => $filename]))
+            ->assertOk()
+            ->assertHeader('Content-Security-Policy', "default-src 'none'");
+    }
+
+    public function test_the_vite_dev_server_is_allowed_while_it_runs(): void
+    {
+        $hot = tempnam(sys_get_temp_dir(), 'hot');
+        file_put_contents($hot, 'http://localhost:5173');
+        Vite::useHotFile($hot);
+
+        try {
+            $directives = $this->directives($this->get('/login'));
+        } finally {
+            @unlink($hot);
+        }
+
+        $this->assertStringContainsString('http://localhost:5173', $directives['script-src']);
+        $this->assertStringContainsString('ws://localhost:5173', $directives['connect-src']);
+        $this->assertStringContainsString("'unsafe-inline'", $directives['style-src']);
+        $this->assertStringNotContainsString('unsafe-inline', $directives['script-src']);
+    }
+}
diff --git a/tests/Feature/Items/ReaderTest.php b/tests/Feature/Items/ReaderTest.php
index ce2c200..35b6d38 100644
--- a/tests/Feature/Items/ReaderTest.php
+++ b/tests/Feature/Items/ReaderTest.php
@@ -25,8 +25,9 @@ public function test_the_reader_shows_the_article_with_its_controls(): void
             ->assertSee('On reading')
             ->assertSee('<p>A quiet paragraph about reading.</p>', false)
             ->assertSee('href="https://example.com/on-reading"', false)
-            ->assertSee('reader({ progressUrl:', false)
-            ->assertSee('progress: 0.42', false)
+            ->assertSee('x-data="reader"', false)
+            ->assertSee('data-progress-url="'.route('items.progress', $item).'"', false)
+            ->assertSee('data-progress="0.42"', false)
             ->assertSee('Serif')
             ->assertSee('Sepia')
             ->assertSee('Dark');