diff --git a/app/root.tsx b/app/root.tsx
index 21a58f2..02a6eaa 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -26,6 +26,7 @@ import { socialLinksData } from '#app/routes/_marketing+/__data'
 import tailwindStyleSheetUrl from '#app/styles/tailwind.css?url'
 import { usePosthogPageView } from '#app/utils/analytics'
 import { ClientHintCheck, getHints, useHints } from '#app/utils/client-hints'
+import { cspCaptureScript } from '#app/utils/csp'
 import { getEnv } from '#app/utils/env.server'
 import { honeypot } from '#app/utils/honeypot.server'
 import { getDomainUrl, getUrl } from '#app/utils/misc'
@@ -148,6 +149,17 @@ function Document({
 			className={`${theme || hintTheme || 'light'} h-full overflow-x-hidden`}
 		>
 			<head>
+				{/*
+				 * Must be the first thing in <head>. Parse-time CSP violations
+				 * (this document's own images, the Umami tracker below) fire
+				 * while the parser is still running, long before the
+				 * dynamically imported monitoring module could register a
+				 * listener. See app/utils/csp.ts.
+				 */}
+				<script
+					nonce={nonce}
+					dangerouslySetInnerHTML={{ __html: cspCaptureScript }}
+				/>
 				<ClientHintCheck nonce={nonce} />
 				<Meta />
 				<meta charSet="utf-8" />
@@ -172,6 +184,7 @@ function Document({
 				<ScrollRestoration nonce={nonce} />
 				<Scripts nonce={nonce} />
 				<script
+					nonce={nonce}
 					async
 					defer
 					src={`https://${env.UMAMI_DOMAIN}/${env.UMAMI_SCRIPT_NAME}`}
diff --git a/app/utils/csp.ts b/app/utils/csp.ts
new file mode 100644
index 0000000..ab8de64
--- /dev/null
+++ b/app/utils/csp.ts
@@ -0,0 +1,120 @@
+/**
+ * CSP violation capture.
+ *
+ * The policy in `server/index.ts` is `reportOnly`, so violations are never
+ * enforced — but the directives object also has no `report-uri` or `report-to`,
+ * which means the browser had nowhere to send them. They existed only as
+ * devtools console lines, which is how a policy that was wrong in two places
+ * stayed invisible.
+ *
+ * Registering the listener from `monitoring.client.tsx` is too late. That
+ * module is dynamically imported from `entry.client.tsx`, so it runs after the
+ * document has been parsed — and the violations most worth seeing (the Umami
+ * tracker, SSR images) are dispatched *during* parsing. Those events fire
+ * before any listener exists and are lost permanently.
+ *
+ * So the listener is installed by an inline nonced script at the top of
+ * `<head>` instead, which pushes into a bounded buffer. `drainCspViolations`
+ * is called once Sentry exists, forwarding both the buffered parse-time
+ * violations and anything that fires afterwards.
+ */
+
+/** Cap the buffer so a page in a violation loop cannot grow it without bound. */
+export const CSP_VIOLATION_LIMIT = 20
+
+export type CspViolation = {
+	blockedURI: string
+	violatedDirective: string
+	effectiveDirective: string
+	disposition: string
+	sourceFile: string
+	lineNumber: number
+	columnNumber: number
+	statusCode: number
+}
+
+/**
+ * Inline script source, rendered as the first child of `<head>`.
+ *
+ * Deliberately dependency-free and defensive: this runs before hydration, and
+ * a throw here would take down the whole document rather than just reporting.
+ */
+export const cspCaptureScript = `(function(){
+if (window.__cspViolations) return;
+var seen = [];
+window.__cspViolations = seen;
+window.addEventListener('securitypolicyviolation', function (event) {
+if (seen.length >= ${CSP_VIOLATION_LIMIT}) return;
+seen.push({
+blockedURI: String(event.blockedURI || ''),
+violatedDirective: String(event.violatedDirective || ''),
+effectiveDirective: String(event.effectiveDirective || ''),
+disposition: String(event.disposition || ''),
+sourceFile: String(event.sourceFile || ''),
+lineNumber: Number(event.lineNumber || 0),
+columnNumber: Number(event.columnNumber || 0),
+statusCode: Number(event.statusCode || 0)
+});
+});
+})();`
+
+/**
+ * Whether a violation was caused by Sentry's own transport being refused.
+ *
+ * Reporting a violation means sending an envelope to Sentry. If that envelope
+ * is itself blocked, forwarding the violation produces another blocked
+ * envelope, which produces another violation — an unbounded loop against the
+ * Sentry quota, triggered by nothing but a page load.
+ *
+ * `connect-src` is built from the DSN origin precisely so this cannot happen
+ * (`sentryOrigin` in `server/utils/csp.ts`). This is the second lock on the
+ * same door, for the case where the policy is tightened later and someone
+ * removes the Sentry host without realising what the violation handler does.
+ */
+export function isSentryViolation(
+	blockedURI: string,
+	sentryDsn: string | undefined,
+): boolean {
+	if (!sentryDsn || !blockedURI) return false
+	try {
+		return new URL(blockedURI).origin === new URL(sentryDsn).origin
+	} catch {
+		return false
+	}
+}
+
+declare global {
+	interface Window {
+		__cspViolations?: CspViolation[]
+	}
+}
+
+/**
+ * Hand the buffered violations to the caller and install a live listener for
+ * everything after this point, so violations are not double-reported.
+ */
+export function drainCspViolations(
+	onViolation: (violation: CspViolation) => void,
+): number {
+	const buffered = window.__cspViolations ?? []
+	window.__cspViolations = undefined
+
+	for (const violation of buffered.slice(0, CSP_VIOLATION_LIMIT)) {
+		onViolation(violation)
+	}
+
+	window.addEventListener('securitypolicyviolation', (event) => {
+		onViolation({
+			blockedURI: String(event.blockedURI || ''),
+			violatedDirective: String(event.violatedDirective || ''),
+			effectiveDirective: String(event.effectiveDirective || ''),
+			disposition: String(event.disposition || ''),
+			sourceFile: String(event.sourceFile || ''),
+			lineNumber: Number(event.lineNumber || 0),
+			columnNumber: Number(event.columnNumber || 0),
+			statusCode: Number(event.statusCode || 0),
+		})
+	})
+
+	return buffered.length
+}
diff --git a/app/utils/monitoring.client.tsx b/app/utils/monitoring.client.tsx
index 225a78f..bdaef42 100644
--- a/app/utils/monitoring.client.tsx
+++ b/app/utils/monitoring.client.tsx
@@ -6,6 +6,7 @@ import {
 	useLocation,
 	useNavigationType,
 } from 'react-router'
+import { drainCspViolations, isSentryViolation } from './csp'
 import { ensureCSSStyleDeclaration } from './cssom.client'
 
 export function init() {
@@ -47,6 +48,25 @@ export function init() {
 		replaysOnErrorSampleRate: 1.0,
 	})
 
+	// The policy is reportOnly with no report-uri, so violations used to exist
+	// only in the devtools console. The parse-time ones were captured by the
+	// inline script in root.tsx; this drains that buffer and covers the rest.
+	drainCspViolations((violation) => {
+		// Reporting this would mean sending an envelope to Sentry. If Sentry's
+		// own request is what got blocked, that envelope fails too and raises
+		// another violation, forever.
+		if (isSentryViolation(violation.blockedURI, ENV.SENTRY_DSN)) return
+
+		Sentry.captureMessage(`CSP: ${violation.violatedDirective}`, {
+			level: 'warning',
+			tags: {
+				csp_directive: violation.effectiveDirective,
+				csp_disposition: violation.disposition,
+			},
+			extra: violation,
+		})
+	})
+
 	startReplay()
 }
 
diff --git a/server/index.ts b/server/index.ts
index b541d7c..7ef0d58 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -9,6 +9,7 @@ import rateLimit, { ipKeyGenerator } from 'express-rate-limit'
 import getPort, { portNumbers } from 'get-port'
 import helmet from 'helmet'
 import morgan from 'morgan'
+import { cspConnectSrc, cspImgSrc } from './utils/csp.ts'
 import { decodeRequestUrl } from './utils/request-url.ts'
 
 const MODE = process.env.NODE_ENV ?? 'development'
@@ -131,17 +132,28 @@ app.use(
 		referrerPolicy: { policy: 'same-origin' },
 		crossOriginEmbedderPolicy: false,
 		contentSecurityPolicy: {
-			// NOTE: Remove reportOnly when you're ready to enforce this CSP
+			// NOTE: Remove reportOnly when you're ready to enforce this CSP.
+			//
+			// Read this before flipping it. `reportOnly: true` means the policy
+			// is *never applied* — the browser reports violations and loads
+			// everything anyway. So every gap below has been invisible and
+			// harmless so far, and nothing about the site working today is
+			// evidence the policy is correct. Flipping this turns all of it
+			// live at once, and any hole becomes a broken page.
+			//
+			// Violations are now captured in Sentry (see app/utils/csp.ts), so
+			// the safe order is: deploy with reportOnly, read the Sentry CSP
+			// messages until they are clean, then flip.
 			reportOnly: true,
 			directives: {
-				'connect-src': [
-					MODE === 'development' ? 'ws:' : null,
-					process.env.SENTRY_DSN ? '*.sentry.io' : null,
-					"'self'",
-				].filter(Boolean),
+				'connect-src': cspConnectSrc({
+					mode: MODE,
+					sentryDsn: process.env.SENTRY_DSN,
+					umamiDomain: process.env.UMAMI_DOMAIN,
+				}),
 				'font-src': ["'self'"],
 				'frame-src': ["'self'"],
-				'img-src': ["'self'", 'data:', '*.cloudinary.com'],
+				'img-src': cspImgSrc(),
 				'script-src': [
 					"'strict-dynamic'",
 					"'self'",
diff --git a/server/utils/csp.ts b/server/utils/csp.ts
new file mode 100644
index 0000000..e433420
--- /dev/null
+++ b/server/utils/csp.ts
@@ -0,0 +1,60 @@
+/**
+ * Build the CSP `connect-src` allowlist.
+ *
+ * Umami's tracker POSTs to `https://<UMAMI_DOMAIN>/api/send`, and Sentry ships
+ * every envelope to the host in its DSN. Both are cross-origin, so both have to
+ * be named here. Umami is a full `https://` origin rather than a wildcard so a
+ * compromised Umami host cannot widen the policy.
+ */
+
+/**
+ * The exact origin Sentry's envelopes go to, from `SENTRY_DSN`.
+ *
+ * `*.sentry.io` was the previous answer, and it is wrong for anyone pointing
+ * `SENTRY_DSN` at a self-hosted or custom Sentry domain: their envelopes get
+ * blocked by `connect-src`, and since `app/utils/monitoring.client.tsx` now
+ * forwards CSP violations *through Sentry*, each blocked envelope triggers
+ * another one. That is an unbounded loop against the Sentry quota.
+ *
+ * `new URL(dsn).origin` is exact — it allows the configured host and nothing
+ * else, rather than every subdomain of sentry.io.
+ */
+export function sentryOrigin(sentryDsn: string | undefined): string | null {
+	if (!sentryDsn) return null
+	try {
+		return new URL(sentryDsn).origin
+	} catch {
+		// A malformed DSN cannot be reached anyway; Sentry itself will refuse
+		// it. Omitting the host keeps the policy tight instead of guessing.
+		return null
+	}
+}
+
+export function cspConnectSrc({
+	mode,
+	sentryDsn,
+	umamiDomain,
+}: {
+	mode: string
+	sentryDsn: string | undefined
+	umamiDomain: string | undefined
+}): string[] {
+	return [
+		mode === 'development' ? 'ws:' : null,
+		sentryOrigin(sentryDsn),
+		umamiDomain ? `https://${umamiDomain}` : null,
+		"'self'",
+	].filter((value): value is string => value != null)
+}
+
+/**
+ * Build the CSP `img-src` allowlist.
+ *
+ * `*.cloudinary.com` backs the logo in `app/components/logo.tsx` and the
+ * project screenshots in `app/routes/_marketing+/__data.ts`.
+ * `*.hashnode.com` backs the blog/notes `coverImage.url` values served by the
+ * Hashnode GraphQL API (`app/graphql/gql.ts`) and rendered by `CardImage`.
+ */
+export function cspImgSrc(): string[] {
+	return ["'self'", 'data:', '*.cloudinary.com', '*.hashnode.com']
+}
diff --git a/tests/csp-capture.test.ts b/tests/csp-capture.test.ts
new file mode 100644
index 0000000..727c61b
--- /dev/null
+++ b/tests/csp-capture.test.ts
@@ -0,0 +1,190 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+	CSP_VIOLATION_LIMIT,
+	cspCaptureScript,
+	drainCspViolations,
+	isSentryViolation,
+} from '#app/utils/csp'
+
+/** Run the inline script the way a browser would, against a fake window. */
+function runCaptureScript(win: {
+	addEventListener: (type: string, listener: (event: unknown) => void) => void
+	__cspViolations?: unknown[]
+}) {
+	const fn = new Function('window', cspCaptureScript)
+	fn(win)
+	return win
+}
+
+function violation(overrides: Record<string, unknown> = {}) {
+	return {
+		blockedURI: 'https://evil.example/x.js',
+		violatedDirective: 'script-src',
+		effectiveDirective: 'script-src',
+		disposition: 'report',
+		sourceFile: 'https://arpitdalal.dev/',
+		lineNumber: 1,
+		columnNumber: 1,
+		statusCode: 0,
+		...overrides,
+	}
+}
+
+describe('cspCaptureScript', () => {
+	it('buffers a violation dispatched after the script runs', () => {
+		const listeners: Record<string, (event: unknown) => void> = {}
+		const win = runCaptureScript({
+			addEventListener: (type, listener) => {
+				listeners[type] = listener
+			},
+		})
+
+		expect(
+			listeners.securitypolicyviolation,
+			'listener registered',
+		).toBeTruthy()
+		listeners.securitypolicyviolation?.(violation())
+
+		expect(win.__cspViolations).toEqual([
+			{
+				blockedURI: 'https://evil.example/x.js',
+				violatedDirective: 'script-src',
+				effectiveDirective: 'script-src',
+				disposition: 'report',
+				sourceFile: 'https://arpitdalal.dev/',
+				lineNumber: 1,
+				columnNumber: 1,
+				statusCode: 0,
+			},
+		])
+	})
+
+	it('is idempotent, so a second render cannot double-register', () => {
+		const addEventListener = vi.fn()
+		const win = runCaptureScript({ addEventListener })
+		const first = win.__cspViolations
+
+		runCaptureScript(win as never)
+
+		expect(addEventListener).toHaveBeenCalledTimes(1)
+		expect(win.__cspViolations).toBe(first)
+	})
+
+	it('caps the buffer so a violation loop cannot grow it without bound', () => {
+		const listeners: Record<string, (event: unknown) => void> = {}
+		const win = runCaptureScript({
+			addEventListener: (type, listener) => {
+				listeners[type] = listener
+			},
+		})
+
+		for (let i = 0; i < CSP_VIOLATION_LIMIT + 10; i++) {
+			listeners.securitypolicyviolation?.(violation())
+		}
+
+		expect(win.__cspViolations).toHaveLength(CSP_VIOLATION_LIMIT)
+	})
+
+	it('normalises a sparse event rather than throwing', () => {
+		const listeners: Record<string, (event: unknown) => void> = {}
+		const win = runCaptureScript({
+			addEventListener: (type, listener) => {
+				listeners[type] = listener
+			},
+		})
+
+		expect(() =>
+			listeners.securitypolicyviolation?.({ violatedDirective: 'img-src' }),
+		).not.toThrow()
+		expect(win.__cspViolations?.[0]).toMatchObject({
+			violatedDirective: 'img-src',
+			blockedURI: '',
+			lineNumber: 0,
+		})
+	})
+})
+
+describe('drainCspViolations', () => {
+	it('yields the buffered violations and clears the buffer', () => {
+		const seen: string[] = []
+		window.__cspViolations = [
+			violation({ violatedDirective: 'script-src' }),
+			violation({ violatedDirective: 'img-src' }),
+		] as never
+
+		const count = drainCspViolations((v) => seen.push(v.violatedDirective))
+
+		expect(count).toBe(2)
+		expect(seen).toEqual(['script-src', 'img-src'])
+		expect(window.__cspViolations).toBeUndefined()
+	})
+
+	it('catches violations dispatched after the drain', () => {
+		const seen: string[] = []
+		drainCspViolations((v) => seen.push(v.violatedDirective))
+
+		const event = new Event('securitypolicyviolation')
+		Object.defineProperties(event, {
+			blockedURI: { value: 'https://cdn.hashnode.com/x.jpeg' },
+			violatedDirective: { value: 'img-src' },
+			effectiveDirective: { value: 'img-src' },
+			disposition: { value: 'report' },
+			sourceFile: { value: '' },
+			lineNumber: { value: 0 },
+			columnNumber: { value: 0 },
+			statusCode: { value: 0 },
+		})
+		window.dispatchEvent(event)
+
+		expect(seen).toEqual(['img-src'])
+	})
+
+	it('is safe when nothing was buffered', () => {
+		window.__cspViolations = undefined
+		expect(() => drainCspViolations(() => {})).not.toThrow()
+	})
+})
+
+describe('isSentryViolation', () => {
+	const DSN = 'https://abc123@o0.ingest.sentry.io/456'
+
+	it('recognises a blocked Sentry envelope', () => {
+		// Reporting this violation would send another envelope to the same
+		// blocked origin, which raises another violation, without end.
+		expect(
+			isSentryViolation('https://o0.ingest.sentry.io/api/456/envelope/', DSN),
+		).toBe(true)
+	})
+
+	it('recognises a self-hosted Sentry on a custom domain', () => {
+		expect(
+			isSentryViolation(
+				'https://sentry.internal.example:9000/api/1/envelope/',
+				'https://key@sentry.internal.example:9000/1',
+			),
+		).toBe(true)
+	})
+
+	it('does not swallow unrelated violations', () => {
+		expect(isSentryViolation('https://stats.example.com/api/send', DSN)).toBe(
+			false,
+		)
+		expect(isSentryViolation('https://cdn.hashnode.com/x.jpeg', DSN)).toBe(
+			false,
+		)
+		// A subdomain of the Sentry host is a different origin.
+		expect(isSentryViolation('https://evil.o0.ingest.sentry.io/x', DSN)).toBe(
+			false,
+		)
+	})
+
+	it('is inert without a DSN or a blocked URI', () => {
+		expect(isSentryViolation('https://o0.ingest.sentry.io/x', undefined)).toBe(
+			false,
+		)
+		expect(isSentryViolation('', DSN)).toBe(false)
+		// 'inline' and 'eval' are what the browser reports for blocked inline
+		// script; neither parses as a URL.
+		expect(isSentryViolation('inline', DSN)).toBe(false)
+	})
+})
diff --git a/tests/csp.test.ts b/tests/csp.test.ts
new file mode 100644
index 0000000..bd96d21
--- /dev/null
+++ b/tests/csp.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest'
+import { cspConnectSrc, cspImgSrc, sentryOrigin } from '../server/utils/csp'
+
+describe('cspConnectSrc', () => {
+	it('includes the Umami origin when UMAMI_DOMAIN is set', () => {
+		expect(
+			cspConnectSrc({
+				mode: 'production',
+				sentryDsn: undefined,
+				umamiDomain: 'stats.example.com',
+			}),
+		).toEqual(['https://stats.example.com', "'self'"])
+	})
+
+	it('omits Umami when UMAMI_DOMAIN is unset', () => {
+		expect(
+			cspConnectSrc({
+				mode: 'production',
+				sentryDsn: undefined,
+				umamiDomain: undefined,
+			}),
+		).toEqual(["'self'"])
+	})
+
+	it('keeps sentry and ws allowances beside Umami', () => {
+		expect(
+			cspConnectSrc({
+				mode: 'development',
+				sentryDsn: 'https://example@sentry.io/1',
+				umamiDomain: 'stats.example.com',
+			}),
+		).toEqual([
+			'ws:',
+			'https://sentry.io',
+			'https://stats.example.com',
+			"'self'",
+		])
+	})
+})
+
+describe('sentryOrigin', () => {
+	it('allows the exact host from the DSN, not every sentry.io subdomain', () => {
+		// A self-hosted Sentry is the case that matters: with `*.sentry.io` its
+		// envelopes were blocked by connect-src, and since violations are
+		// reported *through Sentry* that recursed on every page load.
+		expect(
+			cspConnectSrc({
+				mode: 'production',
+				sentryDsn: 'https://abc123@o0.ingest.sentry.io/456',
+				umamiDomain: undefined,
+			}),
+		).toEqual(['https://o0.ingest.sentry.io', "'self'"])
+	})
+
+	it('supports a self-hosted Sentry on a custom domain', () => {
+		expect(sentryOrigin('https://key@sentry.internal.example:9000/1')).toBe(
+			'https://sentry.internal.example:9000',
+		)
+	})
+
+	it('omits the host when no DSN is configured', () => {
+		expect(sentryOrigin(undefined)).toBeNull()
+		expect(sentryOrigin('')).toBeNull()
+	})
+
+	it('omits the host for a malformed DSN rather than guessing', () => {
+		expect(sentryOrigin('not-a-url')).toBeNull()
+	})
+})
+
+describe('cspImgSrc', () => {
+	it('allows the Hashnode CDN that serves blog and notes cover images', () => {
+		// These come from `coverImage.url` in the Hashnode GraphQL response, so
+		// without `*.hashnode.com` every cover image was blocked.
+		expect(cspImgSrc()).toContain('*.hashnode.com')
+	})
+
+	it('keeps self, data, and the Cloudinary host used by the logo', () => {
+		expect(cspImgSrc()).toEqual([
+			"'self'",
+			'data:',
+			'*.cloudinary.com',
+			'*.hashnode.com',
+		])
+	})
+})
diff --git a/tests/monitoring.test.ts b/tests/monitoring.test.ts
index 8963c83..2c931b0 100644
--- a/tests/monitoring.test.ts
+++ b/tests/monitoring.test.ts
@@ -4,6 +4,7 @@ const { sentry } = vi.hoisted(() => ({
 	sentry: {
 		init: vi.fn(),
 		getClient: vi.fn(),
+		captureMessage: vi.fn(),
 		replayIntegration: vi.fn(() => ({ name: 'Replay' })),
 		browserProfilingIntegration: vi.fn(() => ({ name: 'BrowserProfiling' })),
 		reactRouterBrowserTracingIntegration: vi.fn(() => ({
@@ -15,6 +16,7 @@ const { sentry } = vi.hoisted(() => ({
 vi.mock('@sentry/react', () => ({
 	init: (...args: unknown[]) => sentry.init(...args),
 	getClient: (...args: unknown[]) => sentry.getClient(...args),
+	captureMessage: (...args: unknown[]) => sentry.captureMessage(...args),
 	replayIntegration: () => sentry.replayIntegration(),
 	browserProfilingIntegration: () => sentry.browserProfilingIntegration(),
 	reactRouterBrowserTracingIntegration: () =>
@@ -147,4 +149,105 @@ describe('monitoring init', () => {
 			expect(options.replaysOnErrorSampleRate).toBe(1.0)
 		})
 	})
+
+	it('forwards buffered parse-time CSP violations to Sentry', () => {
+		withMonitoring(() => {
+			// The inline script in root.tsx fills this during parsing, which is
+			// long before this module is dynamically imported.
+			window.__cspViolations = [
+				{
+					blockedURI: 'https://stats.example.com/script.js',
+					violatedDirective: 'script-src',
+					effectiveDirective: 'script-src',
+					disposition: 'report',
+					sourceFile: 'https://arpitdalal.dev/',
+					lineNumber: 1,
+					columnNumber: 1,
+					statusCode: 0,
+				},
+			]
+
+			try {
+				init()
+
+				expect(sentry.captureMessage).toHaveBeenCalledWith(
+					'CSP: script-src',
+					expect.objectContaining({
+						level: 'warning',
+						tags: expect.objectContaining({
+							csp_directive: 'script-src',
+							csp_disposition: 'report',
+						}),
+					}),
+				)
+				expect(window.__cspViolations).toBeUndefined()
+			} finally {
+				window.__cspViolations = undefined
+			}
+		})
+	})
+
+	it('forwards CSP violations that fire after init', () => {
+		withMonitoring(() => {
+			try {
+				init()
+				sentry.captureMessage.mockClear()
+
+				// jsdom has no SecurityPolicyViolationEvent constructor, so
+				// build the event the browser would have produced.
+				const event = new Event('securitypolicyviolation')
+				Object.defineProperties(event, {
+					blockedURI: { value: 'https://cdn.hashnode.com/x.jpeg' },
+					violatedDirective: { value: 'img-src' },
+					effectiveDirective: { value: 'img-src' },
+					disposition: { value: 'report' },
+					sourceFile: { value: '' },
+					lineNumber: { value: 0 },
+					columnNumber: { value: 0 },
+					statusCode: { value: 0 },
+				})
+				window.dispatchEvent(event)
+
+				expect(sentry.captureMessage).toHaveBeenCalledWith(
+					'CSP: img-src',
+					expect.objectContaining({ level: 'warning' }),
+				)
+			} finally {
+				window.__cspViolations = undefined
+			}
+		})
+	})
+
+	it('does not report a blocked Sentry envelope back to Sentry', () => {
+		// The loop: reporting this violation means sending an envelope to the
+		// same blocked origin, which raises another violation. Unbounded, and
+		// it costs Sentry quota. `connect-src` is built from the DSN origin so
+		// this should not happen; this is the guard for when it does.
+		vi.stubGlobal('ENV', {
+			SENTRY_DSN: 'https://abc123@o0.ingest.sentry.io/456',
+		})
+		sentry.getClient.mockReturnValue({ addIntegration })
+
+		try {
+			window.__cspViolations = [
+				{
+					blockedURI: 'https://o0.ingest.sentry.io/api/456/envelope/',
+					violatedDirective: 'connect-src',
+					effectiveDirective: 'connect-src',
+					disposition: 'report',
+					sourceFile: 'https://arpitdalal.dev/',
+					lineNumber: 1,
+					columnNumber: 1,
+					statusCode: 0,
+				},
+			] as never
+
+			init()
+
+			expect(sentry.captureMessage).not.toHaveBeenCalled()
+		} finally {
+			window.__cspViolations = undefined
+			vi.unstubAllGlobals()
+		}
+	})
 })
diff --git a/tests/server.smoke.test.ts b/tests/server.smoke.test.ts
index 06d00ce..750d0c6 100644
--- a/tests/server.smoke.test.ts
+++ b/tests/server.smoke.test.ts
@@ -243,6 +243,73 @@ describe('production server', () => {
 		expect(await first.text()).toContain(`nonce="${nonce}"`)
 	})
 
+	it('does not enforce the CSP yet', async () => {
+		// Deliberate, and easy to get wrong by accident. Under reportOnly the
+		// policy is never applied, which is why the Umami nonce and the
+		// missing hashnode img-src host went unnoticed. If this ever fails
+		// because someone set reportOnly: false, the enforcement flip is
+		// happening without anyone having read the Sentry CSP messages first.
+		const response = await fetch(`${base}/talks`)
+
+		expect(
+			response.headers.get('content-security-policy'),
+			'enforcing CSP header',
+		).toBeNull()
+		expect(
+			response.headers.get('content-security-policy-report-only'),
+			'report-only CSP header',
+		).toBeTruthy()
+	})
+
+	it('allows Umami connect-src and nonces the tracker script', async () => {
+		// Both would become blocking the moment reportOnly is flipped: the tag
+		// without a nonce is refused under 'strict-dynamic', and the beacon
+		// POST to /api/send is cross-origin. TEST_ENV sets UMAMI_DOMAIN to
+		// test-umami-domain.
+		const response = await fetch(`${base}/talks`)
+		const csp =
+			response.headers.get('content-security-policy-report-only') ?? ''
+		const body = await response.text()
+		const umamiScript = body.match(
+			/<script\b[^>]*src="https:\/\/test-umami-domain\/test-umami-script"[^>]*>/,
+		)?.[0]
+
+		expect(csp).toContain('https://test-umami-domain')
+		expect(umamiScript, 'Umami script tag').toBeTruthy()
+		expect(umamiScript).toMatch(/nonce="[^"]+"/)
+	})
+
+	it('allows the Hashnode CDN in img-src for blog and notes cover images', async () => {
+		// The policy allowed cloudinary but not hashnode, so every
+		// coverImage.url served by the Hashnode GraphQL API would be refused
+		// under enforcement. Harmless while reportOnly, a broken image on the
+		// blog and notes pages once it is flipped.
+		const response = await fetch(`${base}/talks`)
+		const csp =
+			response.headers.get('content-security-policy-report-only') ?? ''
+
+		expect(csp).toMatch(/img-src[^;]*\*\.hashnode\.com/)
+	})
+
+	it('ships the CSP capture script first in the head, nonced', async () => {
+		// Parse-time violations fire before entry.client.tsx dynamically
+		// imports monitoring, so the listener has to be inline in <head>. If
+		// this regresses, CSP violations go back to being console-only.
+		const response = await fetch(`${base}/talks`)
+		const body = await response.text()
+		const csp =
+			response.headers.get('content-security-policy-report-only') ?? ''
+		const nonce = csp.match(/'nonce-([^']+)'/)?.[1]
+
+		expect(nonce, 'server should issue a nonce').toBeTruthy()
+
+		const head = body.match(/<head>([\s\S]*?)<\/head>/)?.[1] ?? ''
+		const firstScript = head.match(/<script[^>]*>/)?.[0] ?? ''
+
+		expect(firstScript, 'first element in <head>').toContain('nonce=')
+		expect(body).toContain('securitypolicyviolation')
+	})
+
 	it('ignores a client-supplied CSP nonce', async () => {
 		// The nonce now travels as a request header, which means a client can
 		// send one. The middleware must overwrite it before Helmet and the