From d40778a9f236d93729bf8596e9d3576bfba5177e Mon Sep 17 00:00:00 2001
From: Arpit Dalal <arpitdalalm@gmail.com>
Date: Sun, 27 Sep 2026 15:05:37 -0400
Subject: [PATCH 1/4] fix(security): nonce the Umami tracker and allow its
 beacon (#10)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Umami has never loaded. app/root.tsx injects the tracker as a raw
<script async defer src=...> with no nonce, and script-src is
"'strict-dynamic' 'self' 'nonce-...'". Per CSP3, strict-dynamic makes
CSP3 browsers ignore the host list entirely — including 'self' — and
trust propagates only from nonced or hashed scripts. So the tag was
never permitted, and the fallback path (browsers that ignore
strict-dynamic) does not cover the Umami origin either.

It stayed invisible because the policy is reportOnly and the directives
object has no report-uri or report-to, so violations were never sent
anywhere. git log -S confirms the ordering: c4f1db1 introduced the CSP
and strict-dynamic, f28ea49 added the tracker on top of it.

Three fixes, all in scope for #10:

1. nonce={nonce} on the tracker tag. Already in scope in Document; this
   was an oversight, not a limitation.
2. Umami's beacon POSTs to https://<UMAMI_DOMAIN>/api/send, which
   connect-src did not allow, so the script would load and then never
   report. Added as a full https:// origin rather than a wildcard, so a
   compromised Umami host cannot widen the policy.
3. img-src allowed *.cloudinary.com but not *.hashnode.com, so every
   blog and notes coverImage.url served by the Hashnode GraphQL API was
   being refused. Verified the real host from public/llms-full.txt:
   cdn.hashnode.com. Cloudinary stays — app/components/logo.tsx and
   app/routes/_marketing+/__data.ts do use it.

A securitypolicyviolation listener in monitoring.client.tsx now forwards
violations to Sentry as warning-level messages. Without it, the next CSP
hole is just a devtools console line nobody reads, which is how this one
hid for the life of the project.

Kept reportOnly: true. Flipping enforcement needs to be its own commit
once the violations above are observable in Sentry and confirmed gone.

connect-src and img-src move into server/utils/csp.ts so they are unit
testable without booting a server.

Refs #9 (Task 2, the CSP move to @nichtsam/helmet, should now point
here rather than re-diagnosing the nonce).
---
 app/root.tsx                    |  1 +
 app/utils/monitoring.client.tsx | 23 +++++++++++++++
 server/index.ts                 | 13 +++++----
 server/utils/csp.ts             | 37 ++++++++++++++++++++++++
 tests/csp.test.ts               | 51 +++++++++++++++++++++++++++++++++
 tests/monitoring.test.ts        | 43 +++++++++++++++++++++++++++
 tests/server.smoke.test.ts      | 27 +++++++++++++++++
 7 files changed, 189 insertions(+), 6 deletions(-)
 create mode 100644 server/utils/csp.ts
 create mode 100644 tests/csp.test.ts

diff --git a/app/root.tsx b/app/root.tsx
index 21a58f2..77ea5d8 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -172,6 +172,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/monitoring.client.tsx b/app/utils/monitoring.client.tsx
index 225a78f..37c8636 100644
--- a/app/utils/monitoring.client.tsx
+++ b/app/utils/monitoring.client.tsx
@@ -47,6 +47,29 @@ export function init() {
 		replaysOnErrorSampleRate: 1.0,
 	})
 
+	// reportOnly CSP violations never hit a report-uri here, so without this
+	// listener they only exist in the browser console — which is how Umami's
+	// missing nonce stayed invisible. Forward them so the next CSP hole is
+	// visible in Sentry before reportOnly is flipped off.
+	window.addEventListener('securitypolicyviolation', (event) => {
+		Sentry.captureMessage(`CSP: ${event.violatedDirective}`, {
+			level: 'warning',
+			tags: {
+				csp_directive: event.effectiveDirective,
+				csp_disposition: event.disposition,
+			},
+			extra: {
+				blockedURI: event.blockedURI,
+				violatedDirective: event.violatedDirective,
+				effectiveDirective: event.effectiveDirective,
+				originalPolicy: event.originalPolicy,
+				disposition: event.disposition,
+				sourceFile: event.sourceFile,
+				lineNumber: event.lineNumber,
+			},
+		})
+	})
+
 	startReplay()
 }
 
