From 94d40f0c13e66a89ed60111d41cc077a7d808f57 Mon Sep 17 00:00:00 2001
From: 24c02 <163450896+24c02@users.noreply.github.com>
Date: Tue, 20 Oct 2026 16:51:14 -0400
Subject: [PATCH] enable strict CSP with nonces, eliminate all inline event
 handlers

- activate Content-Security-Policy with nonces for scripts/styles
- allowlist external domains: jsdelivr (fonts), googleapis (maps),
  hackclub CDNs (images), are-we-there-yet (iframe)
- no unsafe-inline for scripts in any environment
- dev: unsafe-inline for styles (vite HMR), vite host for scripts/ws

convert every onclick/onsubmit/onerror attribute in ERB and Phlex to
data-* attributes with delegated addEventListener handlers:

  views: backend/identities, backend/verifications, backend/static_pages,
    backend/verification_cases, backend/shared/_review_document_files,
    identities/new, developer_apps/show, docs/show, static_pages/slack_id,
    error pages, layouts/backend

  components: backup_codes_display, window, code_input, sidebar, banner

add nonce to all inline <script> blocks in layouts and the google
maps helper. zero inline event handlers remain in ERB or Phlex.
---
 app/components/backup_codes_display.rb        | 51 +++++++++++--------
 app/components/banner.rb                      |  1 -
 app/components/login/code_input.rb            | 12 ++++-
 app/components/sidebar.rb                     | 33 ++++++------
 app/components/window.rb                      | 13 ++++-
 app/frontend/entrypoints/application.js       | 28 ++++------
 app/frontend/entrypoints/backend.js           | 48 +++++++++++++++++
 app/frontend/js/alpine.js                     | 44 +++++++++++++++-
 app/frontend/js/confirm-dialog.js             | 20 ++++++++
 app/helpers/application_helper.rb             |  2 +-
 app/views/backend/identities/show.html.erb    |  4 +-
 .../shared/_review_document_files.html.erb    | 24 +++------
 app/views/backend/static_pages/index.html.erb | 11 ++--
 .../backend/verification_cases/show.html.erb  | 16 ++----
 app/views/backend/verifications/show.html.erb |  2 +-
 app/views/developer_apps/show.html.erb        |  8 +--
 app/views/docs/show.html.erb                  | 18 +++----
 .../doorkeeper/authorizations/new.html.erb    |  4 +-
 .../errors/internal_server_error.html.erb     |  1 -
 app/views/errors/not_found.html.erb           |  1 -
 .../errors/unprocessable_entity.html.erb      |  1 -
 app/views/identities/new.html.erb             | 42 +++++++++------
 app/views/identity_totps/show.html.erb        |  7 +--
 app/views/layouts/application.html.erb        |  2 +-
 app/views/layouts/backend.html.erb            |  6 +--
 app/views/layouts/docs.html.erb               |  2 +-
 app/views/layouts/errors.html.erb             |  2 +-
 app/views/layouts/logged_out.html.erb         |  2 +-
 app/views/layouts/minimal.html.erb            |  2 +-
 app/views/logins/email.html.erb               |  7 +--
 .../verifications/_document_form.html.erb     |  2 +-
 app/views/static_pages/slack_id.html.erb      | 15 +++++-
 .../initializers/content_security_policy.rb   | 47 ++++++++---------
 package.json                                  |  1 +
 yarn.lock                                     | 19 +++++++
 35 files changed, 319 insertions(+), 179 deletions(-)
 create mode 100644 app/frontend/js/confirm-dialog.js

