diff --git a/.changeset/csp-nonce-and-metrics-auth.md b/.changeset/csp-nonce-and-metrics-auth.md
new file mode 100644
index 00000000..14b958d2
--- /dev/null
+++ b/.changeset/csp-nonce-and-metrics-auth.md
@@ -0,0 +1,11 @@
+---
+'ePDS': minor
+---
+
+Auth service tightens its Content-Security-Policy and locks down the metrics endpoint.
+
+**Affects:** Operators
+
+**Operators:** the auth service's `Content-Security-Policy` response header now uses a per-response nonce on the `script-src` directive instead of `'unsafe-inline'`. The resulting policy looks like `default-src 'self'; script-src 'self' 'nonce-<base64url>'; style-src 'self' 'unsafe-inline'; img-src 'self' data: [client-origin]; connect-src 'self'`. All inline `<script>` tags that ePDS ships are already stamped with the matching nonce, so there is nothing to do on upgrade — but any operator-supplied HTML overlay or injected script that the auth service happens to serve inline will now be blocked by the browser unless it is updated to read `res.locals.cspNonce` and stamp `<script nonce="...">`. External scripts loaded via `src=` are unaffected.
+
+The `/metrics` endpoint on the auth service is now deny-by-default: if `PDS_ADMIN_PASSWORD` is unset, the endpoint returns `401 Unauthorized` instead of serving metrics unauthenticated. Previously, unset meant "no auth required", which leaked process uptime, RSS memory, and database counters to anyone who could reach the auth service's `/metrics` path. Operators who relied on the open endpoint must set `PDS_ADMIN_PASSWORD` and send HTTP Basic auth as `admin:<password>` to continue scraping.
diff --git a/e2e/step-definitions/security.steps.ts b/e2e/step-definitions/security.steps.ts
new file mode 100644
index 00000000..c9b37464
--- /dev/null
+++ b/e2e/step-definitions/security.steps.ts
@@ -0,0 +1,244 @@
+/**
+ * Step definitions for security.feature. These scenarios run direct HTTP
+ * requests (no browser) because they assert on response headers, status
+ * codes, and raw HTML — not user interaction.
+ */
+
+import { When, Then } from '@cucumber/cucumber'
+import type { DataTable } from '@cucumber/cucumber'
+import type { EpdsWorld } from '../support/world.js'
+import { testEnv } from '../support/env.js'
+
+/** Response captured by the most recent direct-fetch step. */
+interface CapturedResponse {
+  status: number
+  headers: Headers
+  body: string
+}
+
+const capturedBySymbol = new WeakMap<EpdsWorld, CapturedResponse>()
+
+function setCapturedResponse(
+  world: EpdsWorld,
+  response: CapturedResponse,
+): void {
+  capturedBySymbol.set(world, response)
+  world.lastHttpStatus = response.status
+}
+
+function getCapturedResponse(world: EpdsWorld): CapturedResponse {
+  const captured = capturedBySymbol.get(world)
+  if (!captured) {
+    throw new Error('No response has been captured by a prior step')
+  }
+  return captured
+}
+
+async function captureGet(
+  world: EpdsWorld,
+  url: string,
+  init?: RequestInit,
+): Promise<void> {
+  const res = await fetch(url, { redirect: 'manual', ...init })
+  const body = await res.text()
+  setCapturedResponse(world, { status: res.status, headers: res.headers, body })
+}
+
+// ---------------------------------------------------------------------------
+// CSRF scenarios
+// ---------------------------------------------------------------------------
+
+When('the recovery page is loaded', async function (this: EpdsWorld) {
+  const recoveryUrl = `${testEnv.authUrl}/auth/recover?request_uri=urn:ietf:params:oauth:request_uri:req-security-probe`
+  await captureGet(this, recoveryUrl)
+})
+
+Then('the response sets a CSRF cookie', function (this: EpdsWorld) {
+  const { headers } = getCapturedResponse(this)
+  // `headers.get('set-cookie')` collapses multiple Set-Cookie values
+  // into a single comma-separated string in the Fetch API, which is
+  // ambiguous because cookie values may themselves contain commas
+  // (e.g. Expires=Thu, 01 Jan …). Use Headers.getSetCookie() (Node
+  // >=18) to get each cookie as its own entry.
+  const setCookies = headers.getSetCookie()
+  if (!setCookies.some((cookie) => /^epds_csrf=/.test(cookie))) {
+    throw new Error(
+      `Expected Set-Cookie to include epds_csrf=..., got: ${setCookies.join(', ') || '(none)'}`,
+    )
+  }
+})
+
+Then(
+  'the HTML form contains a hidden CSRF token field',
+  function (this: EpdsWorld) {
+    const { body } = getCapturedResponse(this)
+    if (!/<input[^>]*type="hidden"[^>]*name="csrf"[^>]*>/.test(body)) {
+      throw new Error('HTML response has no hidden CSRF input field')
+    }
+  },
+)
+
+When(
+  'a POST request is sent to the recovery endpoint without a CSRF token',
+  async function (this: EpdsWorld) {
+    const res = await fetch(`${testEnv.authUrl}/auth/recover`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: new URLSearchParams({
+        request_uri: 'urn:ietf:params:oauth:request_uri:req-security-probe',
+        email: 'noone@example.com',
+      }).toString(),
+      redirect: 'manual',
+    })
+    const body = await res.text()
+    setCapturedResponse(this, {
+      status: res.status,
+      headers: res.headers,
+      body,
+    })
+  },
+)
+
+// NOTE: "the response status is {int}" is deliberately NOT defined here.
+// favicon.steps.ts already owns that phrasing against `world.lastHttpStatus`,
+// and defining it twice makes every use ambiguous. setCapturedResponse()
+// mirrors the status onto lastHttpStatus so the shared step covers these
+// scenarios too.
+
+// ---------------------------------------------------------------------------
+// Security headers scenario
+// ---------------------------------------------------------------------------
+
+When(
+  'any page is loaded from the auth service',
+  async function (this: EpdsWorld) {
+    await captureGet(this, `${testEnv.authUrl}/health`)
+  },
+)
+
+Then(
+  'the response includes the following security headers:',
+  function (this: EpdsWorld, table: DataTable) {
+    const { headers } = getCapturedResponse(this)
+    const missing: string[] = []
+    for (const row of table.hashes()) {
+      const expected = row.value
+      const actual = headers.get(row.header)
+      if (actual !== expected) {
+        missing.push(
+          `${row.header}: expected "${expected}", got "${actual ?? '(missing)'}"`,
+        )
+      }
+    }
+    if (missing.length) {
+      throw new Error(`Security header mismatch:\n  ${missing.join('\n  ')}`)
+    }
+  },
+)
+
+// ---------------------------------------------------------------------------
+// CSP scenario
+// ---------------------------------------------------------------------------
+
+When('the login page is loaded', async function (this: EpdsWorld) {
+  // /oauth/authorize on the PDS renders the auth-service login page via
+  // the epds-callback redirect chain, but hitting it without a valid
+  // request_uri triggers an error response before headers are set the
+  // way we want. The auth service exposes a preview route that renders
+  // the same login template, guarded by AUTH_PREVIEW_ROUTES. If preview
+  // is off, fall back to a probe of any auth-service page — the CSP
+  // header is applied globally by the security-headers middleware, so
+  // an auth-service /health response carries the same header.
+  const previewUrl = `${testEnv.authUrl}/preview/login`
+  let res = await fetch(previewUrl, { redirect: 'manual' })
+  if (res.status === 404) {
+    res = await fetch(`${testEnv.authUrl}/health`, { redirect: 'manual' })
+  }
+  const body = await res.text()
+  setCapturedResponse(this, { status: res.status, headers: res.headers, body })
+})
+
+Then(
+  'the Content-Security-Policy header is present',
+  function (this: EpdsWorld) {
+    const { headers } = getCapturedResponse(this)
+    if (!headers.get('content-security-policy')) {
+      throw new Error('Content-Security-Policy header is not set')
+    }
+  },
+)
+
+function getScriptSrcDirective(csp: string): string {
+  const match = /(?:^|;\s*)script-src\s+([^;]+)/.exec(csp)
+  if (!match) {
+    throw new Error(`CSP is missing a script-src directive: "${csp}"`)
+  }
+  return match[1].trim()
+}
+
+Then(
+  'the script-src directive does not allow unsafe-inline',
+  function (this: EpdsWorld) {
+    const { headers } = getCapturedResponse(this)
+    const csp = headers.get('content-security-policy') ?? ''
+    const scriptSrc = getScriptSrcDirective(csp)
+    if (/'unsafe-inline'/.test(scriptSrc)) {
+      throw new Error(
+        `script-src directive allows 'unsafe-inline': "${scriptSrc}"`,
+      )
+    }
+  },
+)
+
+function extractScriptSrcNonce(csp: string): string {
+  const scriptSrc = getScriptSrcDirective(csp)
+  const match = /'nonce-([A-Za-z0-9_-]+)'/.exec(scriptSrc)
+  if (!match) {
+    throw new Error(`script-src directive has no 'nonce-...': "${scriptSrc}"`)
+  }
+  return match[1]
+}
+
+Then(
+  'the script-src directive carries a per-response nonce',
+  async function (this: EpdsWorld) {
+    // Assert two things: (a) the current response has a nonce-shaped
+    // token in script-src, and (b) the nonce is freshly generated per
+    // response — otherwise a hardcoded constant would pass (a) but
+    // defeat the whole point of a CSP nonce. Hit the same endpoint a
+    // second time and compare.
+    const { headers } = getCapturedResponse(this)
+    const firstCsp = headers.get('content-security-policy') ?? ''
+    const firstNonce = extractScriptSrcNonce(firstCsp)
+
+    // Under Node's fetch/undici, an un-drained response body keeps the
+    // socket open and can leave open-handles after the test exits. Drain
+    // each response's body (via .text()) before moving on, matching the
+    // pattern in captureGet() above.
+    const previewUrl = `${testEnv.authUrl}/preview/login`
+    let second = await fetch(previewUrl, { redirect: 'manual' })
+    await second.text()
+    if (second.status === 404) {
+      second = await fetch(`${testEnv.authUrl}/health`, { redirect: 'manual' })
+      await second.text()
+    }
+    const secondCsp = second.headers.get('content-security-policy') ?? ''
+    const secondNonce = extractScriptSrcNonce(secondCsp)
+    if (firstNonce === secondNonce) {
+      throw new Error(
+        `CSP nonce reused across responses: "${firstNonce}" — expected a fresh nonce per request`,
+      )
+    }
+  },
+)
+
+// ---------------------------------------------------------------------------
+// Metrics scenario
+// ---------------------------------------------------------------------------
+
+When(
+  'GET \\/metrics is called on the auth service without credentials',
+  async function (this: EpdsWorld) {
+    await captureGet(this, `${testEnv.authUrl}/metrics`)
+  },
+)
diff --git a/features/security.feature b/features/security.feature
index f8d0b005..f455bc93 100644
--- a/features/security.feature
+++ b/features/security.feature
@@ -8,15 +8,17 @@ Feature: Security measures
 
   # --- CSRF protection ---
 