diff --git a/server/index.ts b/server/index.ts
index b541d7c..e1b5e26 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'
@@ -134,14 +135,14 @@ app.use(
 			// NOTE: Remove reportOnly when you're ready to enforce this CSP
 			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..4e31ad8
--- /dev/null
+++ b/server/utils/csp.ts
@@ -0,0 +1,37 @@
+/**
+ * Build the CSP `connect-src` allowlist.
+ *
+ * Umami's tracker POSTs to `https://<UMAMI_DOMAIN>/api/send`. Without that
+ * origin here, the beacon is blocked even after the script tag is nonced.
+ * Use a full `https://` origin (not a wildcard) so a compromised Umami host
+ * cannot widen the policy.
+ */
+export function cspConnectSrc({
+	mode,
+	sentryDsn,
+	umamiDomain,
+}: {
+	mode: string
+	sentryDsn: string | undefined
+	umamiDomain: string | undefined
+}): string[] {
+	return [
+		mode === 'development' ? 'ws:' : null,
+		sentryDsn ? '*.sentry.io' : null,
+		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` —
+ * they were missing here, so every cover image was being blocked.
+ */
+export function cspImgSrc(): string[] {
+	return ["'self'", 'data:', '*.cloudinary.com', '*.hashnode.com']
+}
diff --git a/tests/csp.test.ts b/tests/csp.test.ts
new file mode 100644
index 0000000..2d0ecfe
--- /dev/null
+++ b/tests/csp.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+import { cspConnectSrc, cspImgSrc } 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:', '*.sentry.io', 'https://stats.example.com', "'self'"])
+	})
+})
+
+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..29c31be 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,45 @@ describe('monitoring init', () => {
 			expect(options.replaysOnErrorSampleRate).toBe(1.0)
 		})
 	})
+
+	it('forwards CSP violations to Sentry so reportOnly holes are visible', () => {
+		withMonitoring(() => {
+			const listeners = new Map<string, EventListener>()
+			const addEventListener = vi
+				.spyOn(window, 'addEventListener')
+				.mockImplementation((type, listener) => {
+					listeners.set(type, listener as EventListener)
+				})
+
+			try {
+				init()
+
+				const handler = listeners.get('securitypolicyviolation')
+				expect(handler, 'CSP violation listener').toBeTruthy()
+
+				handler?.({
+					blockedURI: 'https://evil.example/x.js',
+					violatedDirective: 'script-src',
+					effectiveDirective: 'script-src',
+					originalPolicy: "script-src 'nonce-abc'",
+					disposition: 'report',
+					sourceFile: 'https://arpitdalal.dev/',
+					lineNumber: 1,
+				} as SecurityPolicyViolationEvent)
+
+				expect(sentry.captureMessage).toHaveBeenCalledWith(
+					'CSP: script-src',
+					expect.objectContaining({
+						level: 'warning',
+						tags: expect.objectContaining({
+							csp_directive: 'script-src',
+							csp_disposition: 'report',
+						}),
+					}),
+				)
+			} finally {
+				addEventListener.mockRestore()
+			}
+		})
+	})
 })
diff --git a/tests/server.smoke.test.ts b/tests/server.smoke.test.ts
index 06d00ce..9716210 100644
--- a/tests/server.smoke.test.ts
+++ b/tests/server.smoke.test.ts
@@ -243,6 +243,33 @@ describe('production server', () => {
 		expect(await first.text()).toContain(`nonce="${nonce}"`)
 	})
 
+	it('allows Umami connect-src and nonces the tracker script', async () => {
+		// Without both, the tracker either fails to load (strict-dynamic + no
+		// nonce) or loads and then fails to POST pageviews (connect-src).
+		// 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 only allowed cloudinary, so every coverImage.url served by
+		// the Hashnode GraphQL API was refused by img-src.
+		const response = await fetch(`${base}/talks`)
+		const csp =
+			response.headers.get('content-security-policy-report-only') ?? ''
+
+		expect(csp).toMatch(/img-src[^;]*\*\.hashnode\.com/)
+	})
+
 	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

From d570ff4081423cbd72d697d04263716ec80ed95b Mon Sep 17 00:00:00 2001
From: Arpit Dalal <arpitdalalm@gmail.com>
Date: Sun, 27 Sep 2026 15:18:27 -0400
Subject: [PATCH 2/4] fix(csp): capture parse-time violations before monitoring
 loads
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Registering the securitypolicyviolation listener from monitoring.client
was too late to catch the violations this change exists to expose.

entry.client.tsx dynamically imports the monitoring module, so the
listener is not installed until after the document has been parsed. But
CSP violations for parser-discovered resources — the Umami tracker, the
SSR images — are dispatched *during* parsing. Those events fire before
any listener exists and are dropped permanently. The listener would have
reported post-hydration violations only, which is the empty half of the
problem.

The listener now comes from an inline nonced script as the first child
of <head>, pushing into a bounded buffer. drainCspViolations forwards
the buffer once Sentry exists, then installs a live listener for
everything after, so nothing is double-reported.

The buffer is capped at 20 so a page stuck in a violation loop cannot
grow it without bound, and every field is coerced, because this runs
before hydration and a throw here takes down the document rather than
just reporting.

Naming: the module is app/utils/csp.ts, not *.client.ts. The .client
suffix makes Vite replace the module with an empty stub in the SSR
build — which silently rendered the capture script as
`cspCaptureScript = void 0`, i.e. an empty <script> in every document.
Found by grepping the server bundle, not by reading the source. The
smoke test now asserts the script is present and first in <head> with
a nonce, so that failure mode cannot come back unnoticed.

Refs #10
---
 app/root.tsx                    |  12 +++
 app/utils/csp.ts                |  95 +++++++++++++++++++++
 app/utils/monitoring.client.tsx |  26 ++----
 tests/csp-capture.test.ts       | 145 ++++++++++++++++++++++++++++++++
 tests/monitoring.test.ts        |  65 +++++++++-----
 tests/server.smoke.test.ts      |  19 +++++
 6 files changed, 326 insertions(+), 36 deletions(-)
 create mode 100644 app/utils/csp.ts
 create mode 100644 tests/csp-capture.test.ts

diff --git a/app/root.tsx b/app/root.tsx
index 77ea5d8..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" />
diff --git a/app/utils/csp.ts b/app/utils/csp.ts
new file mode 100644
index 0000000..54cb7a3
--- /dev/null
+++ b/app/utils/csp.ts
@@ -0,0 +1,95 @@
+/**
+ * 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)
+});
+});
+})();`
+
+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 37c8636..9accefb 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 } from './csp'
 import { ensureCSSStyleDeclaration } from './cssom.client'
 
 export function init() {
@@ -47,26 +48,17 @@ export function init() {
 		replaysOnErrorSampleRate: 1.0,
 	})
 
-	// reportOnly CSP violations never hit a report-uri here, so without this
-	// listener they only exist in the browser console — which is how Umami's
-	// missing nonce stayed invisible. Forward them so the next CSP hole is
-	// visible in Sentry before reportOnly is flipped off.
-	window.addEventListener('securitypolicyviolation', (event) => {
-		Sentry.captureMessage(`CSP: ${event.violatedDirective}`, {
+	// 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) => {
+		Sentry.captureMessage(`CSP: ${violation.violatedDirective}`, {
 			level: 'warning',
 			tags: {
-				csp_directive: event.effectiveDirective,
-				csp_disposition: event.disposition,
-			},
-			extra: {
-				blockedURI: event.blockedURI,
-				violatedDirective: event.violatedDirective,
-				effectiveDirective: event.effectiveDirective,
-				originalPolicy: event.originalPolicy,
-				disposition: event.disposition,
-				sourceFile: event.sourceFile,
-				lineNumber: event.lineNumber,
+				csp_directive: violation.effectiveDirective,
+				csp_disposition: violation.disposition,
 			},
+			extra: violation,
 		})
 	})
 
diff --git a/tests/csp-capture.test.ts b/tests/csp-capture.test.ts
new file mode 100644
index 0000000..95f5399
--- /dev/null
+++ b/tests/csp-capture.test.ts
@@ -0,0 +1,145 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+	CSP_VIOLATION_LIMIT,
+	cspCaptureScript,
+	drainCspViolations,
+} 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()
+	})
+})
diff --git a/tests/monitoring.test.ts b/tests/monitoring.test.ts
index 29c31be..3867aaf 100644
--- a/tests/monitoring.test.ts
+++ b/tests/monitoring.test.ts
@@ -150,30 +150,25 @@ describe('monitoring init', () => {
 		})
 	})
 