diff --git a/app/components/backup_codes_display.rb b/app/components/backup_codes_display.rb
index 95ddb73d..c5aabb90 100644
--- a/app/components/backup_codes_display.rb
+++ b/app/components/backup_codes_display.rb
@@ -13,7 +13,7 @@ def initialize(codes:, warning_title:, warning_detail:, heading: nil, show_confi
   end
 
   def view_template(&block)
-    style do
+    style(nonce: helpers.content_security_policy_nonce) do
       raw safe <<~CSS
         @media print {
           @page {
@@ -111,7 +111,7 @@ def view_template(&block)
       CSS
     end
 
-    style do
+    style(nonce: helpers.content_security_policy_nonce) do
       raw safe ".print-only-banner { display: none; }"
     end
 
@@ -146,7 +146,10 @@ def view_template(&block)
       div(class: "backup-codes-actions") do
         button(
           type: "button",
-          onclick: safe("navigator.clipboard.writeText('#{@codes.join('\n')}').then(() => { this.textContent = '#{t('identity_backup_codes.copied')}'; setTimeout(() => this.textContent = '#{t('identity_backup_codes.copy_all')}', 2000); })")
+          data_action: "copy-codes",
+          data_codes: @codes.join("\n"),
+          data_label_copied: t("identity_backup_codes.copied"),
+          data_label_default: t("identity_backup_codes.copy_all")
         ) do
           t "identity_backup_codes.copy_all"
         end
@@ -162,13 +165,30 @@ def view_template(&block)
 
         button(
           type: "button",
-          onclick: safe("window.print()"),
+          data_action: "print-page",
           class: "secondary"
         ) do
           t "identity_backup_codes.print"
         end
       end
 
+      script(nonce: helpers.content_security_policy_nonce) do
+        raw safe <<~JS
+          document.querySelectorAll('[data-action="copy-codes"]').forEach(function(btn) {
+            btn.addEventListener('click', function() {
+              var codes = btn.dataset.codes;
+              navigator.clipboard.writeText(codes);
+              var original = btn.textContent;
+              btn.textContent = btn.dataset.labelCopied;
+              setTimeout(function() { btn.textContent = btn.dataset.labelDefault; }, 2000);
+            });
+          });
+          document.querySelectorAll('[data-action="print-page"]').forEach(function(btn) {
+            btn.addEventListener('click', function() { window.print(); });
+          });
+        JS
+      end
+
       if @show_confirmation
         div(class: "backup-codes-confirmation") do
           label do
@@ -179,25 +199,14 @@ def view_template(&block)
           render_block(@confirmation_button_block) if @confirmation_button_block
         end
 
-        script do
+        script(nonce: helpers.content_security_policy_nonce) do
           raw safe <<~JS
             (function() {
-              const checkbox = document.getElementById('codes-saved-check');
-              const finishBtn = document.getElementById('finish-setup-btn');
-              if (checkbox && finishBtn) {
-                checkbox.addEventListener('change', () => {
-                  if (checkbox.checked) {
-                    finishBtn.disabled = false;
-                    finishBtn.style.pointerEvents = 'auto';
-                    finishBtn.style.opacity = '1';
-                    finishBtn.removeAttribute('data-disabled');
-                  } else {
-                    finishBtn.disabled = true;
-                    finishBtn.style.pointerEvents = 'none';
-                    finishBtn.style.opacity = '0.5';
-                    finishBtn.setAttribute('data-disabled', 'true');
-                  }
-                });
+              var cb = document.getElementById('codes-saved-check');
+              var btn = cb && cb.closest('.backup-codes-confirmation').querySelector('input[type=submit], button[type=submit]');
+              if (cb && btn) {
+                btn.disabled = !cb.checked;
+                cb.addEventListener('change', function() { btn.disabled = !cb.checked; });
               }
             })();
           JS
diff --git a/app/components/banner.rb b/app/components/banner.rb
index 9132c6d8..0de7a0f0 100644
--- a/app/components/banner.rb
+++ b/app/components/banner.rb
@@ -25,7 +25,6 @@ def render_event_id
         code(
           class: "error-id-code cursor-pointer hover:opacity-80",
           data_error_id: @event_id,
-          onclick: safe("copyErrorId(this)"),
           title: "Click to copy"
         ) { @event_id }
         span(class: "copy-feedback ml-1", hidden: true) { " ✓ Copied!" }
diff --git a/app/components/login/code_input.rb b/app/components/login/code_input.rb
index 91b24ba4..b08e14b5 100644
--- a/app/components/login/code_input.rb
+++ b/app/components/login/code_input.rb
@@ -11,7 +11,7 @@ def initialize(form:, field_name: :code, prefix: nil, placeholder: "XXX-XXX", al
   end
 
   def view_template
-    div(class: "code-input-container", onclick: safe("document.getElementById('#{@input_id}').focus()")) do
+    div(class: "code-input-container", data_focus_target: @input_id) do
       span(class: "code-prefix") { @prefix } if @prefix
       raw @form.text_field @field_name,
         required: true,
@@ -26,5 +26,15 @@ def view_template
         "x-model": @alpine_model,
         data: { behavior: "otp" }
     end
+    script(nonce: helpers.content_security_policy_nonce) do
+      raw safe <<~JS
+        document.querySelectorAll('[data-focus-target]').forEach(function(el) {
+          el.addEventListener('click', function() {
+            var target = document.getElementById(el.dataset.focusTarget);
+            if (target) target.focus();
+          });
+        });
+      JS
+    end
   end
 end
diff --git a/app/components/sidebar.rb b/app/components/sidebar.rb
index 59bf5da7..feaac2fa 100644
--- a/app/components/sidebar.rb
+++ b/app/components/sidebar.rb
@@ -22,10 +22,24 @@ def view_template
       render_navigation
       render_user_section if signed_in?
     end
-
     render_toggle_script
   end
 
+  def render_toggle_script
+    script(nonce: helpers.content_security_policy_nonce) do
+      raw safe <<~JS
+        document.querySelectorAll('[data-action="toggle-sidebar"]').forEach(function(el) {
+          el.addEventListener('click', function() {
+            var sidebar = document.getElementById('sidebar');
+            var overlay = document.querySelector('.sidebar-overlay');
+            sidebar.classList.toggle('mobile-open');
+            overlay.classList.toggle('active');
+          });
+        });
+      JS
+    end
+  end
+
   private
 
   def nav_items
@@ -66,7 +80,7 @@ def nav_items
   end
 
   def render_mobile_toggle
-    button(class: "sidebar-toggle", onclick: safe("toggleSidebar()"), "aria-label": "Toggle sidebar") do
+    button(class: "sidebar-toggle", data_action: "toggle-sidebar", data_target: "sidebar", "aria-label": "Toggle sidebar") do
       svg(
         width: "24",
         height: "24",
@@ -84,7 +98,7 @@ def render_mobile_toggle
     end
   end
 
-  def render_overlay = div(class: "sidebar-overlay", onclick: safe("toggleSidebar()"))
+  def render_overlay = div(class: "sidebar-overlay", data_action: "toggle-sidebar", data_target: "sidebar")
 
   def render_navigation
     div(class: "sidebar-nav") do
@@ -155,17 +169,4 @@ def render_sidebar_brand
     end
     render Components::EnvironmentBanner.new
   end
-
-  def render_toggle_script
-    script do
-      raw safe <<~JS
-        function toggleSidebar() {
-          const sidebar = document.getElementById('sidebar');
-          const overlay = document.querySelector('.sidebar-overlay');
-          sidebar.classList.toggle('mobile-open');
-          overlay.classList.toggle('active');
-        }
-      JS
-    end
-  end
 end
diff --git a/app/components/window.rb b/app/components/window.rb
index 4c0fdfe7..92de0061 100644
--- a/app/components/window.rb
+++ b/app/components/window.rb
@@ -14,8 +14,8 @@ def view_template
         div(class: "title-bar-text") { @window_title }
         if @close_url || @maximize_url
           div class: "title-bar-buttons" do
-            button(data_maximize: "", onclick: safe("window.location.href='#{@maximize_url}'")) if @maximize_url
-            button(data_close: "", onclick: safe("window.location.href='#{@close_url}'")) if @close_url
+            button(data_maximize: "", data_navigate_url: @maximize_url) if @maximize_url
+            button(data_close: "", data_navigate_url: @close_url) if @close_url
           end
         end
       end
@@ -23,5 +23,14 @@ def view_template
         yield
       end
     end
+    script(nonce: helpers.content_security_policy_nonce) do
+      raw safe <<~JS
+        document.querySelectorAll('[data-navigate-url]').forEach(function(btn) {
+          btn.addEventListener('click', function() {
+            window.location.href = btn.dataset.navigateUrl;
+          });
+        });
+      JS
+    end
   end
 end
diff --git a/app/frontend/entrypoints/application.js b/app/frontend/entrypoints/application.js
index 2e33ac9f..12005333 100644
--- a/app/frontend/entrypoints/application.js
+++ b/app/frontend/entrypoints/application.js
@@ -4,6 +4,7 @@ import "../js/click-to-copy";
 import "../js/otp-input.js";
 import "../js/persona-verify.js";
 import "../js/camera-capture.js";
+import "../js/confirm-dialog.js";
 
 import htmx from "htmx.org"
 window.htmx = htmx
@@ -16,23 +17,16 @@ document.addEventListener('htmx:configRequest', (event) => {
   }
 });
 
-// Copy error ID to clipboard
-window.copyErrorId = function(element) {
-  const errorId = element.dataset.errorId;
-  const feedback = element.nextElementSibling || element.parentElement.querySelector('.copy-feedback');
 
-  navigator.clipboard.writeText(errorId).then(() => {
+// Copy error ID to clipboard
+document.addEventListener('click', function (e) {
+  const el = e.target.closest('[data-error-id]')
+  if (!el) return
+  navigator.clipboard.writeText(el.dataset.errorId).then(() => {
+    const feedback = el.nextElementSibling || el.parentElement?.querySelector('.copy-feedback')
     if (feedback) {
-      feedback.hidden = false;
-      setTimeout(() => { feedback.hidden = true; }, 2000);
+      feedback.hidden = false
+      setTimeout(() => { feedback.hidden = true }, 2000)
     }
-  }).catch(err => {
-    console.error('Failed to copy:', err);
-  });
-};
-
-// Delegated listener for Phlex-rendered banners (can't use inline onclick)
-document.addEventListener('click', function(e) {
-  const element = e.target.closest('[data-error-id]');
-  if (element && !element.hasAttribute('onclick')) copyErrorId(element);
-});
+  }).catch(err => console.error('Failed to copy:', err))
+})
\ No newline at end of file
diff --git a/app/frontend/entrypoints/backend.js b/app/frontend/entrypoints/backend.js
index 9d585a44..5c1e3ee7 100644
--- a/app/frontend/entrypoints/backend.js
+++ b/app/frontend/entrypoints/backend.js
@@ -7,7 +7,51 @@ import KeyboardShortcuts from '../components/svelte/KeyboardShortcuts.svelte';
 import IdentityPicker from '../components/svelte/IdentityPicker.svelte';
 import NavigableList from '../components/svelte/NavigableList.svelte';
 import ThemeToggle from '../components/svelte/ThemeToggle.svelte';
+import '../js/confirm-dialog.js';
 
+
+// Delegated click handler for backend-specific actions
+document.addEventListener('click', function (e) {
+  const el = e.target.closest('[data-action]')
+  if (!el) return
+  const action = el.dataset.action
+  if (action === 'open-kbar') {
+    e.preventDefault()
+    window.openKbar?.()
+  } else if (action === 'open-hints') {
+    e.preventDefault()
+    window.openHints?.()
+  } else if (action === 'dispatch-key') {
+    e.preventDefault()
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: el.dataset.key, bubbles: true }))
+  } else if (action === 'rotate' || action === 'rotate-case') {
+    const img = document.getElementById(el.dataset.target)
+    const r = parseInt(img.dataset.rotation || 0) + 90
+    img.dataset.rotation = r
+    img.style.transform = 'rotate(' + r + 'deg)'
+  }
+})
+
+// Image load/error handlers for review documents
+function initReviewImages(root) {
+  root.querySelectorAll('.review-doc-image, .case-doc-image').forEach(function (img) {
+    if (img.dataset.initDone) return
+    img.dataset.initDone = '1'
+    function onLoad() {
+      document.getElementById(img.dataset.loader).style.display = 'none'
+      document.getElementById(img.dataset.container).style.display = 'block'
+    }
+    function onError() {
+      document.getElementById(img.dataset.loader).textContent = 'error loading image'
+    }
+    if (img.complete) {
+      if (img.naturalWidth > 0) onLoad(); else onError()
+    } else {
+      img.addEventListener('load', onLoad)
+      img.addEventListener('error', onError)
+    }
+  })
+}
 window.htmx = htmx;
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -76,4 +120,8 @@ document.addEventListener('DOMContentLoaded', () => {
     try { tabs = JSON.parse(tabsJson); } catch (e) {}
     mountSvelte(TabView, { target: el, props: { tabs } });
   });
+
+  initReviewImages(document)
 });