-  @pending
-  Scenario: Forms include CSRF protection
-    When the login page is loaded
+  Scenario: Server-rendered forms include a CSRF token
+    # The login page submits via JS fetch to better-auth, which enforces its
+    # own CSRF protections at the handler level. Server-rendered HTML forms
+    # (recovery, choose-handle, account-settings) use ePDS's CSRF middleware
+    # and must carry a matching hidden token field.
+    When the recovery page is loaded
     Then the response sets a CSRF cookie
     And the HTML form contains a hidden CSRF token field
 
-  @pending
-  Scenario: POST without CSRF token is rejected
-    When a POST request is sent to the OTP verification endpoint without a CSRF token
+  Scenario: POST to a CSRF-protected route without a token is rejected
+    When a POST request is sent to the recovery endpoint without a CSRF token
     Then the response status is 403
 
   # --- Rate limiting ---
@@ -34,21 +36,20 @@ Feature: Security measures
 
   # --- Security headers ---
 
-  @pending
   Scenario: Auth service responses include security headers
-    When any page is loaded from the auth service via Caddy
-    Then the response includes:
-      | header                    | value            |
-      | Strict-Transport-Security | max-age=31536000 |
-      | X-Frame-Options           | DENY             |
-      | X-Content-Type-Options    | nosniff          |
-      | Referrer-Policy           | no-referrer      |
-
-  @pending
-  Scenario: Content-Security-Policy restricts inline content
+    When any page is loaded from the auth service
+    Then the response includes the following security headers:
+      | header                    | value                                         |
+      | Strict-Transport-Security | max-age=63072000; includeSubDomains; preload  |
+      | X-Frame-Options           | DENY                                          |
+      | X-Content-Type-Options    | nosniff                                       |
+      | Referrer-Policy           | no-referrer                                   |
+
+  Scenario: Content-Security-Policy restricts inline scripts
     When the login page is loaded
     Then the Content-Security-Policy header is present
-    And it does not allow unsafe-inline scripts
+    And the script-src directive does not allow unsafe-inline
+    And the script-src directive carries a per-response nonce
 
   # --- Monitoring ---
 
@@ -59,12 +60,9 @@ Feature: Security measures
     When GET /health is called on the PDS core
     Then it returns status 200 with { "status": "ok" }
 
-  @pending
   Scenario: Metrics endpoint requires authentication
     When GET /metrics is called on the auth service without credentials
     Then the response status is 401
-    When GET /metrics is called with valid Basic auth credentials
-    Then the response includes uptime and memory usage metrics
 
   # --- Same-site deployment topology (sec-fetch-site) ---
   #
diff --git a/packages/auth-service/src/__tests__/heartbeat-toggle.test.ts b/packages/auth-service/src/__tests__/heartbeat-toggle.test.ts
index cb05ed42..10bacd7d 100644
--- a/packages/auth-service/src/__tests__/heartbeat-toggle.test.ts
+++ b/packages/auth-service/src/__tests__/heartbeat-toggle.test.ts
@@ -97,6 +97,7 @@ function renderLoginPageWithHeartbeat(heartbeatEnabled: boolean): string {
     pdsPublicUrl: 'https://pds.example.com',
     otpLength: 6,
     otpCharset: 'numeric',
+    cspNonce: 'test-nonce',
     heartbeatEnabled,
   })
 }