-	it('forwards CSP violations to Sentry so reportOnly holes are visible', () => {
+	it('forwards buffered parse-time CSP violations to Sentry', () => {
 		withMonitoring(() => {
-			const listeners = new Map<string, EventListener>()
-			const addEventListener = vi
-				.spyOn(window, 'addEventListener')
-				.mockImplementation((type, listener) => {
-					listeners.set(type, listener as EventListener)
-				})
-
-			try {
-				init()
-
-				const handler = listeners.get('securitypolicyviolation')
-				expect(handler, 'CSP violation listener').toBeTruthy()
-
-				handler?.({
-					blockedURI: 'https://evil.example/x.js',
+			// 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',
-					originalPolicy: "script-src 'nonce-abc'",
 					disposition: 'report',
 					sourceFile: 'https://arpitdalal.dev/',
 					lineNumber: 1,
-				} as SecurityPolicyViolationEvent)
+					columnNumber: 1,
+					statusCode: 0,
+				},
+			]
+
+			try {
+				init()
 
 				expect(sentry.captureMessage).toHaveBeenCalledWith(
 					'CSP: script-src',
@@ -185,8 +180,40 @@ describe('monitoring init', () => {
 						}),
 					}),
 				)
+				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 {
-				addEventListener.mockRestore()
+				window.__cspViolations = undefined
 			}
 		})
 	})