+
+document.addEventListener('htmx:afterSwap', function (e) { initReviewImages(e.detail.target) })
diff --git a/app/frontend/js/alpine.js b/app/frontend/js/alpine.js
index 70b01271..f2c3e28c 100644
--- a/app/frontend/js/alpine.js
+++ b/app/frontend/js/alpine.js
@@ -1,4 +1,4 @@
-import Alpine from 'alpinejs'
+import Alpine from '@alpinejs/csp'
 import { webauthnRegister } from './webauthn-registration.js'
 import { webauthnAuth } from './webauthn-authentication.js'
 import { stepUpWebauthn } from './webauthn-step-up.js'
@@ -9,5 +9,47 @@ Alpine.data('webauthnAuth', webauthnAuth)
 Alpine.data('stepUpWebauthn', stepUpWebauthn)
 Alpine.data('scopeEditor', scopeEditor)
 
+Alpine.data('oauthCountdown', (initialCount) => ({
+  countdown: initialCount,
+  authLabel: '',
+  ready: initialCount <= 0,
+  init() {
+    this.authLabel = this.$el.dataset.authLabel || ''
+    if (this.countdown > 0) {
+      const interval = setInterval(() => {
+        this.countdown--
+        if (this.countdown <= 0) {
+          this.ready = true
+          clearInterval(interval)
+        }
+      }, 1000)
+    }
+  },
+  get buttonLabel() {
+    return this.ready ? this.authLabel : 'Wait ' + this.countdown + 's...'
+  }
+}))
+
+Alpine.data('documentForm', (initialType) => ({
+  selectedType: initialType,
+  transcriptFileCount: 0,
+  studentIdFileCount: 0,
+  governmentIdFileCount: 0,
+  submitted: false,
+  get canSubmit() {
+    if (this.selectedType === 'transcript') {
+      return this.transcriptFileCount >= 1 && this.studentIdFileCount >= 1
+    }
+    return this.governmentIdFileCount >= 1
+  }
+}))
+
+Alpine.data('codeInput', () => ({
+  codeValue: '',
+  get isComplete() {
+    return this.codeValue.replace(/\D/g, '').length === 6
+  }
+}))
+
 window.Alpine = Alpine
 Alpine.start()
