csp: add content security policy for dotcom (#3952)

followup to https://github.com/tldraw/tldraw/pull/3907
This introduces, more formally, a CSP policy for dotcom.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

### Release Notes

- Security: add CSP to dotcom.

.github/workflows/deploy.yml

@@ -70,6 +70,7 @@ jobs:
           WORKER_SENTRY_DSN: ${{ secrets.WORKER_SENTRY_DSN }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          SENTRY_CSP_REPORT_URI: ${{ secrets.SENTRY_CSP_REPORT_URI }}
           SUPABASE_LITE_ANON_KEY: ${{ secrets.SUPABASE_LITE_ANON_KEY }}
           VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
 

apps/dotcom-worker/src/lib/types.ts

@@ -31,6 +31,7 @@ export interface Environment {
 
 	TLDRAW_ENV: string | undefined
 	SENTRY_DSN: string | undefined
+	SENTRY_CSP_REPORT_URI: string | undefined
 	IS_LOCAL: string | undefined
 	WORKER_NAME: string | undefined
 }

apps/dotcom/scripts/build.ts

@@ -10,11 +10,34 @@ import { nicelog } from '../../../scripts/lib/nicelog'
 import { T } from '@tldraw/validate'
 import { getMultiplayerServerURL } from '../vite.config'
 
+const cspDirectives: { [key: string]: string[] } = {
+	'default-src': [`'self'`],
+	'connect-src': [
+		`'self'`,
+		`ws:`,
+		`wss:`,
+		`https://bookmark-extractor.tldraw.com`,
+		`https://assets.tldraw.xyz`,
+		`https://*.tldraw.workers.dev`,
+		`https://*.ingest.sentry.io`,
+	],
+	'font-src': [`'self'`, `https://fonts.googleapis.com`, `https://fonts.gstatic.com`],
+	'frame-src': [`https:`],
+	'img-src': [`'self'`, `http:`, `https:`, `data:`, `blob:`],
+	'media-src': [`'self'`, `http:`, `https:`, `data:`, `blob:`],
+	'style-src': [`'self'`, `'unsafe-inline'`, `https://fonts.googleapis.com`],
+	'report-uri': [process.env.SENTRY_CSP_REPORT_URI ?? ``],
+}
+
+const csp = Object.keys(cspDirectives)
+	.map((directive) => `${directive} ${cspDirectives[directive].join(' ')}`)
+	.join('; ')
+
 const commonSecurityHeaders = {
 	'Strict-Transport-Security': 'max-age=63072000; includeSubDomains; preload',
 	'X-Content-Type-Options': 'nosniff',
 	'Referrer-Policy': 'no-referrer-when-downgrade',
-	// 'Content-Security-Policy': `default-src 'unsafe-inline' data: blob: ws: *`,
+	'Content-Security-Policy': csp,
 }
 
 // We load the list of routes that should be forwarded to our SPA's index.html here.

scripts/deploy.ts

@@ -34,6 +34,7 @@ const env = makeEnv([
 	'RELEASE_COMMIT_HASH',
 	'SENTRY_AUTH_TOKEN',
 	'SENTRY_DSN',
+	'SENTRY_CSP_REPORT_URI',
 	'SUPABASE_LITE_ANON_KEY',
 	'SUPABASE_LITE_URL',
 	'TLDRAW_ENV',