diff --git a/tests/server.smoke.test.ts b/tests/server.smoke.test.ts
index 9716210..4aa7298 100644
--- a/tests/server.smoke.test.ts
+++ b/tests/server.smoke.test.ts
@@ -270,6 +270,25 @@ describe('production server', () => {
 		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

From 99f21230aae0c447b85661144c359ce4a206d8b0 Mon Sep 17 00:00:00 2001
From: Arpit Dalal <arpitdalalm@gmail.com>
Date: Sun, 27 Sep 2026 15:21:30 -0400
Subject: [PATCH 3/4] =?UTF-8?q?docs(csp):=20correct=20the=20record=20?=
 =?UTF-8?q?=E2=80=94=20reportOnly=20never=20blocked=20anything?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The first commit in this series claimed Umami "has never loaded" and that
the missing hashnode img-src host meant cover images "were being refused".
Both claims are wrong, and they came from reading the policy without
checking whether the policy was in force.

server/index.ts sets reportOnly: true. That is not a stricter mode, it is
the *absence* of enforcement: the browser receives
Content-Security-Policy-Report-Only, logs violations, and loads every
resource anyway. Confirmed against production:

  $ curl -sI https://arpitdalal.dev | rg -i content-security
  content-security-policy-report-only: default-src 'self';...;script-src
  'strict-dynamic' 'self' 'nonce-5dea2667...';img-src 'self' data:
  *.cloudinary.com;connect-src *.sentry.io 'self';...

There is no enforcing Content-Security-Policy header. So:

  - the unnonced Umami tracker was permitted, because nothing was
    permitted-or-not. It has been loading and reporting all along.
  - the beacon POST was permitted for the same reason.
  - the cover images loaded; cdn.hashnode.com was never actually
    refused.

The code changes in the first commit are still correct and still needed.
They are prerequisites for turning enforcement on, not repairs for a
live outage. What was wrong is the story attached to them, and the PR
body and issue diagnosis repeated it.

The trap is that a report-only policy looks identical to an enforced one
when you read the source. Every directive reads as if it were binding.
The new 'does not enforce the CSP yet' case asserts the enforcing header
is absent, so the distinction is checked rather than assumed; verified
it fails if reportOnly is flipped to false, which also makes the four
policy assertions fail, so flipping cannot happen silently.

Verified against production, not inferred from the source alone. Also
rewrites the NOTE at the enforcement site, which was the original trap.

Refs #10
---
 server/index.ts            | 13 ++++++++++++-
 tests/server.smoke.test.ts | 31 ++++++++++++++++++++++++++-----
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/server/index.ts b/server/index.ts
index e1b5e26..7ef0d58 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -132,7 +132,18 @@ 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': cspConnectSrc({
diff --git a/tests/server.smoke.test.ts b/tests/server.smoke.test.ts
index 4aa7298..750d0c6 100644
--- a/tests/server.smoke.test.ts
+++ b/tests/server.smoke.test.ts
@@ -243,10 +243,29 @@ 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 () => {
-		// Without both, the tracker either fails to load (strict-dynamic + no
-		// nonce) or loads and then fails to POST pageviews (connect-src).
-		// TEST_ENV sets UMAMI_DOMAIN to test-umami-domain.
+		// 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') ?? ''
@@ -261,8 +280,10 @@ describe('production server', () => {
 	})
 
 	it('allows the Hashnode CDN in img-src for blog and notes cover images', async () => {
-		// The policy only allowed cloudinary, so every coverImage.url served by
-		// the Hashnode GraphQL API was refused by img-src.
+		// 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') ?? ''

From dccbdd605aee41bafd323c617237a8902913aa09 Mon Sep 17 00:00:00 2001
From: Arpit Dalal <arpitdalalm@gmail.com>
Date: Sun, 27 Sep 2026 15:31:16 -0400
Subject: [PATCH 4/4] fix(csp): stop CSP reporting from recursing through
 Sentry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reporting a CSP violation means sending an envelope to Sentry. If Sentry's
own request is what connect-src refused, that envelope fails too, which
raises another violation, which sends another envelope. Unbounded, from
nothing but a page load, and it bills Sentry quota.

Two causes, both fixed.

`connect-src` allowed `*.sentry.io`, which does not cover a self-hosted or
custom Sentry domain. Anyone pointing SENTRY_DSN at their own instance
had every envelope blocked, so the loop was reachable in the exact
configuration where reporting matters most. Replaced with
`new URL(dsn).origin` — the exact configured host rather than every
subdomain of sentry.io, so this is tighter than before as well as
correct. A malformed DSN yields no host rather than a guess.

As a second lock on the same door, `isSentryViolation` drops any violation
whose blockedURI is on the DSN origin before it reaches captureMessage.
connect-src being correct is the fix; this is what stops the loop coming
back silently the next time someone tightens the policy and removes the
Sentry host without knowing what the violation handler does.

Verified by mutation: removing the guard fails the new monitoring case.
The origin change is covered directly, including a self-hosted DSN on a
custom domain with a port.

Refs #10
---
 app/utils/csp.ts                | 25 ++++++++++++++++++
 app/utils/monitoring.client.tsx |  7 ++++-
 server/utils/csp.ts             | 37 ++++++++++++++++++++++-----
 tests/csp-capture.test.ts       | 45 +++++++++++++++++++++++++++++++++
 tests/csp.test.ts               | 39 ++++++++++++++++++++++++++--
 tests/monitoring.test.ts        | 33 ++++++++++++++++++++++++
 6 files changed, 176 insertions(+), 10 deletions(-)

diff --git a/app/utils/csp.ts b/app/utils/csp.ts
index 54cb7a3..ab8de64 100644
--- a/app/utils/csp.ts
+++ b/app/utils/csp.ts
@@ -58,6 +58,31 @@ 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[]
diff --git a/app/utils/monitoring.client.tsx b/app/utils/monitoring.client.tsx
index 9accefb..bdaef42 100644
--- a/app/utils/monitoring.client.tsx
+++ b/app/utils/monitoring.client.tsx
@@ -6,7 +6,7 @@ import {
 	useLocation,
 	useNavigationType,
 } from 'react-router'
-import { drainCspViolations } from './csp'
+import { drainCspViolations, isSentryViolation } from './csp'
 import { ensureCSSStyleDeclaration } from './cssom.client'
 
 export function init() {
@@ -52,6 +52,11 @@ export function init() {
 	// 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: {
diff --git a/server/utils/csp.ts b/server/utils/csp.ts
index 4e31ad8..e433420 100644
--- a/server/utils/csp.ts
+++ b/server/utils/csp.ts
@@ -1,11 +1,35 @@
 /**
  * Build the CSP `connect-src` allowlist.
  *
- * Umami's tracker POSTs to `https://<UMAMI_DOMAIN>/api/send`. Without that
- * origin here, the beacon is blocked even after the script tag is nonced.
- * Use a full `https://` origin (not a wildcard) so a compromised Umami host
- * cannot widen the policy.
+ * 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,
@@ -17,7 +41,7 @@ export function cspConnectSrc({
 }): string[] {
 	return [
 		mode === 'development' ? 'ws:' : null,
-		sentryDsn ? '*.sentry.io' : null,
+		sentryOrigin(sentryDsn),
 		umamiDomain ? `https://${umamiDomain}` : null,
 		"'self'",
 	].filter((value): value is string => value != null)
@@ -29,8 +53,7 @@ export function cspConnectSrc({
  * `*.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` —
- * they were missing here, so every cover image was being blocked.
+ * 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
index 95f5399..727c61b 100644
--- a/tests/csp-capture.test.ts
+++ b/tests/csp-capture.test.ts
@@ -3,6 +3,7 @@ import {
 	CSP_VIOLATION_LIMIT,
 	cspCaptureScript,
 	drainCspViolations,
+	isSentryViolation,
 } from '#app/utils/csp'
 
 /** Run the inline script the way a browser would, against a fake window. */
@@ -143,3 +144,47 @@ describe('drainCspViolations', () => {
 		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
index 2d0ecfe..bd96d21 100644
--- a/tests/csp.test.ts
+++ b/tests/csp.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { cspConnectSrc, cspImgSrc } from '../server/utils/csp'
+import { cspConnectSrc, cspImgSrc, sentryOrigin } from '../server/utils/csp'
 
 describe('cspConnectSrc', () => {
 	it('includes the Umami origin when UMAMI_DOMAIN is set', () => {
@@ -29,7 +29,42 @@ describe('cspConnectSrc', () => {
 				sentryDsn: 'https://example@sentry.io/1',
 				umamiDomain: 'stats.example.com',
 			}),
-		).toEqual(['ws:', '*.sentry.io', 'https://stats.example.com', "'self'"])
+		).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()
 	})
 })
 
diff --git a/tests/monitoring.test.ts b/tests/monitoring.test.ts
index 3867aaf..2c931b0 100644
--- a/tests/monitoring.test.ts
+++ b/tests/monitoring.test.ts
@@ -217,4 +217,37 @@ describe('monitoring init', () => {
 			}
 		})
 	})
+
+	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()
+		}
+	})
 })