\ No newline at end of file
diff --git a/app/frontend/js/confirm-dialog.js b/app/frontend/js/confirm-dialog.js
new file mode 100644
index 00000000..bf25c0a1
--- /dev/null
+++ b/app/frontend/js/confirm-dialog.js
@@ -0,0 +1,20 @@
+// Confirm dialog for data-confirm attributes.
+// Click targets (buttons, links): shows confirm on click, prevents default if cancelled.
+// Form targets: shows confirm on submit, prevents submit if cancelled.
+
+document.addEventListener('click', function (e) {
+  const el = e.target.closest('[data-confirm]')
+  if (el && el.tagName !== 'FORM') {
+    if (!confirm(el.dataset.confirm)) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+    }
+  }
+})
+
+document.addEventListener('submit', function (e) {
+  const message = e.target.dataset.confirm
+  if (message && !confirm(message)) {
+    e.preventDefault()
+  }
+})
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index c29bc604..3dac366e 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -67,6 +67,6 @@ def google_places_api_script_tag
     api_key = ENV["GOOGLE_PLACES_API_KEY"]
     return unless api_key.present?
 
-    tag.script(src: "https://maps.googleapis.com/maps/api/js?key=#{api_key}&loading=async&libraries=places&callback=onGoogleMapsLoaded", async: true, defer: true)
+    tag.script(src: "https://maps.googleapis.com/maps/api/js?key=#{api_key}&loading=async&libraries=places&callback=onGoogleMapsLoaded", async: true, defer: true, nonce: true)
   end
 end
diff --git a/app/views/backend/identities/show.html.erb b/app/views/backend/identities/show.html.erb
index 2c1a47c8..896574dd 100644
--- a/app/views/backend/identities/show.html.erb
+++ b/app/views/backend/identities/show.html.erb
@@ -225,7 +225,7 @@
                 <% if !sess.expired? %>
                   <% break_glass_tool(element: "span") do %>
                     <%= form_with url: revoke_session_backend_identity_path(@identity, session_id: sess.id), method: :post, local: true, style: "display:inline" do %>
-                      <button type="submit" size-="small" onclick="return confirm('revoke this session?')">revoke</button>
+                      <button type="submit" size-="small" data-confirm="revoke this session?">revoke</button>
                     <% end %>
                   <% end %>
                 <% end %>
@@ -269,7 +269,7 @@
           <label style="display: inline-flex; align-items: center; gap: 1ch; font-size: 0.85em; color: var(--foreground2); cursor: pointer; white-space: nowrap;" title="for users who refuse persona — document capture happens via their camera on our page instead">
             <input type="checkbox" name="skip_persona" value="1"> skip persona
           </label>
-          <button type="submit" is-="button" size-="small" onclick="return confirm('Open a manual verification call case and email a single-use link to <%= j @identity.primary_email %>?')">+ manual call case</button>
+          <button type="submit" is-="button" size-="small" data-confirm="Open a manual verification call case and email a single-use link to <%= @identity.primary_email %>?">+ manual call case</button>
         <% end %>
       <% end %>
     </row>
diff --git a/app/views/backend/shared/_review_document_files.html.erb b/app/views/backend/shared/_review_document_files.html.erb
index 625d61a5..66a7d278 100644
--- a/app/views/backend/shared/_review_document_files.html.erb
+++ b/app/views/backend/shared/_review_document_files.html.erb
@@ -18,14 +18,13 @@
             <%= file.content_type.in?(%w[image/heic image/heif]) ? "converting heic..." : "loading..." %>
           </div>
           <div id="image-container-<%= index %>" style="display: none;">
-            <%= image_tag image_src,
-              alt: "document file #{index + 1}",
-              id: "image-#{index}",
-              style: "max-width: 100%; transition: transform 0.2s;",
-              data: { rotation: 0 },
-              onload: "document.getElementById('loader-#{index}').style.display='none'; document.getElementById('image-container-#{index}').style.display='block';",
-              onerror: "document.getElementById('loader-#{index}').textContent='error loading image';" %>
-            <button type="button" size-="small" onclick="rotateImage(<%= index %>)">↻ rotate</button>
+          <%= image_tag image_src,
+            alt: "document file #{index + 1}",
+            id: "image-#{index}",
+            style: "max-width: 100%; transition: transform 0.2s;",
+            data: { rotation: 0, loader: "loader-#{index}", container: "image-container-#{index}" },
+            class: "review-doc-image" %>
+            <button type="button" size-="small" data-action="rotate" data-target="image-<%= index %>">↻ rotate</button>
           </div>
         <% elsif file.content_type == "application/pdf" %>
           <iframe src="<%= url_for(file) %>" style="width: 100%; height: 60vh; border: 1px solid var(--background2);" type="application/pdf">
@@ -43,15 +42,6 @@
       </column>
     <% end %>
   </column>
-  <script>
-    function rotateImage(index) {
-      const img = document.getElementById('image-' + index);
-      let currentRotation = parseInt(img.dataset.rotation || 0);
-      currentRotation = (currentRotation + 90);
-      img.dataset.rotation = currentRotation;
-      img.style.transform = 'rotate(' + currentRotation + 'deg)';
-    }
-  </script>
 <% else %>
   <span style="color: var(--foreground2);">no files attached</span>
 <% end %>
diff --git a/app/views/backend/static_pages/index.html.erb b/app/views/backend/static_pages/index.html.erb
index 598f2ba3..ed6e6dcc 100644
--- a/app/views/backend/static_pages/index.html.erb
+++ b/app/views/backend/static_pages/index.html.erb
@@ -27,6 +27,7 @@
           <%= render_nav_item backend_verification_cases_path, "Manual call cases", "CASE" %>
           <%= render_nav_item qa_backend_verification_cases_path, "QA sampling", "QASM" %>
           <%= render_nav_item backend_persona_dashboard_path, "Persona rollout", "PRSA" %>
+          <%= internal_content(:ember_glass_hollow) %>
         </ul>
       <% end %>
 
@@ -44,7 +45,7 @@
 
       <div is-="separator"></div>
 
-      <a href="#" onclick="window.openKbar && window.openKbar(); return false;" data-navigable-item>
+      <a href="#" data-action="open-kbar" data-navigable-item>
         <span style="flex: 1;">Go anywhere</span>
         <span style="color: var(--foreground2);"><kbd>⌘K</kbd></span>
       </a>
@@ -58,16 +59,16 @@
 
     <row gap-="2" align-="center center" pad-="1 0" style="color: var(--foreground2);">
       <row gap-="1" align-="center">
-        <button size-="small" variant-="background2" onclick="document.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowUp', bubbles: true}))">↑</button>
-        <button size-="small" variant-="background2" onclick="document.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', bubbles: true}))">↓</button>
+        <button size-="small" variant-="background2" data-action="dispatch-key" data-key="ArrowUp">↑</button>
+        <button size-="small" variant-="background2" data-action="dispatch-key" data-key="ArrowDown">↓</button>
         navigate
       </row>
       <row gap-="1" align-="center">