@@ -105,6 +106,7 @@ function renderRecoveryOtpFormWithHeartbeat(heartbeatEnabled: boolean): string {
   return renderRecoveryOtpForm({
     email: 'user@example.com',
     csrfToken: 'csrf',
+    cspNonce: 'test-nonce',
     requestUri: 'urn:ietf:params:oauth:request_uri:req-abc',
     otpLength: 6,
     otpCharset: 'numeric',
diff --git a/packages/auth-service/src/__tests__/login-page-prompt-login.test.ts b/packages/auth-service/src/__tests__/login-page-prompt-login.test.ts
index 28561c03..efedd243 100644
--- a/packages/auth-service/src/__tests__/login-page-prompt-login.test.ts
+++ b/packages/auth-service/src/__tests__/login-page-prompt-login.test.ts
@@ -32,6 +32,7 @@ import * as os from 'node:os'
 import type { AddressInfo } from 'node:net'
 import { _seedClientMetadataCacheForTest } from '@certified-app/shared'
 import { csrfProtection } from '../middleware/csrf.js'
+import { createSecurityHeadersMiddleware } from '../lib/security-headers.js'
 import { createLoginPageRouter } from '../routes/login-page.js'
 import { AuthServiceContext, type AuthServiceConfig } from '../context.js'
 
@@ -89,6 +90,9 @@ async function startApp(ctx: AuthServiceContext): Promise<{
   app.disable('x-powered-by')
   app.use(cookieParser())
   app.use(csrfProtection(ctx.config.csrfSecret))
+  // Mirrors main(): the login page reads res.locals.cspNonce to stamp its
+  // inline <script> tags, so the router can't be mounted without it.
+  app.use(createSecurityHeadersMiddleware())
   app.use(createLoginPageRouter(ctx))
   const server = app.listen(0)
   await new Promise<void>((resolve, reject) => {
diff --git a/packages/auth-service/src/__tests__/login-page.test.ts b/packages/auth-service/src/__tests__/login-page.test.ts
index 01a8784c..424d1b15 100644
--- a/packages/auth-service/src/__tests__/login-page.test.ts
+++ b/packages/auth-service/src/__tests__/login-page.test.ts
@@ -431,6 +431,7 @@ describe('renderLoginPage handle login button', () => {
       otpLength: 6,
       otpCharset: 'numeric',
       heartbeatEnabled: false,
+      cspNonce: 'test-nonce',
     })
   }
 
@@ -520,6 +521,7 @@ function renderDefault(overrides: Partial<LoginPageOpts> = {}): string {
     otpLength: 6,
     otpCharset: 'numeric',
     heartbeatEnabled: false,
+    cspNonce: 'test-nonce',
     ...overrides,
   })
 }
diff --git a/packages/auth-service/src/__tests__/metrics-auth.test.ts b/packages/auth-service/src/__tests__/metrics-auth.test.ts
new file mode 100644
index 00000000..c56431e4
--- /dev/null
+++ b/packages/auth-service/src/__tests__/metrics-auth.test.ts
@@ -0,0 +1,90 @@
+import { describe, it, expect } from 'vitest'
+import { checkMetricsAuth } from '../lib/metrics-auth.js'
+
+function basic(user: string, password: string): string {
+  return 'Basic ' + Buffer.from(`${user}:${password}`).toString('base64')
+}
+
+describe('checkMetricsAuth', () => {
+  describe('deny-by-default (no admin password configured)', () => {
+    it('returns 401 when adminPassword is undefined, even with a header', () => {
+      const r = checkMetricsAuth(basic('admin', 'whatever'), undefined)
+      expect(r.ok).toBe(false)
+      if (!r.ok) {
+        expect(r.status).toBe(401)
+        expect(r.headers['WWW-Authenticate']).toBe('Basic realm="metrics"')
+        expect(r.body).toEqual({ error: 'Unauthorized' })
+      }
+    })
+
+    it('returns 401 when adminPassword is an empty string', () => {
+      const r = checkMetricsAuth(basic('admin', 'whatever'), '')
+      expect(r.ok).toBe(false)
+    })
+
+    it('returns 401 when both adminPassword and header are missing', () => {
+      const r = checkMetricsAuth(undefined, undefined)
+      expect(r.ok).toBe(false)
+    })
+  })
+
+  describe('password configured', () => {
+    const adminPassword = 'supersecret'
+
+    it('returns 401 when Authorization header is missing', () => {
+      const r = checkMetricsAuth(undefined, adminPassword)
+      expect(r.ok).toBe(false)
+      if (!r.ok) {
+        expect(r.headers['WWW-Authenticate']).toBe('Basic realm="metrics"')
+      }
+    })
+
+    it('returns 401 when Authorization header is the empty string', () => {
+      const r = checkMetricsAuth('', adminPassword)
+      expect(r.ok).toBe(false)
+    })
+
+    it('returns 401 when the password is wrong', () => {
+      const r = checkMetricsAuth(basic('admin', 'wrong'), adminPassword)
+      expect(r.ok).toBe(false)
+    })
+
+    it('returns 401 when the username is not "admin"', () => {
+      const r = checkMetricsAuth(basic('root', adminPassword), adminPassword)
+      expect(r.ok).toBe(false)
+    })
+
+    it('returns 401 when the header uses a different scheme (Bearer)', () => {
+      const r = checkMetricsAuth(`Bearer ${adminPassword}`, adminPassword)
+      expect(r.ok).toBe(false)
+    })
+
+    it('accepts a correctly formed Basic header with matching password', () => {
+      const r = checkMetricsAuth(basic('admin', adminPassword), adminPassword)
+      expect(r.ok).toBe(true)
+    })
+
+    it('rejects a header whose length happens to match the expected value', () => {
+      // Guard against a regression that would short-circuit timingSafeEqual
+      // when lengths differ. Use a same-length but different payload.
+      const expected = basic('admin', adminPassword)
+      const samelengthWrong = 'X'.repeat(expected.length)
+      const r = checkMetricsAuth(samelengthWrong, adminPassword)
+      expect(r.ok).toBe(false)
+    })
+
+    it('rejects a non-ASCII header with the same code-unit length as expected', () => {
+      // Guard against the timingSafeEqual footgun where an attacker
+      // can trigger RangeError (500) instead of 401 by sending a
+      // header whose JS .length matches but whose UTF-8 byte length
+      // does not (e.g. multibyte chars). Must return 401, not throw.
+      const expected = basic('admin', adminPassword)
+      const sameCodeUnitsWrong = 'é'.repeat(expected.length)
+      expect(() =>
+        checkMetricsAuth(sameCodeUnitsWrong, adminPassword),
+      ).not.toThrow()
+      const r = checkMetricsAuth(sameCodeUnitsWrong, adminPassword)
+      expect(r.ok).toBe(false)
+    })
+  })
+})
diff --git a/packages/auth-service/src/__tests__/security-headers.test.ts b/packages/auth-service/src/__tests__/security-headers.test.ts
index ee438aa6..fc258759 100644
--- a/packages/auth-service/src/__tests__/security-headers.test.ts
+++ b/packages/auth-service/src/__tests__/security-headers.test.ts
@@ -53,6 +53,20 @@ describe('buildAuthServiceCsp', () => {
     expect(csp).toContain("style-src 'self' 'unsafe-inline'")
     expect(csp).toContain("connect-src 'self'")
   })
+
+  it('uses the nonce in script-src and drops unsafe-inline from script-src when nonce is supplied', () => {
+    const csp = buildAuthServiceCsp(null, 'abc123')
+    expect(csp).toContain("script-src 'self' 'nonce-abc123'")
+    expect(csp).not.toContain("script-src 'self' 'unsafe-inline'")
+    // style-src keeps 'unsafe-inline' — scoped fallback for our own stylesheets.
+    expect(csp).toContain("style-src 'self' 'unsafe-inline'")
+  })
+
+  it('still widens img-src when both client_id and nonce are supplied', () => {
+    const csp = buildAuthServiceCsp('https://app.example.com/cm.json', 'abc123')
+    expect(csp).toContain("img-src 'self' data: https://app.example.com")
+    expect(csp).toContain("script-src 'self' 'nonce-abc123'")
+  })
 })
 
 describe('extractClientIdFromRequest', () => {
@@ -107,6 +121,7 @@ describe('createSecurityHeadersMiddleware', () => {
       setHeader: vi.fn((name: string, value: string) => {
         calls.push([name, value])
       }),
+      locals: {} as Record<string, unknown>,
     }
     return { res, calls }
   }
@@ -163,6 +178,35 @@ describe('createSecurityHeadersMiddleware', () => {
     expect(csp).toContain("img-src 'self' data: https://app.example.com")
   })
 
+  it('writes a base64url nonce to res.locals.cspNonce', () => {
+    const mw = createSecurityHeadersMiddleware()
+    const { res } = makeRes()
+    mw({ query: {} }, res, () => {})
+    const nonce = res.locals.cspNonce
+    expect(typeof nonce).toBe('string')
+    expect(nonce as string).toMatch(/^[A-Za-z0-9_-]+$/)
+    // 16 random bytes base64url-encoded = 22 chars (no padding).
+    expect((nonce as string).length).toBeGreaterThanOrEqual(20)
+  })
+
+  it('uses the same nonce value in script-src that it wrote to res.locals', () => {
+    const mw = createSecurityHeadersMiddleware()
+    const { res, calls } = makeRes()
+    mw({ query: {} }, res, () => {})
+    const nonce = res.locals.cspNonce as string
+    const csp = calls.find(([name]) => name === 'Content-Security-Policy')?.[1]
+    expect(csp).toContain(`script-src 'self' 'nonce-${nonce}'`)
+  })
+
+  it('generates a fresh nonce per request', () => {
+    const mw = createSecurityHeadersMiddleware()
+    const first = makeRes()
+    const second = makeRes()
+    mw({ query: {} }, first.res, () => {})
+    mw({ query: {} }, second.res, () => {})
+    expect(first.res.locals.cspNonce).not.toBe(second.res.locals.cspNonce)
+  })
+
   it('prefers direct client_id over authFlowLookup', () => {
     const lookup = vi.fn(() => 'https://from-lookup.example/cm.json')
     const mw = createSecurityHeadersMiddleware({ authFlowLookup: lookup })
diff --git a/packages/auth-service/src/index.ts b/packages/auth-service/src/index.ts
index 12a3c6cf..b5637830 100644
--- a/packages/auth-service/src/index.ts
+++ b/packages/auth-service/src/index.ts
@@ -26,6 +26,7 @@ import { createRootRouter } from './routes/root.js'
 import { createTestHooksRouter } from './routes/test-hooks.js'
 import { resolveAuthPort } from './lib/resolve-port.js'
 import { createSecurityHeadersMiddleware } from './lib/security-headers.js'
+import { checkMetricsAuth } from './lib/metrics-auth.js'
 import {
   validateOtpCharset,
   validateOtpLength,
@@ -125,19 +126,16 @@ export function createAuthService(config: AuthServiceConfig): {
   app.use(createPreviewRouter(ctx))
   app.use(createPreviewEmailsRouter(ctx))
 
-  // Metrics endpoint (protect with admin auth in production)
+  // Metrics endpoint — HTTP Basic auth, deny-by-default. See
+  // packages/auth-service/src/lib/metrics-auth.ts for the rules.
   app.get('/metrics', (req, res) => {
-    const adminPassword = process.env.PDS_ADMIN_PASSWORD
-    if (adminPassword) {
-      const authHeader = req.headers.authorization
-      if (
-        !authHeader ||
-        authHeader !==
-          'Basic ' + Buffer.from('admin:' + adminPassword).toString('base64')
-      ) {
-        res.status(401).json({ error: 'Unauthorized' })
-        return
-      }
+    const auth = checkMetricsAuth(
+      req.headers.authorization,
+      process.env.PDS_ADMIN_PASSWORD,
+    )
+    if (!auth.ok) {
+      res.set(auth.headers).status(auth.status).json(auth.body)
+      return
     }
     const metrics = ctx.db.getMetrics()
     res.json({
diff --git a/packages/auth-service/src/lib/email-typo-guard.ts b/packages/auth-service/src/lib/email-typo-guard.ts
index 1692e0da..846e9a95 100644
--- a/packages/auth-service/src/lib/email-typo-guard.ts
+++ b/packages/auth-service/src/lib/email-typo-guard.ts
@@ -100,12 +100,18 @@ export function renderEmailTypoGuardMarkup(): string {
  * Input changes reveal likely corrections immediately. The capture-phase
  * submit listener remains as defence in depth, so a typo cannot fire an OTP
  * request until the user accepts or dismisses the suggestion.
+ *
+ * When `cspNonce` is supplied the tag is stamped with `nonce="..."` so it
+ * survives the auth-service's `script-src 'nonce-...'` policy; callers that
+ * render outside a nonce-bearing response omit it.
  */
 export function renderEmailTypoGuardScript(
   formId: string,
   inputId: string,
+  cspNonce?: string,
 ): string {
-  return `<script>
+  const nonceAttr = cspNonce ? ` nonce="${cspNonce}"` : ''
+  return `<script${nonceAttr}>
 (function() {
   var form = document.getElementById(${JSON.stringify(formId)});
   var input = document.getElementById(${JSON.stringify(inputId)});
diff --git a/packages/auth-service/src/lib/metrics-auth.ts b/packages/auth-service/src/lib/metrics-auth.ts
new file mode 100644
index 00000000..449d23b5
--- /dev/null
+++ b/packages/auth-service/src/lib/metrics-auth.ts
@@ -0,0 +1,58 @@
+/**
+ * HTTP Basic authentication check for the /metrics endpoint.
+ *
+ * Deny-by-default: if `PDS_ADMIN_PASSWORD` is unset the endpoint is
+ * unavailable rather than open — historically an unset password meant
+ * "no auth required", which leaked process uptime, RSS, and DB
+ * counters. Operators who want to scrape /metrics must set
+ * `PDS_ADMIN_PASSWORD` and send HTTP Basic auth as `admin:<password>`.
+ *
+ * Kept as a pure helper so the wiring in the /metrics handler is a
+ * thin wrapper and the branching logic is unit-testable without
+ * spinning up Express.
+ */
+import { timingSafeEqual } from '@certified-app/shared'
+
+/**
+ * Result of the /metrics Basic-auth check. When `ok` is false the
+ * caller should return a 401 with both `headers` set (for RFC 7235
+ * `WWW-Authenticate`) and `body` as the JSON payload.
+ */
+export type MetricsAuthResult =
+  | { ok: true }
+  | {
+      ok: false
+      status: 401
+      headers: { 'WWW-Authenticate': string }
+      body: { error: string }
+    }
+
+const UNAUTHORIZED: Extract<MetricsAuthResult, { ok: false }> = {
+  ok: false,
+  status: 401,
+  headers: { 'WWW-Authenticate': 'Basic realm="metrics"' },
+  body: { error: 'Unauthorized' },
+}
+
+/**
+ * Validate the `Authorization` header for a /metrics request against
+ * the configured admin password.
+ *
+ *   - `adminPassword` unset/empty → always 401 (deny-by-default)
+ *   - Header missing → 401
+ *   - Header present but does not match `Basic <base64(admin:<pw>)>` →
+ *     401 (comparison uses `timingSafeEqual` to avoid leaking the
+ *     password byte-by-byte)
+ *   - Header matches → `{ ok: true }`
+ */
+export function checkMetricsAuth(
+  authHeader: string | undefined,
+  adminPassword: string | undefined,
+): MetricsAuthResult {
+  if (!adminPassword) return UNAUTHORIZED
+  if (!authHeader) return UNAUTHORIZED
+  const expected =
+    'Basic ' + Buffer.from('admin:' + adminPassword).toString('base64')
+  if (!timingSafeEqual(authHeader, expected)) return UNAUTHORIZED
+  return { ok: true }
+}
diff --git a/packages/auth-service/src/lib/security-headers.ts b/packages/auth-service/src/lib/security-headers.ts
index 8ea986a8..75fb2c8d 100644
--- a/packages/auth-service/src/lib/security-headers.ts
+++ b/packages/auth-service/src/lib/security-headers.ts
@@ -14,6 +14,8 @@
  * chooser-enrichment middleware factories in pds-core.
  */
 
+import { randomBytes } from 'node:crypto'
+
 /**
  * Build the `img-src` directive for the auth-service's CSP. Always
  * includes `'self'` and `data:`. If a `client_id` is supplied AND it
@@ -41,12 +43,24 @@ export function buildImgSrcDirective(clientId?: string | null): string {
  * Build the full Content-Security-Policy header value used by the
  * auth-service. Composed of fixed directives plus a dynamically
  * computed `img-src`.
+ *
+ * When `nonce` is supplied, `script-src` uses `'nonce-<value>'` in
+ * place of `'unsafe-inline'`. Callers that stamp the matching nonce
+ * onto their inline `<script>` tags therefore get a strict CSP; those
+ * that don't supply a nonce fall back to `'unsafe-inline'` so the
+ * helper stays useful in non-request contexts.
  */
-export function buildAuthServiceCsp(clientId?: string | null): string {
+export function buildAuthServiceCsp(
+  clientId?: string | null,
+  nonce?: string | null,
+): string {
   const imgSrc = buildImgSrcDirective(clientId)
+  const scriptSrc = nonce
+    ? `script-src 'self' 'nonce-${nonce}'`
+    : "script-src 'self' 'unsafe-inline'"
   return [
     "default-src 'self'",
-    "script-src 'self' 'unsafe-inline'",
+    scriptSrc,
     "style-src 'self' 'unsafe-inline'",
     `img-src ${imgSrc}`,
     "connect-src 'self'",
@@ -60,6 +74,13 @@ export function buildAuthServiceCsp(clientId?: string | null): string {
  */
 export interface SecurityHeadersResponse {
   setHeader: (name: string, value: string) => unknown
+  /**
+   * Per-request scratchpad. Express's `res.locals` lives here; templates
+   * read `cspNonce` so they can stamp the matching `nonce="..."` onto
+   * inline `<script>` tags. Typed narrow to keep the helpers free of
+   * Express types.
+   */
+  locals: Record<string, unknown>
 }
 
 /**
@@ -143,8 +164,17 @@ export function createSecurityHeadersMiddleware(
     res.setHeader('X-Content-Type-Options', 'nosniff')
     res.setHeader('Referrer-Policy', 'no-referrer')
 
+    // Per-response nonce: lets script-src drop 'unsafe-inline' while still
+    // permitting the inline <script> tags ePDS ships, which are stamped
+    // with the matching nonce via res.locals.cspNonce.
+    const nonce = randomBytes(16).toString('base64url')
+    res.locals.cspNonce = nonce
+
     const clientId = resolveClientIdForCsp(req, authFlowLookup)
-    res.setHeader('Content-Security-Policy', buildAuthServiceCsp(clientId))
+    res.setHeader(
+      'Content-Security-Policy',
+      buildAuthServiceCsp(clientId, nonce),
+    )
     res.setHeader(
       'Strict-Transport-Security',
       'max-age=63072000; includeSubDomains; preload',
diff --git a/packages/auth-service/src/otp-input.ts b/packages/auth-service/src/otp-input.ts
index 7642151a..f07ebb8b 100644
--- a/packages/auth-service/src/otp-input.ts
+++ b/packages/auth-service/src/otp-input.ts
@@ -39,6 +39,35 @@ export function buildOtpInputFilter(otpCharset: OtpCharset): RegExp {
   return otpCharset === 'alphanumeric' ? /[^A-Za-z0-9]/g : /\D/g
 }
 
+/**
+ * Render the OTP input's character-filtering behaviour as a standalone
+ * `<script>` tag rather than an `oninput="..."` attribute.
+ *
+ * Inline event-handler attributes are NOT covered by a CSP nonce — only
+ * `'unsafe-inline'` (or a hash with `unsafe-hashes`) permits them. Since the
+ * auth-service serves `script-src 'self' 'nonce-...'`, the attribute form is
+ * silently blocked and the filter stops running. Emitting a nonced script that
+ * attaches the same listener keeps the behaviour under the strict policy.
+ */
+export function renderOtpInputFilterScript(
+  inputId: string,
+  otpCharset: OtpCharset,
+  cspNonce?: string,
+): string {
+  const filter = buildOtpInputFilter(otpCharset)
+  const upper = otpCharset === 'alphanumeric' ? '.toUpperCase()' : ''
+  const nonceAttr = cspNonce ? ` nonce="${cspNonce}"` : ''
+  return `<script${nonceAttr}>
+(function() {
+  var input = document.getElementById(${JSON.stringify(inputId)});
+  if (!input) return;
+  input.addEventListener('input', function() {
+    this.value = this.value.replace(${filter.toString()}, '')${upper};
+  });
+})();
+</script>`
+}
+
 /** Accept a supported preview override, otherwise preserve the configured policy. */
 export function resolvePreviewOtpCharset(
   requested: string | undefined,
diff --git a/packages/auth-service/src/routes/account-login.ts b/packages/auth-service/src/routes/account-login.ts
index 786b795f..df4dfe02 100644
--- a/packages/auth-service/src/routes/account-login.ts
+++ b/packages/auth-service/src/routes/account-login.ts
@@ -17,7 +17,7 @@ import { Router, type Request, type Response } from 'express'
 import { escapeHtml, maskEmail, createLogger } from '@certified-app/shared'
 import { fromNodeHeaders } from 'better-auth/node'
 import type { AuthServiceContext } from '../context.js'
-import { buildOtpInputFilter, buildOtpInputProps } from '../otp-input.js'
+import { buildOtpInputProps, renderOtpInputFilterScript } from '../otp-input.js'
 import type { BetterAuthInstance } from '../better-auth.js'
 import { POWERED_BY_CSS, POWERED_BY_HTML } from '../lib/page-helpers.js'
 import {
@@ -48,7 +48,12 @@ export function createAccountLoginRouter(
       /* not logged in, continue */
     }
 
-    res.type('html').send(renderLoginForm({ csrfToken: res.locals.csrfToken }))
+    res.type('html').send(
+      renderLoginForm({
+        csrfToken: res.locals.csrfToken,
+        cspNonce: res.locals.cspNonce as string,
+      }),
+    )
   })
 
   // POST /account/send-otp - send OTP via better-auth, show OTP form
@@ -59,6 +64,7 @@ export function createAccountLoginRouter(
       res.status(400).send(
         renderLoginForm({
           csrfToken: res.locals.csrfToken,
+          cspNonce: res.locals.cspNonce as string,
           error: 'Email is required.',
         }),
       )
@@ -79,6 +85,7 @@ export function createAccountLoginRouter(
       renderOtpForm({
         email,
         csrfToken: res.locals.csrfToken,
+        cspNonce: res.locals.cspNonce as string,
         otpLength: ctx.config.otpLength,
         otpCharset: ctx.config.otpCharset,
       }),
@@ -97,6 +104,7 @@ export function createAccountLoginRouter(
           csrfToken: res.locals.csrfToken,
           otpLength: ctx.config.otpLength,
           otpCharset: ctx.config.otpCharset,
+          cspNonce: res.locals.cspNonce as string,
           error: 'Email and code are required.',
         }),
       )
@@ -131,6 +139,7 @@ export function createAccountLoginRouter(
           csrfToken: res.locals.csrfToken,
           otpLength: ctx.config.otpLength,
           otpCharset: ctx.config.otpCharset,
+          cspNonce: res.locals.cspNonce as string,
           error: errMsg,
         }),
       )
@@ -140,7 +149,11 @@ export function createAccountLoginRouter(
   return router
 }
 
-function renderLoginForm(opts: { csrfToken: string; error?: string }): string {
+function renderLoginForm(opts: {
+  csrfToken: string
+  cspNonce: string
+  error?: string
+}): string {
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -171,7 +184,7 @@ function renderLoginForm(opts: { csrfToken: string; error?: string }): string {
     </div>
     ${POWERED_BY_HTML}
   </div>
-  ${renderEmailTypoGuardScript('form-account-send-otp', 'email')}
+  ${renderEmailTypoGuardScript('form-account-send-otp', 'email', opts.cspNonce)}
 </body>
 </html>`
 }
@@ -179,13 +192,13 @@ function renderLoginForm(opts: { csrfToken: string; error?: string }): string {
 function renderOtpForm(opts: {
   email: string
   csrfToken: string
+  cspNonce: string
   otpLength: number
   otpCharset: 'numeric' | 'alphanumeric'
   error?: string
 }): string {
   const maskedEmail = maskEmail(opts.email)
   const inputProps = buildOtpInputProps(opts.otpLength, opts.otpCharset)
-  const inputFilter = buildOtpInputFilter(opts.otpCharset)
 
   return `<!DOCTYPE html>
 <html lang="en">
@@ -217,7 +230,6 @@ function renderOtpForm(opts: {
                  autocapitalize="${inputProps.autocapitalize}"
                  placeholder="${inputProps.placeholder}"
                  class="otp-input"
-                 oninput="this.value=this.value.replace(${inputFilter.toString()},'')${opts.otpCharset === 'alphanumeric' ? '.toUpperCase()' : ''}"
                  style="letter-spacing: ${Math.max(2, Math.round(32 / opts.otpLength))}px">
         </div>
         <button type="submit" class="btn-primary">Verify</button>
@@ -230,6 +242,7 @@ function renderOtpForm(opts: {
     </div>
     ${POWERED_BY_HTML}
   </div>
+  ${renderOtpInputFilterScript('otp', opts.otpCharset, opts.cspNonce)}
 </body>
 </html>`
 }
diff --git a/packages/auth-service/src/routes/choose-handle.ts b/packages/auth-service/src/routes/choose-handle.ts
index 73e502ca..ba635661 100644
--- a/packages/auth-service/src/routes/choose-handle.ts
+++ b/packages/auth-service/src/routes/choose-handle.ts
@@ -234,6 +234,7 @@ export function createChooseHandleRouter(
           branding.customCss,
           branding.customFaviconUrl,
           branding.customFaviconUrlDark,
+          res.locals.cspNonce as string,
         ),
       )
   })
@@ -317,6 +318,7 @@ export function createChooseHandleRouter(
             branding.customCss,
             branding.customFaviconUrl,
             branding.customFaviconUrlDark,
+            res.locals.cspNonce as string,
           ),
         )
       return
@@ -352,6 +354,7 @@ export function createChooseHandleRouter(
               branding.customCss,
               branding.customFaviconUrl,
               branding.customFaviconUrlDark,
+              res.locals.cspNonce as string,
             ),
           )
         return
@@ -369,6 +372,7 @@ export function createChooseHandleRouter(
             branding.customCss,
             branding.customFaviconUrl,
             branding.customFaviconUrlDark,
+            res.locals.cspNonce as string,
           ),
         )
       return
@@ -386,6 +390,7 @@ export function createChooseHandleRouter(
             branding.customCss,
             branding.customFaviconUrl,
             branding.customFaviconUrlDark,
+            res.locals.cspNonce as string,
           ),
         )
       return
@@ -490,12 +495,13 @@ export function createChooseHandleRouter(
 
 export function renderChooseHandlePage(
   handleDomain: string,
-  error?: string,
-  csrfToken?: string,
-  showRandomButton?: boolean,
-  customCss?: string | null,
-  customFaviconUrl?: string | null,
-  customFaviconUrlDark?: string | null,
+  error: string | undefined,
+  csrfToken: string | undefined,
+  showRandomButton: boolean,
+  customCss: string | null,
+  customFaviconUrl: string | null,
+  customFaviconUrlDark: string | null,
+  cspNonce: string,
 ): string {
   // role=alert only on the populated branch: it is static at render
   // time, so the default assertive announcement is what we want. The
@@ -588,7 +594,7 @@ export function renderChooseHandlePage(
     ${POWERED_BY_HTML}
   </div>
 
-  <script>
+  <script nonce="${escapeHtml(cspNonce)}">
     (function() {
       var input = document.getElementById('handle-input');
       var statusEl = document.getElementById('handle-status');
diff --git a/packages/auth-service/src/routes/login-page.ts b/packages/auth-service/src/routes/login-page.ts
index 5bfb41ba..a1eb5386 100644
--- a/packages/auth-service/src/routes/login-page.ts
+++ b/packages/auth-service/src/routes/login-page.ts
@@ -455,6 +455,7 @@ export function createLoginPageRouter(ctx: AuthServiceContext): Router {
         initialStep,
         otpAlreadySent,
         csrfToken: res.locals.csrfToken,
+        cspNonce: res.locals.cspNonce as string,
         authBasePath: '/api/auth',
         pdsPublicUrl: ctx.config.pdsPublicUrl,
         termsOfServiceUrl: ctx.config.termsOfServiceUrl,
@@ -482,6 +483,7 @@ export function renderLoginPage(opts: {
   initialStep: 'email' | 'otp'
   otpAlreadySent: boolean
   csrfToken: string
+  cspNonce: string
   authBasePath: string
   pdsPublicUrl: string
   termsOfServiceUrl?: string
@@ -760,8 +762,9 @@ export function renderLoginPage(opts: {
     </a>
   </div>
 
-  ${renderEmailTypoGuardScript('form-send-otp', 'email')}
-  <script>
+  ${renderEmailTypoGuardScript('form-send-otp', 'email', opts.cspNonce)}
+  <script nonce="${escapeHtml(opts.cspNonce)}">
+
     (function() {
       var authBasePath = ${JSON.stringify(opts.authBasePath)};
       var handleLoginUrl = ${JSON.stringify(handleLoginUrl)};
diff --git a/packages/auth-service/src/routes/preview.ts b/packages/auth-service/src/routes/preview.ts
index 7678d7e7..de54edb0 100644
--- a/packages/auth-service/src/routes/preview.ts
+++ b/packages/auth-service/src/routes/preview.ts
@@ -175,6 +175,7 @@ export function createPreviewRouter(ctx: AuthServiceContext): Router {
         currentService: 'auth',
         authPublicUrl,
         pdsPublicUrl,
+        cspNonce: res.locals.cspNonce as string,
       }),
     )
   })
@@ -218,6 +219,7 @@ export function createPreviewRouter(ctx: AuthServiceContext): Router {
         initialStep: 'email',
         otpAlreadySent: false,
         csrfToken: fakeCsrfToken(),
+        cspNonce: res.locals.cspNonce as string,
         authBasePath: '/api/auth',
         pdsPublicUrl: ctx.config.pdsPublicUrl,
         termsOfServiceUrl: ctx.config.termsOfServiceUrl,
@@ -252,6 +254,7 @@ export function createPreviewRouter(ctx: AuthServiceContext): Router {
         initialStep: 'otp',
         otpAlreadySent: true,
         csrfToken: fakeCsrfToken(),
+        cspNonce: res.locals.cspNonce as string,
         authBasePath: '/api/auth',
         pdsPublicUrl: ctx.config.pdsPublicUrl,
         termsOfServiceUrl: ctx.config.termsOfServiceUrl,
@@ -286,6 +289,7 @@ export function createPreviewRouter(ctx: AuthServiceContext): Router {
         css,
         faviconUrl,
         faviconUrlDark,
+        res.locals.cspNonce as string,
       ),
     )
   })
@@ -297,6 +301,7 @@ export function createPreviewRouter(ctx: AuthServiceContext): Router {
       renderRecoveryForm({
         requestUri: FAKE_REQUEST_URI,
         csrfToken: fakeCsrfToken(),
+        cspNonce: res.locals.cspNonce as string,
         error: queryString(req, 'error'),
         customCss: css,
         customFaviconUrl: faviconUrl,
@@ -321,6 +326,7 @@ export function createPreviewRouter(ctx: AuthServiceContext): Router {
       renderRecoveryOtpForm({
         email: FAKE_EMAIL,
         csrfToken: fakeCsrfToken(),
+        cspNonce: res.locals.cspNonce as string,
         requestUri: FAKE_REQUEST_URI,
         otpLength: ctx.config.otpLength,
         otpCharset,
diff --git a/packages/auth-service/src/routes/recovery.ts b/packages/auth-service/src/routes/recovery.ts
index 70504f41..036cfb02 100644
--- a/packages/auth-service/src/routes/recovery.ts
+++ b/packages/auth-service/src/routes/recovery.ts
@@ -17,7 +17,7 @@
 import { Router, type Request, type Response } from 'express'
 import type { AuthServiceContext } from '../context.js'
 import { createLogger, escapeHtml, maskEmail } from '@certified-app/shared'
-import { buildOtpInputFilter, buildOtpInputProps } from '../otp-input.js'
+import { buildOtpInputProps, renderOtpInputFilterScript } from '../otp-input.js'
 import { resolveClientBranding } from '../lib/client-metadata.js'
 import {
   renderOptionalStyleTag,
@@ -90,6 +90,7 @@ export function createRecoveryRouter(
       renderRecoveryForm({
         requestUri,
         csrfToken: res.locals.csrfToken,
+        cspNonce: res.locals.cspNonce as string,
         customCss,
         customFaviconUrl,
         customFaviconUrlDark,
@@ -111,6 +112,7 @@ export function createRecoveryRouter(
         renderRecoveryForm({
           requestUri: requestUri || '',
           csrfToken: res.locals.csrfToken,
+          cspNonce: res.locals.cspNonce as string,
           error: 'Email and request URI are required.',
           customCss,
           customFaviconUrl,
@@ -127,6 +129,7 @@ export function createRecoveryRouter(
         renderRecoveryForm({
           requestUri,
           csrfToken: res.locals.csrfToken,
+          cspNonce: res.locals.cspNonce as string,
           error: 'Please enter a valid email address.',
           customCss,
           customFaviconUrl,
@@ -183,6 +186,7 @@ export function createRecoveryRouter(
           renderRecoveryOtpForm({
             email,
             csrfToken: res.locals.csrfToken,
+            cspNonce: res.locals.cspNonce as string,
             requestUri,
             otpLength,
             otpCharset,
@@ -199,6 +203,7 @@ export function createRecoveryRouter(
           renderRecoveryOtpForm({
             email,
             csrfToken: res.locals.csrfToken,
+            cspNonce: res.locals.cspNonce as string,
             requestUri,
             error: 'Failed to send code. Please try again.',
             otpLength,
@@ -217,6 +222,7 @@ export function createRecoveryRouter(
         renderRecoveryOtpForm({
           email,
           csrfToken: res.locals.csrfToken,
+          cspNonce: res.locals.cspNonce as string,
           requestUri,
           otpLength,
           otpCharset,
@@ -279,6 +285,7 @@ export function createRecoveryRouter(
         renderRecoveryOtpForm({
           email,
           csrfToken: res.locals.csrfToken,
+          cspNonce: res.locals.cspNonce as string,
           requestUri,
           error: errMsg,
           otpLength,
@@ -299,6 +306,7 @@ export function createRecoveryRouter(
 export function renderRecoveryForm(opts: {
   requestUri: string
   csrfToken: string
+  cspNonce: string
   error?: string
   customCss?: string | null
   customFaviconUrl?: string | null
@@ -357,7 +365,7 @@ export function renderRecoveryForm(opts: {
     </div>
     ${POWERED_BY_HTML}
   </div>
-  <script>
+  <script nonce="${escapeHtml(opts.cspNonce)}">
     (function() {
       // PAR heartbeat for the email-input recovery page — same shape
       // as the OTP form and recovery OTP form. A user who lands on
@@ -391,6 +399,7 @@ export function renderRecoveryForm(opts: {
 export function renderRecoveryOtpForm(opts: {
   email: string
   csrfToken: string
+  cspNonce: string
   requestUri: string
   otpLength: number
   otpCharset: 'numeric' | 'alphanumeric'
@@ -412,7 +421,6 @@ export function renderRecoveryOtpForm(opts: {
     ? `/oauth/authorize?request_uri=${encodeURIComponent(requestUriForBack)}`
     : '/oauth/authorize'
   const inputProps = buildOtpInputProps(opts.otpLength, opts.otpCharset)
-  const inputFilter = buildOtpInputFilter(opts.otpCharset)
   // Forward the heartbeat-disabled flag through Resend (POST
   // /auth/recover) so the re-rendered OTP form keeps it disabled.
   // Verify (POST /auth/recover/verify) doesn't re-render this form,
@@ -453,7 +461,6 @@ export function renderRecoveryOtpForm(opts: {
                  autocapitalize="${inputProps.autocapitalize}"
                  placeholder="${inputProps.placeholder}"
                  class="otp-input"
-                 oninput="this.value=this.value.replace(${inputFilter.toString()},'')${opts.otpCharset === 'alphanumeric' ? '.toUpperCase()' : ''}"
                  style="letter-spacing: ${Math.max(2, Math.round(32 / opts.otpLength))}px">
         </div>
         <button type="submit" class="btn-primary">Verify</button>
@@ -469,7 +476,8 @@ export function renderRecoveryOtpForm(opts: {
     </div>
     ${POWERED_BY_HTML}
   </div>
-  <script>
+  ${renderOtpInputFilterScript('code', opts.otpCharset, opts.cspNonce)}
+  <script nonce="${escapeHtml(opts.cspNonce)}">
     (function() {
       // PAR heartbeat — see packages/auth-service/src/routes/heartbeat.ts.
       // Mirrors the login-page OTP heartbeat. Stops on form submit /
diff --git a/packages/shared/src/__tests__/crypto.test.ts b/packages/shared/src/__tests__/crypto.test.ts
index f56a8b65..1409369c 100644
--- a/packages/shared/src/__tests__/crypto.test.ts
+++ b/packages/shared/src/__tests__/crypto.test.ts
@@ -57,6 +57,18 @@ describe('timingSafeEqual', () => {
   it('returns false for different lengths', () => {
     expect(timingSafeEqual('short', 'longer-string')).toBe(false)
   })
+
+  it('returns false (no throw) for inputs of equal code-unit length but different byte length', () => {
+    // Guards against a regression where the length check was done in
+    // JavaScript code units (a.length) but the underlying
+    // crypto.timingSafeEqual compares UTF-8 byte length, which throws
+    // RangeError when the two differ. A non-ASCII attacker-supplied
+    // value trivially hits this path.
+    const ascii = 'x'.repeat(30)
+    const nonAscii = 'é'.repeat(30)
+    expect(() => timingSafeEqual(nonAscii, ascii)).not.toThrow()
+    expect(timingSafeEqual(nonAscii, ascii)).toBe(false)
+  })
 })
 
 describe('verifyInternalSecret', () => {
diff --git a/packages/shared/src/crypto.ts b/packages/shared/src/crypto.ts
index d1a40092..51005312 100644
--- a/packages/shared/src/crypto.ts
+++ b/packages/shared/src/crypto.ts
@@ -24,14 +24,26 @@ export function hashToken(token: string): string {
   return crypto.createHash('sha256').update(token).digest('hex')
 }
 
-/** Timing-safe comparison of two strings. */
+/**
+ * Timing-safe comparison of two strings.
+ *
+ * Encodes both inputs as UTF-8 Buffers and compares by byte length.
+ * Comparing `a.length !== b.length` (JavaScript code units) is not
+ * sufficient: a non-ASCII input with the same code-unit count as the
+ * expected value has a different UTF-8 byte length, and
+ * `crypto.timingSafeEqual` throws `RangeError` when byte lengths
+ * differ. This matters for any caller that feeds attacker-controlled
+ * text (HTTP headers, cookies) in as `a`.
+ */
 export function timingSafeEqual(a: string, b: string): boolean {
-  if (a.length !== b.length) {
-    const dummy = Buffer.alloc(a.length)
+  const ab = Buffer.from(a)
+  const bb = Buffer.from(b)
+  if (ab.length !== bb.length) {
+    const dummy = Buffer.alloc(bb.length)
     crypto.timingSafeEqual(dummy, dummy)
     return false
   }
-  return crypto.timingSafeEqual(Buffer.from(a), Buffer.from(b))
+  return crypto.timingSafeEqual(ab, bb)
 }
 
 /**
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index f3a0e973..93deb3e9 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -59,6 +59,7 @@ export {
   PREVIEW_CACHE_STATUS_HTML,
   PREVIEW_CLIENT_ID_INPUT_HTML,
   PREVIEW_CLIENT_ID_SCRIPT_HTML,
+  previewClientIdScriptHtml,
   AUTH_PREVIEW_ROUTES,
   PDS_PREVIEW_ROUTES,
   renderPreviewLinksSections,
diff --git a/packages/shared/src/preview-ui.ts b/packages/shared/src/preview-ui.ts
index e45f8a01..75169153 100644
--- a/packages/shared/src/preview-ui.ts
+++ b/packages/shared/src/preview-ui.ts
@@ -6,6 +6,8 @@
  * both services.
  */
 
+import { escapeHtml } from './html.js'
+
 /**
  * <label> + <input> markup for the persisted client_id field. The
  * surrounding page is expected to have CSS that styles label/input — we
@@ -354,6 +356,14 @@ export function renderPreviewIndexPage(opts: {
   currentService: 'auth' | 'pds'
   authPublicUrl: string
   pdsPublicUrl: string
+  /**
+   * CSP nonce to stamp on the inline <script>. Required when this preview
+   * index is served with a `script-src 'nonce-...'` CSP (e.g. auth-service);
+   * omit when it's served with a policy that permits inline scripts
+   * without a nonce (e.g. pds-core's `/preview` index, which doesn't set
+   * a CSP at all, or any page served with `script-src ... 'unsafe-inline'`).
+   */
+  cspNonce?: string
 }): string {
   const serviceName =
     opts.currentService === 'auth' ? 'auth-service' : 'pds-core'
@@ -382,7 +392,7 @@ export function renderPreviewIndexPage(opts: {
   <p>Alternatively, skip the field and append this query string to any of the links above:</p>
   <pre><code>?client_id=&lt;URL-of-your-client-metadata.json&gt;</code></pre>
   ${PREVIEW_CACHE_STATUS_HTML}
-  ${PREVIEW_CLIENT_ID_SCRIPT_HTML}
+  ${previewClientIdScriptHtml(opts.cspNonce)}
 </body>
 </html>`
 }
@@ -413,8 +423,7 @@ export const PREVIEW_CACHE_STATUS_HTML = `<section id="cache-status" class="cach
  * interpolated from user input — so it's safe to embed verbatim inside
  * a <script> tag.
  */
-export const PREVIEW_CLIENT_ID_SCRIPT_HTML = `<script>
-(function () {
+const PREVIEW_CLIENT_ID_SCRIPT_BODY = `(function () {
   var STORAGE_KEY = 'epds:preview:client_id';
   var input = document.getElementById('client-id-input');
   // Single shared link-rewriter so per-link controls and the
@@ -684,4 +693,26 @@ export const PREVIEW_CLIENT_ID_SCRIPT_HTML = `<script>
     setInterval(render, 1000);
   }
 })();
-</script>`
+`
+
+/**
+ * Inline <script> tag that wires the preview index page. If `cspNonce` is
+ * passed, the tag is stamped with `nonce="..."` so it passes a
+ * `script-src 'nonce-...'` CSP. Otherwise the tag is emitted bare, which
+ * only works for callers whose CSP permits this inline script without a
+ * nonce (e.g. a `script-src` that still includes `'unsafe-inline'`).
+ */
+export function previewClientIdScriptHtml(cspNonce?: string): string {
+  // escapeHtml defence-in-depth: callers currently pass a base64url
+  // crypto.randomBytes(16) nonce so nothing unsafe reaches this attribute,
+  // but escaping keeps the helper safe if that ever changes.
+  const nonceAttr = cspNonce ? ` nonce="${escapeHtml(cspNonce)}"` : ''
+  return `<script${nonceAttr}>\n${PREVIEW_CLIENT_ID_SCRIPT_BODY}</script>`
+}
+
+/**
+ * Back-compat: the no-nonce variant of the inline script tag. Callers on
+ * services that set a CSP with `script-src 'nonce-...'` must use
+ * {@link previewClientIdScriptHtml} instead, passing the request nonce.
+ */
+export const PREVIEW_CLIENT_ID_SCRIPT_HTML = previewClientIdScriptHtml()