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');