-        <button size-="small" variant-="background2" onclick="document.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true}))">↵</button>
+        <button size-="small" variant-="background2" data-action="dispatch-key" data-key="Enter">↵</button>
         open
       </row>
       <row gap-="1" align-="center">
-        <button size-="small" variant-="background2" onclick="window.openKbar && window.openKbar()">⌘K</button>
+        <button size-="small" variant-="background2" data-action="open-kbar">⌘K</button>
         search
       </row>
     </row>
diff --git a/app/views/backend/verification_cases/show.html.erb b/app/views/backend/verification_cases/show.html.erb
index 7160d49f..acff251b 100644
--- a/app/views/backend/verification_cases/show.html.erb
+++ b/app/views/backend/verification_cases/show.html.erb
@@ -66,11 +66,10 @@
                     alt: "case document #{index + 1}",
                     id: "case-image-#{index}",
                     style: "max-width: 100%; transition: transform 0.2s;",
-                    data: { rotation: 0 },
-                    onload: "document.getElementById('case-loader-#{index}').style.display='none'; document.getElementById('case-image-container-#{index}').style.display='block';",
-                    onerror: "document.getElementById('case-loader-#{index}').textContent='error loading image';" %>
+                    data: { rotation: 0, loader: "case-loader-#{index}", container: "case-image-container-#{index}" },
+                    class: "case-doc-image" %>
                   <row gap-="1" align-="center">
-                    <button type="button" size-="small" onclick="rotateCaseImage(<%= index %>)">↻ rotate</button>
+                    <button type="button" size-="small" data-action="rotate-case" data-target="case-image-<%= index %>">↻ rotate</button>
                     <%= link_to "open ↗", url_for(file), target: "_blank" %>
                   </row>
                 </div>
@@ -96,15 +95,6 @@
         </column>
       <% end %>
     </column>
-    <script>
-      function rotateCaseImage(index) {
-        const img = document.getElementById('case-image-' + index);
-        let currentRotation = parseInt(img.dataset.rotation || 0);
-        currentRotation = (currentRotation + 90);
-        img.dataset.rotation = currentRotation;
-        img.style.transform = 'rotate(' + currentRotation + 'deg)';
-      }
-    </script>
   <% else %>
     <span style="color: var(--foreground2);">nothing submitted yet</span>
   <% end %>
diff --git a/app/views/backend/verifications/show.html.erb b/app/views/backend/verifications/show.html.erb
index ec457fa1..e2794445 100644
--- a/app/views/backend/verifications/show.html.erb
+++ b/app/views/backend/verifications/show.html.erb
@@ -245,7 +245,7 @@
               <%= form.text_area :internal_rejection_comment, rows: 2, placeholder: "internal notes (not visible to user)..." %>
             </column>
             <column style="align-self: flex-end;">
-              <button type="submit" variant-="red" size-="small" onclick="return confirm('reject this document?')">REJECT</button>
+              <button type="submit" variant-="red" size-="small" data-confirm="reject this document?">REJECT</button>
             </column>
           </row>
         <% end %>
diff --git a/app/views/developer_apps/show.html.erb b/app/views/developer_apps/show.html.erb
index 758ed21e..68d57e9a 100644
--- a/app/views/developer_apps/show.html.erb
+++ b/app/views/developer_apps/show.html.erb
@@ -52,15 +52,15 @@
         <h4><%= t(".danger_zone") %></h4>
         <% if policy(@app).rotate_credentials? %>
           <%= button_to t(".rotate_credentials"), rotate_credentials_developer_app_path(@app), method: :post, class: "danger small-btn",
-              form: { onsubmit: "return confirm('#{j t('.rotate_confirm')}')" } %>
+              form: { data: { confirm: t('.rotate_confirm') } } %>
         <% end %>
         <% if policy(@app).revoke_all_authorizations? %>
           <%= button_to t(".revoke_all_authorizations"), revoke_all_authorizations_developer_app_path(@app), method: :post, class: "danger small-btn",
-              form: { onsubmit: "return confirm('#{j t('.revoke_all_authorizations_confirm')}')" } %>
+              form: { data: { confirm: t('.revoke_all_authorizations_confirm') } } %>
         <% end %>
         <% if policy(@app).destroy? %>
           <%= button_to t(".delete_app"), developer_app_path(@app), method: :delete, class: "danger small-btn",
-              form: { onsubmit: "return confirm('#{j t('.delete_confirm')}')" } %>
+              form: { data: { confirm: t('.delete_confirm') } } %>
         <% end %>
       </section>
     <% end %>
@@ -144,7 +144,7 @@
                 <%= button_to t(".remove_collaborator"),
                     developer_app_collaborator_path(@app, collab),
                     method: :delete, class: "danger small-btn",
-                    form: { onsubmit: "return confirm('#{j t('.remove_collaborator_confirm')}')" } %>
+                    form: { data: { confirm: t('.remove_collaborator_confirm') } } %>
               </div>
             <% end %>
           <% else %>
diff --git a/app/views/docs/show.html.erb b/app/views/docs/show.html.erb
index e4e6dc92..bc1b859d 100644
--- a/app/views/docs/show.html.erb
+++ b/app/views/docs/show.html.erb
@@ -1,14 +1,14 @@
 <% content_for :title, @doc[:title] %>
 
 <div class="docs-layout">
-  <button class="docs-sidebar-toggle" onclick="toggleDocsSidebar()" aria-label="Toggle sidebar">
+  <button class="docs-sidebar-toggle" data-action="toggle-sidebar" aria-label="Toggle sidebar">
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
       <line x1="4" y1="6" x2="20" y2="6"></line>
       <line x1="4" y1="12" x2="20" y2="12"></line>
       <line x1="4" y1="18" x2="20" y2="18"></line>
     </svg>
   </button>
-  <div class="docs-sidebar-overlay" onclick="toggleDocsSidebar()"></div>
+  <div class="docs-sidebar-overlay" data-action="toggle-sidebar"></div>
 
   <button class="lightswitch-btn" type="button" aria-label="Toggle theme">
     <span class="lightswitch-moon"><%= inline_icon("moon-fill", size: 16) %></span>
@@ -57,11 +57,11 @@
   </main>
 </div>
 
-<script>
-  function toggleDocsSidebar() {
-    const sidebar = document.getElementById('docs-sidebar');
-    const overlay = document.querySelector('.docs-sidebar-overlay');
-    sidebar.classList.toggle('mobile-open');
-    overlay.classList.toggle('active');
-  }
+<script nonce="<%= content_security_policy_nonce %>">
+  document.querySelectorAll('[data-action="toggle-sidebar"]').forEach(function(el) {
+    el.addEventListener('click', function() {
+      document.getElementById('docs-sidebar').classList.toggle('mobile-open');
+      document.querySelector('.docs-sidebar-overlay').classList.toggle('active');
+    });
+  });
 </script>
diff --git a/app/views/doorkeeper/authorizations/new.html.erb b/app/views/doorkeeper/authorizations/new.html.erb
index 1bcca8ed..616e6a27 100644
--- a/app/views/doorkeeper/authorizations/new.html.erb
+++ b/app/views/doorkeeper/authorizations/new.html.erb
@@ -82,7 +82,7 @@
     <% end %>
 
     <% auth_label = application&.hq_official? ? t('.authorize_official') : t('.authorize') %>
-    <div class="oauth-actions" x-data="{ countdown: <%= application&.hq_official? ? 0 : 3 %>, ready: <%= application&.hq_official? ? true : false %>, authLabel: '<%= auth_label.gsub("'", "\\'") %>' }" x-init="if (countdown > 0) { let interval = setInterval(() => { countdown--; if (countdown <= 0) { ready = true; clearInterval(interval); } }, 1000); }">
+    <div class="oauth-actions" x-data="oauthCountdown(<%= application&.hq_official? ? 0 : 3 %>)" data-auth-label="<%= auth_label %>">
       <%= form_tag oauth_authorization_path, method: :delete do %>
         <%= hidden_field_tag :client_id, @pre_auth.client.uid, id: nil %>
         <%= hidden_field_tag :redirect_uri, @pre_auth.redirect_uri, id: nil %>
@@ -106,7 +106,7 @@
         <%= hidden_field_tag :nonce, @pre_auth.nonce, id: nil %>
         <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
         <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
-        <%= submit_tag auth_label, "x-bind:disabled": "!ready", "x-bind:value": "ready ? authLabel : `Wait ${countdown}s...`", class: "approve" %>
+        <%= submit_tag auth_label, "x-bind:disabled": "!ready", "x-bind:value": "buttonLabel", class: "approve" %>
       <% end %>
     </div>
 
diff --git a/app/views/errors/internal_server_error.html.erb b/app/views/errors/internal_server_error.html.erb
index 281cf32e..87abb798 100644
--- a/app/views/errors/internal_server_error.html.erb
+++ b/app/views/errors/internal_server_error.html.erb
@@ -90,7 +90,6 @@
         <code
           class="error-id-code"
           data-error-id="<%= @event_id %>"
-          onclick="copyErrorId(this)"
           title="Click to copy">
           <%= @event_id %>
         </code>
diff --git a/app/views/errors/not_found.html.erb b/app/views/errors/not_found.html.erb
index 7917179d..659e6050 100644
--- a/app/views/errors/not_found.html.erb
+++ b/app/views/errors/not_found.html.erb
@@ -88,7 +88,6 @@
         <code
           class="error-id-code"
           data-error-id="<%= @event_id %>"
-          onclick="copyErrorId(this)"
           title="Click to copy">
           <%= @event_id %>
         </code>
diff --git a/app/views/errors/unprocessable_entity.html.erb b/app/views/errors/unprocessable_entity.html.erb
index 1faa289e..87d17a3a 100644
--- a/app/views/errors/unprocessable_entity.html.erb
+++ b/app/views/errors/unprocessable_entity.html.erb
@@ -88,7 +88,6 @@
         <code
           class="error-id-code"
           data-error-id="<%= @event_id %>"
-          onclick="copyErrorId(this)"
           title="Click to copy">
           <%= @event_id %>
         </code>
diff --git a/app/views/identities/new.html.erb b/app/views/identities/new.html.erb
index 14465ea9..e2bc6af2 100644
--- a/app/views/identities/new.html.erb
+++ b/app/views/identities/new.html.erb
@@ -36,24 +36,11 @@
         </svg>
         <span><%= t(".email_typo_html", suggested: @identity.suggested_email) %></span>
         <div class="banner-actions">
-          <button type="button" class="secondary small-btn" onclick="
-            var suggested = this.closest('[data-suggested-email]').dataset.suggestedEmail;
-            var hidden = document.querySelector('input[type=hidden][name*=primary_email]');
-            var visible = document.querySelector('input[type=email][name*=primary_email]');
-            if (hidden) hidden.value = suggested;
-            if (visible) visible.value = suggested;
-            this.closest('form').submit();
-          ">
+          <button type="button" class="secondary small-btn" data-action="fix-typo">
             <%= t(".email_typo_fix") %>
           </button>
           <% if @identity.typo_dismissable %>
-            <button type="button" class="secondary small-btn" onclick="
-              var f = this.closest('form');
-              var inp = document.createElement('input');
-              inp.type = 'hidden'; inp.name = 'email_typo_confirmed'; inp.value = '1';
-              f.appendChild(inp);
-              f.submit();
-            ">
+            <button type="button" class="secondary small-btn" data-action="dismiss-typo">
               <%= t(".email_typo_dismiss") %>
             </button>
           <% end %>
@@ -109,7 +96,7 @@
             <div>
               <%= form.label :primary_email, t("identities.email") %>
               <input type="text" value="<%= @identity.primary_email %>" disabled aria-disabled="true" autocomplete="email">
-              <small><a href="#" onclick="history.back(); return false;"><%= t("identities.new.wrong_email") %></a></small>
+              <small><a href="#" data-action="go-back"><%= t("identities.new.wrong_email") %></a></small>
             </div>
           <% elsif @onboarding_scenario.form_fields.include?(:primary_email) %>
             <div>
@@ -149,3 +136,26 @@
   <% end %>
   </div>
 </div>
+
+<script nonce="<%= content_security_policy_nonce %>">
+  document.addEventListener('click', function(e) {
+    var btn;
+    if ((btn = e.target.closest('[data-action="fix-typo"]'))) {
+      var suggested = btn.closest('[data-suggested-email]').dataset.suggestedEmail;
+      var hidden = document.querySelector('input[type=hidden][name*=primary_email]');
+      var visible = document.querySelector('input[type=email][name*=primary_email]');
+      if (hidden) hidden.value = suggested;
+      if (visible) visible.value = suggested;
+      btn.closest('form').submit();
+    } else if ((btn = e.target.closest('[data-action="dismiss-typo"]'))) {
+      var f = btn.closest('form');
+      var inp = document.createElement('input');
+      inp.type = 'hidden'; inp.name = 'email_typo_confirmed'; inp.value = '1';
+      f.appendChild(inp);
+      f.submit();
+    } else if ((btn = e.target.closest('[data-action="go-back"]'))) {
+      e.preventDefault();
+      history.back();
+    }
+  });
+</script>
diff --git a/app/views/identity_totps/show.html.erb b/app/views/identity_totps/show.html.erb
index 764d56d7..6bf40e28 100644
--- a/app/views/identity_totps/show.html.erb
+++ b/app/views/identity_totps/show.html.erb
@@ -1,9 +1,4 @@
-<div class="totp-setup-verify" x-data="{
-  codeValue: '',
-  get isComplete() {
-    return this.codeValue.replace(/\D/g, '').length === 6;
-  }
-}">
+<div class="totp-setup-verify" x-data="codeInput">
   <div class="totp-setup-header">
     <h3><%= t(".heading") %></h3>
     <p class="step-indicator"><%= t(".step_indicator") %></p>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 26b87952..216d5394 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -8,7 +8,7 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= yield :head %>
-    <script>
+    <script nonce="<%= content_security_policy_nonce %>">
       (function() {
         const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
         const defaultTheme = systemPrefersDark ? "dark" : "light";
diff --git a/app/views/layouts/backend.html.erb b/app/views/layouts/backend.html.erb
index 2e859821..14e40f72 100644
--- a/app/views/layouts/backend.html.erb
+++ b/app/views/layouts/backend.html.erb
@@ -38,8 +38,8 @@
           · <%= current_user.pretty_roles %>
         </span>
         <span id="theme-toggle-slot"></span>
-        <button size-="small" onclick="window.openHints && window.openHints()">?</button>
-        <button size-="small" onclick="window.openKbar && window.openKbar()">⌘K</button>
+        <button size-="small" data-action="open-hints">?</button>
+        <button size-="small" data-action="open-kbar">⌘K</button>
       </row>
     </row>
     <!-- erblint:disable ScriptType -->
@@ -51,7 +51,7 @@
       <%= render "backend/shared/flash" %>
       <% if has_unseen_hints? %>
         <div pad-="2 0">
-          <div box-="square" class="tui-banner tui-banner-info" onclick="window.openHints()" style="cursor: pointer;">
+          <div box-="square" class="tui-banner tui-banner-info" data-action="open-hints" style="cursor: pointer;">
             [i] press <kbd>?</kbd> to see keyboard shortcuts for this page
           </div>
         </div>
diff --git a/app/views/layouts/docs.html.erb b/app/views/layouts/docs.html.erb
index 2907383b..24aaa14e 100644
--- a/app/views/layouts/docs.html.erb
+++ b/app/views/layouts/docs.html.erb
@@ -7,7 +7,7 @@
     <meta name="mobile-web-app-capable" content="yes">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <script>
+    <script nonce="<%= content_security_policy_nonce %>">
       (function() {
         const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
         const defaultTheme = systemPrefersDark ? "dark" : "light";
diff --git a/app/views/layouts/errors.html.erb b/app/views/layouts/errors.html.erb
index 82d8fd24..bd94afe1 100644
--- a/app/views/layouts/errors.html.erb
+++ b/app/views/layouts/errors.html.erb
@@ -7,7 +7,7 @@
     <meta name="mobile-web-app-capable" content="yes">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <script>
+    <script nonce="<%= content_security_policy_nonce %>">
       (function() {
         try {
           const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
diff --git a/app/views/layouts/logged_out.html.erb b/app/views/layouts/logged_out.html.erb
index 75525e60..29d7ce04 100644
--- a/app/views/layouts/logged_out.html.erb
+++ b/app/views/layouts/logged_out.html.erb
@@ -8,7 +8,7 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= yield :head %>
-    <script>
+    <script nonce="<%= content_security_policy_nonce %>">
       (function() {
         const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
         const defaultTheme = systemPrefersDark ? "dark" : "light";
diff --git a/app/views/layouts/minimal.html.erb b/app/views/layouts/minimal.html.erb
index f8542a21..44f8a0a5 100644
--- a/app/views/layouts/minimal.html.erb
+++ b/app/views/layouts/minimal.html.erb
@@ -8,7 +8,7 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= yield :head %>
-    <script>
+    <script nonce="<%= content_security_policy_nonce %>">
       (function() {
         const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
         const defaultTheme = systemPrefersDark ? "dark" : "light";
diff --git a/app/views/logins/email.html.erb b/app/views/logins/email.html.erb
index 26b987af..69126dc3 100644
--- a/app/views/logins/email.html.erb
+++ b/app/views/logins/email.html.erb
@@ -1,11 +1,6 @@
 <% content_for :title, "Enter Code" %>
 <%= render "shared/scenario_background_style", scenario: @onboarding_scenario %>
-<div class="auth-container<%= ' has-background' if @onboarding_scenario&.background_path || @onboarding_scenario&.dark_mode_background_path %>" x-data="{
-  codeValue: '',
-  get isComplete() {
-    return this.codeValue.replace(/\D/g, '').length === 6;
-  }
-}">
+<div class="auth-container<%= ' has-background' if @onboarding_scenario&.background_path || @onboarding_scenario&.dark_mode_background_path %>" x-data="codeInput">
   <%= render "shared/scenario_logo", scenario: @onboarding_scenario %>
   <div class="auth-card">
     <header>
diff --git a/app/views/shared/verifications/_document_form.html.erb b/app/views/shared/verifications/_document_form.html.erb
index 34f200ea..8e26a4b4 100644
--- a/app/views/shared/verifications/_document_form.html.erb
+++ b/app/views/shared/verifications/_document_form.html.erb
@@ -27,7 +27,7 @@
 
 <%= form_with model: @document, url: local_assigns[:form_url], method: local_assigns[:form_method] || :post, local: true, multipart: true,
               html: {
-                "x-data" => "{ selectedType: '#{ @document.document_type }', transcriptFileCount: 0, studentIdFileCount: 0, governmentIdFileCount: 0, get canSubmit() { return this.selectedType === 'transcript' ? (this.transcriptFileCount >= 1 && this.studentIdFileCount >= 1) : this.governmentIdFileCount >= 1; }, submitted: false }",
+                "x-data" => "documentForm('#{ @document.document_type }')",
                 "x-on:submit" => "submitted = true"
               } do |form| %>
 
diff --git a/app/views/static_pages/slack_id.html.erb b/app/views/static_pages/slack_id.html.erb
index 13d394aa..438ba271 100644
--- a/app/views/static_pages/slack_id.html.erb
+++ b/app/views/static_pages/slack_id.html.erb
@@ -28,9 +28,22 @@
   <h1>Your Slack ID is:</h1>
 
   <% if current_identity&.slack_id.present? %>
-    <code class="slack-id" onclick="navigator.clipboard.writeText(this.textContent.trim());var c=this.nextElementSibling;c.textContent='Copied!';setTimeout(()=>c.textContent='Click to copy',2000)"><%= current_identity.slack_id %></code>
+    <code class="slack-id" data-action="copy-text"><%= current_identity.slack_id %></code>
     <small class="slack-id-hint usn">Click to copy</small>
   <% else %>
     <p>No Slack ID linked to your account.</p>
   <% end %>
 </div>
+
+<script nonce="<%= content_security_policy_nonce %>">
+  document.addEventListener('click', function(e) {
+    var el = e.target.closest('[data-action="copy-text"]');
+    if (!el) return;
+    navigator.clipboard.writeText(el.textContent.trim());
+    var hint = el.nextElementSibling;
+    if (hint) {
+      hint.textContent = 'Copied!';
+      setTimeout(function() { hint.textContent = 'Click to copy'; }, 2000);
+    }
+  });
+</script>
diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb
index 0b319544..37491609 100644
--- a/config/initializers/content_security_policy.rb
+++ b/config/initializers/content_security_policy.rb
@@ -4,31 +4,28 @@
 # See the Securing Rails Applications Guide for more information:
 # https://guides.rubyonrails.org/security.html#content-security-policy-header
 
-# Rails.application.configure do
-#   config.content_security_policy do |policy|
-#     policy.default_src :self, :https
-#     policy.font_src    :self, :https, :data
-#     policy.img_src     :self, :https, :data
-#     policy.object_src  :none
-#     policy.script_src  :self, :https
-# Allow @vite/client to hot reload javascript changes in development
-#    policy.script_src *policy.script_src, :unsafe_eval, "http://#{ ViteRuby.config.host_with_port }" if Rails.env.development?
+Rails.application.configure do
+  config.content_security_policy do |policy|
+    policy.default_src :self
+    policy.font_src    :self, "https://cdn.jsdelivr.net"
+    policy.img_src     :self, :data, :blob, "https://cdn.hackclub.com", "https://hc-cdn.hel1.your-objectstorage.com", "https://user-cdn.hackclub-assets.com"
+    policy.object_src  :none
+    policy.script_src  :self, "https://maps.googleapis.com"
+    policy.style_src   :self
+    policy.frame_src   :self, "https://are-we-there-yet.hackclub.com", "https://*.withpersona.com"
+    policy.connect_src :self, "https://maps.googleapis.com", "https://*.withpersona.com"
 
-# You may need to enable this in production as well depending on your setup.
-#    policy.script_src *policy.script_src, :blob if Rails.env.test?
+    if Rails.env.development?
+      policy.script_src *policy.script_src, "http://#{ViteRuby.config.host_with_port}"
+      policy.style_src  *policy.style_src, :unsafe_inline
+      policy.connect_src *policy.connect_src, "ws://#{ViteRuby.config.host_with_port}"
+    end
 
-#     policy.style_src   :self, :https
-# Allow @vite/client to hot reload style changes in development
-#    policy.style_src *policy.style_src, :unsafe_inline if Rails.env.development?
+    if Rails.env.test?
+      policy.script_src *policy.script_src, :blob
+    end
+  end
 
-#     # Specify URI for violation reports
-#     # policy.report_uri "/csp-violation-report-endpoint"
-#   end
-#
-#   # Generate session nonces for permitted importmap, inline scripts, and inline styles.
-#   config.content_security_policy_nonce_generator = ->(request) { request.session.id.to_s }
-#   config.content_security_policy_nonce_directives = %w(script-src style-src)
-#
-#   # Report violations without enforcing the policy.
-#   # config.content_security_policy_report_only = true
-# end
+  config.content_security_policy_nonce_generator = ->(_request) { SecureRandom.base64(16) }
+  config.content_security_policy_nonce_directives = %w[script-src style-src]
+end
diff --git a/package.json b/package.json
index 117164d0..3e54ddae 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "vite-plugin-ruby": "^5.1.1"
   },
   "dependencies": {
+    "@alpinejs/csp": "^3.17.5",
     "@fingerprintjs/fingerprintjs": "^3.4.2",
     "@noble/curves": "^1.9.1",
     "@picocss/pico": "^2.1.1",
diff --git a/yarn.lock b/yarn.lock
index 8ca7d075..1985a62e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@alpinejs/csp@^3.17.5":
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/@alpinejs/csp/-/csp-3.17.5.tgz#a8e707bd979e587aec4c477f0d7fba53c935c653"
+  integrity sha512-7e5lYgzJJL2eZ7esnx+E7wtxws+VDs9em9ztttZ+AQAYEng2bABHFp2SUga0wt84RyfL7hc6B+S/RGglXsPf6w==
+  dependencies:
+    "@vue/reactivity" "~3.5.40"
+
 "@bufbuild/protobuf@^2.0.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-2.4.0.tgz#ef6bfd2fc0374a95a4904cdc5fd8e02cc999cf73"
@@ -598,11 +605,23 @@
   dependencies:
     "@vue/shared" "3.1.5"
 
+"@vue/reactivity@~3.5.40":
+  version "3.5.44"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.44.tgz#6721374ab041003d16f2a90304f720c3b35d568c"
+  integrity sha512-u+QJdKeBBEADkPdevsL+6E12QlYVfBD8Zcw5qjDQKtamI6l14KyqazJMobhCKelhWN5zpyKUiEDoTyHE93cqWw==
+  dependencies:
+    "@vue/shared" "3.5.44"
+
 "@vue/shared@3.1.5":
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.5.tgz#74ee3aad995d0a3996a6bb9533d4d280514ede03"
   integrity sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==
 
+"@vue/shared@3.5.44":
+  version "3.5.44"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.44.tgz#eefe91aa2e17c617260c4ae4c21246be5d85642e"
+  integrity sha512-H82XLH0DjmSOdbEwO15x3QTo1f5PWEtv237eLpYKc0mqLu+B8hnq16lFWmuBmNurkeiG3wr+oM1FhOll/YVFRg==
+
 "@webtui/css@^0.1.7":
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/@webtui/css/-/css-0.1.7.tgz#9fe53161f387e3b50e6012dbacec17a2da2910b7"