mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
Post-merge fixes for the TanStack Start migration (#46424) — things that broke on the TanStack build as master evolved under the migration branches. Kept on their own branch off master rather than piling onto the E2E-matrix PR (#47119); all land on master and cascade up to S6 + the big PR. Common theme: a master PR changed something the Next pipeline handles via `next/font` / `pages/_app.tsx` / `next.config.ts`, but the hand-rolled TanStack equivalent (`routes/__root.tsx`, `styles/fonts.css`, `vercel.ts`) wasn't updated to match — invisible on the Next deploy, broken only on TanStack. --- ## 1. Monaco loader path (#47182) #47182 re-nested the served Monaco assets from a flat `public/monaco-editor/` layout into `public/monaco-editor/vs/` and updated `pages/_app.tsx`, but `routes/__root.tsx` still pointed `loader.config` at the old path, so `loader.js` 404'd and **no Monaco editor mounted anywhere in the TanStack build**. Now mirrors the Next config (`${origin}${BASE_PATH}/monaco-editor/vs`, window-guarded for SSR). Was failing the whole `tanstack` E2E shard on #47119. ## 2. Inter + Manrope fonts (#47306) #47306 renamed Tailwind's sans var `--font-custom` → `--font-sans` and added `--font-heading` (Manrope), set via `next/font` on Next. `fonts.css` still only set the now-ignored `--font-custom`, so the body fell back to the theme's system chain (`Circular, custom-font, Helvetica…`) at weight 450 — that's the "Inter weights look wrong". Manrope was missing entirely. - Wire `--font-sans` (Inter) + `--font-heading` (Manrope) to match `next/font`. - **Vendor all three families** (Inter, Manrope, Source Code Pro) via `@font-face` so nothing depends on the Google Fonts CDN — matches `next/font` self-hosting, and (see below) `font-src` doesn't allow `fonts.gstatic.com` anyway. Verified in-browser: computed `body` → `Inter`, headings → `Manrope`, all loading from local `/assets/*.woff2`. ## 3. Security headers / CSP (next.config.ts `headers()`) The Next build sets X-Frame-Options / X-Content-Type-Options / HSTS / **Content-Security-Policy** / Referrer-Policy via `next.config.ts`. The TanStack build never carried these over — `vercel.ts` only set cache-control, so **the deployed TanStack dashboard shipped with no CSP at all**. The TanStack deploy serves a static shell (no server to attach headers), so they go in the Vercel config: - `security-headers.ts` — shared source of truth, reuses `getCSP()`, env-gated exactly like next.config. - `vercel.ts` — apply to every response (all base-path prefixes): full `getCSP()` + HSTS on platform. - `scripts/serve.js` — the non-platform set (`frame-ancestors 'none'`) for the self-hosted server. **Tested the policy in a real browser** (temporarily enforced it on the TanStack build via /test-supabase-local): everything passed except one real gap — `font-src` was missing `data:`, so GraphiQL's bundled Monaco codicon font and Stripe's payment-element fonts (both data: URIs) were blocked (37 violations on a cold load). Added `data:` to `font-src` in `csp.ts` → violations drop to zero, SQL editor Monaco renders clean. That gap affects the Next build too. --- ## 4. `node:path` import crashing `/project/[ref]/merge` Found by a full-site click-through of the TanStack build (all product areas, ongoing — see below). `useEdgeFunctionsDiff.ts` + `EdgeFunctionsDiffPanel.tsx` did `import { basename } from 'path'` in client code. Webpack (Next) polyfills `path` in the browser; Vite externalizes it, so the whole `/merge` route crashed with "Module \"path\" has been externalized for browser compatibility". Replaced the two `basename` call sites with a string helper. Verified in-browser: `/merge` renders. ## 5. URL shape — Next-style search-param semantics + shim fixes The dashboard produced malformed URLs vs the Next build (strange query params, trailing slashes, `##` hashes). Root cause + audit verified empirically against `@tanstack/react-router@1.170.10`; all fixed with unit tests and browser-verified: - **`createRouter` used TanStack's default JSON search codec** — `?flag=true` became `?flag=%22true%22` via links, repeated `?filter=…&filter=…` collapsed into a JSON array (breaking multi-filter/sort table-editor URLs and the account-page round-trip, which double-encoded), and search values arrived as numbers/booleans where the app expects strings. New `lib/router-search-params.ts` (Next-style: strings in, strings out, repeated keys → string[]) wired into the router. - **Link shim** (`compat/next/link.tsx`): `URL.hash` includes the leading `#` while TanStack's `hash` prop adds its own → every `href="…#section"` navigated to `##section` (hash-scroll broke); `Object.fromEntries(searchParams)` dropped repeated query params. Both fixed. - **Trailing slash injected before the query** on every `?`-only relative navigation (`/auth/providers/?provider=…`): fixed in the compat router (prefix current pathname) and via a custom nuqs adapter (`lib/nuqs-tanstack-adapter.tsx`) replacing the stock tanstack-router adapter, whose `navigate({ to: '?…' })` writes hit the same TanStack behavior (123 files use nuqs). - **Pathname-less `router.push({ query })` leaked path params** — Next re-consumes `ref`/`id` from `query` into the path pattern; the shim didn't, yielding `/editor/17597?schema=public&ref=<ref>&id=17597&filter=…` from table-editor filter/sort, linter panels, and advisor shortcuts. The shim now defaults the pathname to the current route pattern and backfills omitted params. - **Redirects dropped query + hash** (Next's `redirects()` preserves them): `__root.tsx` `matchRedirect` and `routes/index.tsx` now carry incoming params/hash through (consumed rule params excluded, destination's own params win). `/?next=new-project&projectName=zzz` → `/new/new-project?projectName=zzz`; `/sql/quickstarts?template=x#frag` → `/sql/examples?template=x#frag`. Browser-verified post-fix: advisors `?preset=WARN`, providers `?provider=Google`, `?schema=auth` — all clean (no `/?`, no leaks); repeated `filter` params survive hydration; `=true` unquoted; single `#`. ## 6. TanStack `navigate` corrupting query values (Logs Explorer SQL newline loss) TanStack router-core treats a query string embedded in `navigate({ to })` as part of the *path*: `decodePath` percent-decodes it and `sanitizePathSegment` strips control characters, silently deleting every `%0A`. Logs Explorer's SQL (`s` param) lost its newlines on Run/reload — `order by timestamp desc` / `limit 5` glued into `desclimit 5`, which then failed the LIMIT lint. Pre-existing on the TanStack build (the stock nuqs adapter had the same shape); Next unaffected. Fixed by never embedding query strings in `to`: the nuqs adapter and the compat `router.push`/`replace`/`prefetch` (plus the `next/navigation` shim) now pass search as an object through the app codec (`splitInternalUrl` hoisted to `lib/internal-url.ts`). Guard test drives a real `createRouter` with multi-line SQL through both producers. Browser-verified: newlines survive the full Run → reload → re-Run cycle. ## 7. Integration overview markdown never loaded (all integrations) `MarkdownContent` used a template-literal dynamic import (``import(`@/static-data/integrations/${id}/overview.md`)``) — webpack builds a context module for that, Vite can't analyze it, so every integration detail page threw `Failed to resolve module specifier` and rendered no overview text. Fixed with an explicit lazy registry of literal imports (`static-data/integrations/overviews.ts`, drift-guarded by a test) plus an `mdRawLoader()` Vite plugin mirroring next.config's turbopack raw-loader rule. Both runtimes keep working; md stays out of the main bundle. ## 8. GraphiQL editor never mounted (`exports is not defined`) Our `umdAmdShortCircuit()` Vite plugin (which disarms Monaco's global AMD loader for deps like papaparse) rewrote `typeof define === 'function' && define.amd` to `false` inside `monaco-editor`'s bundled copy of marked — whose UMD relies on its own *local* `define` shim — so the whole optimized monaco chunk failed to evaluate and GraphiQL's editor pane stayed blank. The check now only short-circuits when `define` is the global AMD loader. Browser-verified: all four GraphiQL Monaco panes mount, queries execute. (Known follow-up: GraphiQL's Monaco workers fall back to the main thread under Vite — functional, worker wiring is Next-specific `setup-workers/webpack`.) ## 9. `@sentry/nextjs` bundling Next internals — built TanStack bundle crashed (caught by E2E) The E2E suite against the **built** TanStack bundle (not the dev server) found lazy chunks like `table-editor-*.js` dead on arrival: `@sentry/nextjs` (imported by ~25 client files) drags in `next/dist/shared/lib/constants`, whose module scope evaluates `process?.features?.typescript` — optional chaining doesn't guard an undeclared `process` in the browser, so the whole chunk failed at load with `ReferenceError: process is not defined`. Dev shims `process`, which is why weeks of dev-server testing never saw it. Fixed by aliasing `@sentry/nextjs` → `compat/sentry-nextjs.ts` (re-exports `@sentry/react`, same deduped 10.59.0, plus explicit stand-ins for the three Next-only APIs) in the Vite build only. Verified: fresh build has zero Next-internals markers in any chunk; table editor loads clean; full E2E suite run against the built bundle. Note for the stack: `alaister/tanstack-start` / the E2E-matrix branch already carried a different fix for the same crash (a `next/constants` shim) that never made it to master — the cherry-pick onto those branches keeps **both** (the shim covers any other transitive importer; the alias keeps Next internals out of the client bundle entirely). **Follow-up found while fixing:** Sentry is never *initialized* in the TanStack runtime — `instrumentation-client.ts` / `sentry.server.config.ts` are Next-convention files nothing imports under TanStack, so `captureException` calls are silent no-ops. Needs an `@sentry/react` init (+ `tanstackRouterBrowserTracingIntegration`) wired into the TanStack client entry as its own PR. ## 10. GraphiQL Monaco workers + edge-function Deno typings (Vite-only gaps) - **GraphiQL's Monaco workers ran on the main thread** under Vite ("Could not create web worker(s)…" — `setup-workers/webpack`'s `new URL(...)` form isn't rewritten by Vite). A `graphiqlViteWorkers()` plugin resolves the import to graphiql's own `setup-workers/vite` variant for client builds (SSR untouched, Next untouched); the setup-workers chain is `optimizeDeps.exclude`d because the Rolldown optimizer can't load `?worker` ids. - **Edge-function editors silently lost their Deno typings** — `AIEditor` loaded `public/deno/*.d.ts` via `/* @vite-ignore */` imports that always failed at runtime under Vite. The `.md` raw loader is generalized into `rawTextLoader` (exact-path allowlist for the two typings files, served as virtual string modules so the dep scanner never parses `.d.ts` syntax), and the imports are now static-analyzable literals that both bundlers handle (turbopack's raw-loader rules match them on the Next side). ## Split out for reviewability App-level fixes that reproduce on the Next build too (DOM-nesting hydration errors, the ghost deleted-snippet nav, the recurring pg-meta `migrations` 400) moved to their own PR: #47667. Sentry initialization for the TanStack runtime (captures were silent no-ops) is #47666, stacked on this PR. ## Full-site test campaign Drove every dashboard product area on the local TanStack build (Playwright, human-style) hunting migration regressions: redirects/404/catch-alls, org, account, project home/branches/merge, table editor CRUD, SQL editor (Monaco/run/save/templates/AI), all database pages, all auth pages, storage CRUD, edge functions + realtime, logs/observability, advisors, settings, integrations hub incl. nested routes, global UI (palette/connect/switchers/theme/fonts), and a cross-cutting sweep (document titles, back/forward chain, hard-refresh hydration on deep URLs, trailing-slash active state). Every failure found is fixed above and re-verified in-browser; remaining console quirks were cross-checked against the deployed Next build and are pre-existing (tracked separately). ## To test Most fixes are already browser-verified + covered by unit tests and the self-hosted E2E suite; the last two landed after the final browser pass and still need an in-browser check: 1. **GraphiQL Monaco workers** — restart the dev server (clear `apps/studio/node_modules/.vite` once first — the optimizer cache may hold a stale prebundle of the worker chain). Open `/project/<ref>/integrations/graphiql/graphiql` with the console open: the `Could not create web worker(s). Falling back to loading web worker code in main thread` warning must be gone, and DevTools → Sources → Threads shows the three workers (json, editor, graphql). Autocomplete in the query editor stays responsive. 2. **Edge-function Deno typings** — `/project/<ref>/functions/new`: no "Failed to load … typings" console error, and typing `Deno.` in the editor offers typed completions (e.g. `Deno.env`). Spot-checks for the rest (all previously verified): - `/project/<ref>/merge` renders (no "Module path" crash). - Multi-line SQL in Logs Explorer survives Run → reload (no `desclimit` gluing, no LIMIT-lint false failure); `s` param keeps `%0A`. - `/auth/providers` → open a provider → `?provider=…` with no trailing slash before `?`; table-editor filter/sort URLs carry no leaked `ref`/`id` params; `/?next=new-project&projectName=x` lands on `/new/new-project?projectName=x`. - Integration detail pages (cron/queues/vault/data_api) show their overview prose; GraphiQL query editor mounts. - Built bundle (`MODE=test vite build` + `start:tanstack`): table editor loads with no `process is not defined`. - `curl -sI` any page on a platform deploy: `X-Content-Type-Options: nosniff` (was the invalid `no-sniff`). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Centralized integration overview markdown loading with registry-based lookup. * Improved Monaco loading/asset path handling for smoother editor startup. * **Bug Fixes** * Next-style navigation/search handling now preserves pathname, hash, repeated query keys, and special characters (including newlines). * Redirects now reliably carry over query and hash with correct precedence. * **Security/Configuration** * Updated CSP font sourcing and unified security headers delivery across environments; conditional HSTS behavior. * Refreshed font CSS variables and font-face definitions to match the theme. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --- ### Review feedback: non-prod favicon (Joshen) The TanStack `__root.tsx` hardcoded the prod favicon; local + hosted staging now use the white staging favicon (`/favicon/staging`), matching what `pages/_app.tsx` passes to `MetaFaviconsPagesRouter` for non-prod. Rather than pull the pages-router component into the TanStack head, it reuses the same synchronous `NEXT_PUBLIC_ENVIRONMENT` signal the file already uses for `IS_DEV_TOOLBAR_ENABLED` (the `head()` route option isn't a React component, so it can't run `_app`'s async CLI check — but the env signal covers the reported local/staging case). --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
242 lines
7.6 KiB
TypeScript
242 lines
7.6 KiB
TypeScript
const API_URL = process.env.NEXT_PUBLIC_API_URL
|
|
? new URL(process.env.NEXT_PUBLIC_API_URL).origin
|
|
: ''
|
|
const SUPABASE_URL = process.env.SUPABASE_URL ? new URL(process.env.SUPABASE_URL).origin : ''
|
|
const GOTRUE_URL = process.env.NEXT_PUBLIC_GOTRUE_URL
|
|
? new URL(process.env.NEXT_PUBLIC_GOTRUE_URL).origin
|
|
: ''
|
|
const MARKETPLACE_API_URL = process.env.NEXT_PUBLIC_MARKETPLACE_API_URL
|
|
? new URL(process.env.NEXT_PUBLIC_MARKETPLACE_API_URL).origin
|
|
: ''
|
|
|
|
const SUPABASE_PROJECTS_URL = 'https://*.supabase.co https://*.storage.supabase.co'
|
|
const SUPABASE_PROJECTS_URL_WS = 'wss://*.supabase.co'
|
|
|
|
// construct the URL for the Websocket Local URLs
|
|
let SUPABASE_LOCAL_PROJECTS_URL_WS = ''
|
|
if (SUPABASE_URL) {
|
|
const url = new URL(SUPABASE_URL)
|
|
const wsUrl = `${url.hostname}:${url.port}`
|
|
SUPABASE_LOCAL_PROJECTS_URL_WS = `ws://${wsUrl} wss://${wsUrl}`
|
|
}
|
|
|
|
// Needed to test docs search in local dev
|
|
const SUPABASE_DOCS_PROJECT_URL = process.env.NEXT_PUBLIC_SUPABASE_URL
|
|
? new URL(process.env.NEXT_PUBLIC_SUPABASE_URL).origin
|
|
: ''
|
|
|
|
// Needed to test docs content API in local dev
|
|
const SUPABASE_CONTENT_API_URL = process.env.NEXT_PUBLIC_CONTENT_API_URL
|
|
? new URL(process.env.NEXT_PUBLIC_CONTENT_API_URL).origin
|
|
: ''
|
|
|
|
const isDevOrStaging =
|
|
process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview' ||
|
|
process.env.NEXT_PUBLIC_ENVIRONMENT === 'local' ||
|
|
process.env.NEXT_PUBLIC_ENVIRONMENT === 'staging'
|
|
|
|
const NIMBUS_STAGING_PROJECTS_URL = 'https://*.nmb-proj.com'
|
|
const NIMBUS_STAGING_PROJECTS_URL_WS = 'wss://*.nmb-proj.com'
|
|
|
|
const NIMBUS_PROD_PROJECTS_URL = process.env.NIMBUS_PROD_PROJECTS_URL || ''
|
|
const NIMBUS_PROD_PROJECTS_URL_WS = process.env.NIMBUS_PROD_PROJECTS_URL_WS || ''
|
|
|
|
const SUPABASE_STAGING_PROJECTS_URL = 'https://*.supabase.red https://*.storage.supabase.red'
|
|
const SUPABASE_STAGING_PROJECTS_URL_WS = 'wss://*.supabase.red'
|
|
const SUPABASE_COM_URL = 'https://supabase.com'
|
|
const CLOUDFLARE_CDN_URL = 'https://cdnjs.cloudflare.com'
|
|
const HCAPTCHA_SUBDOMAINS_URL = 'https://*.hcaptcha.com'
|
|
const HCAPTCHA_ASSET_URL = 'https://newassets.hcaptcha.com'
|
|
const HCAPTCHA_JS_URL = 'https://js.hcaptcha.com'
|
|
const CONFIGCAT_URL = 'https://cdn-global.configcat.com'
|
|
const CONFIGCAT_PROXY_URL = ['staging', 'local'].includes(process.env.NEXT_PUBLIC_ENVIRONMENT ?? '')
|
|
? 'https://configcat.supabase.green'
|
|
: 'https://configcat.supabase.com'
|
|
const STRIPE_SUBDOMAINS_URL = 'https://*.stripe.com'
|
|
const STRIPE_JS_URL = 'https://js.stripe.com'
|
|
const STRIPE_NETWORK_URL = 'https://*.stripe.network'
|
|
const CLOUDFLARE_URL = 'https://www.cloudflare.com'
|
|
const VERCEL_URL = 'https://vercel.com'
|
|
const VERCEL_INSIGHTS_URL = 'https://*.vercel-insights.com'
|
|
const GITHUB_API_URL = 'https://api.github.com'
|
|
const GITHUB_USER_CONTENT_URL = 'https://raw.githubusercontent.com'
|
|
const GITHUB_USER_AVATAR_URL = 'https://avatars.githubusercontent.com'
|
|
const GOOGLE_USER_AVATAR_URL = 'https://lh3.googleusercontent.com'
|
|
|
|
// This is a custom domain for Stape, which isused for GTM servers
|
|
const STAPE_URL = 'https://ss.supabase.com'
|
|
|
|
const VERCEL_LIVE_URL = 'https://vercel.live'
|
|
const SENTRY_URL =
|
|
'https://*.ingest.sentry.io https://*.ingest.us.sentry.io https://*.ingest.de.sentry.io'
|
|
const SUPABASE_ASSETS_URL =
|
|
process.env.NEXT_PUBLIC_ENVIRONMENT === 'staging'
|
|
? 'https://frontend-assets.supabase.green'
|
|
: 'https://frontend-assets.supabase.com'
|
|
const POSTHOG_URL = isDevOrStaging ? 'https://ph.supabase.green' : 'https://ph.supabase.com'
|
|
|
|
const USERCENTRICS_URLS = 'https://*.usercentrics.eu'
|
|
const USERCENTRICS_APP_URL = 'https://app.usercentrics.eu'
|
|
|
|
// used by vercel live preview
|
|
const PUSHER_URL = 'https://*.pusher.com'
|
|
const PUSHER_URL_WS = 'wss://*.pusher.com'
|
|
|
|
const GOOGLE_MAPS_API_URL = 'https://maps.googleapis.com'
|
|
|
|
export function getCSP() {
|
|
const DEFAULT_SRC_URLS = [
|
|
API_URL,
|
|
SUPABASE_URL,
|
|
GOTRUE_URL,
|
|
MARKETPLACE_API_URL,
|
|
SUPABASE_LOCAL_PROJECTS_URL_WS,
|
|
SUPABASE_PROJECTS_URL,
|
|
SUPABASE_PROJECTS_URL_WS,
|
|
HCAPTCHA_SUBDOMAINS_URL,
|
|
CONFIGCAT_URL,
|
|
CONFIGCAT_PROXY_URL,
|
|
STRIPE_SUBDOMAINS_URL,
|
|
STRIPE_NETWORK_URL,
|
|
CLOUDFLARE_URL,
|
|
VERCEL_INSIGHTS_URL,
|
|
GITHUB_API_URL,
|
|
GITHUB_USER_CONTENT_URL,
|
|
SUPABASE_ASSETS_URL,
|
|
USERCENTRICS_URLS,
|
|
STAPE_URL,
|
|
GOOGLE_MAPS_API_URL,
|
|
POSTHOG_URL,
|
|
...(!!NIMBUS_PROD_PROJECTS_URL ? [NIMBUS_PROD_PROJECTS_URL, NIMBUS_PROD_PROJECTS_URL_WS] : []),
|
|
CLOUDFLARE_CDN_URL,
|
|
]
|
|
const SCRIPT_SRC_URLS = [
|
|
CLOUDFLARE_CDN_URL,
|
|
HCAPTCHA_JS_URL,
|
|
STRIPE_JS_URL,
|
|
SUPABASE_ASSETS_URL,
|
|
STAPE_URL,
|
|
POSTHOG_URL,
|
|
USERCENTRICS_URLS,
|
|
]
|
|
const FRAME_SRC_URLS = [
|
|
HCAPTCHA_ASSET_URL,
|
|
STRIPE_JS_URL,
|
|
STAPE_URL,
|
|
...(isDevOrStaging ? [POSTHOG_URL] : []),
|
|
]
|
|
const IMG_SRC_URLS = [
|
|
SUPABASE_URL,
|
|
SUPABASE_COM_URL,
|
|
SUPABASE_PROJECTS_URL,
|
|
GITHUB_USER_AVATAR_URL,
|
|
GOOGLE_USER_AVATAR_URL,
|
|
SUPABASE_ASSETS_URL,
|
|
USERCENTRICS_APP_URL,
|
|
STAPE_URL,
|
|
USERCENTRICS_URLS,
|
|
MARKETPLACE_API_URL,
|
|
...(!!NIMBUS_PROD_PROJECTS_URL ? [NIMBUS_PROD_PROJECTS_URL, NIMBUS_PROD_PROJECTS_URL_WS] : []),
|
|
]
|
|
const STYLE_SRC_URLS = [CLOUDFLARE_CDN_URL, SUPABASE_ASSETS_URL]
|
|
const FONT_SRC_URLS = [CLOUDFLARE_CDN_URL, SUPABASE_ASSETS_URL]
|
|
|
|
const defaultSrcDirective = [
|
|
`default-src 'self'`,
|
|
...DEFAULT_SRC_URLS,
|
|
...(isDevOrStaging
|
|
? [
|
|
SUPABASE_STAGING_PROJECTS_URL,
|
|
SUPABASE_STAGING_PROJECTS_URL_WS,
|
|
NIMBUS_STAGING_PROJECTS_URL,
|
|
NIMBUS_STAGING_PROJECTS_URL_WS,
|
|
VERCEL_LIVE_URL,
|
|
SUPABASE_DOCS_PROJECT_URL,
|
|
SUPABASE_CONTENT_API_URL,
|
|
]
|
|
: []),
|
|
PUSHER_URL_WS,
|
|
SENTRY_URL,
|
|
].join(' ')
|
|
|
|
const imgSrcDirective = [
|
|
`img-src 'self'`,
|
|
`blob:`,
|
|
`data:`,
|
|
...IMG_SRC_URLS,
|
|
...(isDevOrStaging
|
|
? [SUPABASE_STAGING_PROJECTS_URL, NIMBUS_STAGING_PROJECTS_URL, VERCEL_URL]
|
|
: []),
|
|
].join(' ')
|
|
|
|
const scriptSrcDirective = [
|
|
`script-src 'self'`,
|
|
`'unsafe-eval'`,
|
|
`'unsafe-inline'`,
|
|
...SCRIPT_SRC_URLS,
|
|
VERCEL_LIVE_URL,
|
|
PUSHER_URL,
|
|
GOOGLE_MAPS_API_URL,
|
|
].join(' ')
|
|
|
|
const frameSrcDirective = [`frame-src 'self'`, ...FRAME_SRC_URLS, VERCEL_LIVE_URL].join(' ')
|
|
|
|
const styleSrcDirective = [
|
|
`style-src 'self'`,
|
|
`'unsafe-inline'`,
|
|
...STYLE_SRC_URLS,
|
|
VERCEL_LIVE_URL,
|
|
].join(' ')
|
|
|
|
// `data:` is required — GraphiQL's bundled Monaco ships the codicon icon font
|
|
// as a data: URI, and Stripe's payment element inlines its fonts the same way.
|
|
const fontSrcDirective = [`font-src 'self'`, `data:`, ...FONT_SRC_URLS, VERCEL_LIVE_URL].join(' ')
|
|
|
|
const workerSrcDirective = [`worker-src 'self'`, `blob:`, `data:`].join(' ')
|
|
|
|
const connectSrcDirective = [
|
|
`connect-src 'self'`,
|
|
`data:`,
|
|
`blob:`,
|
|
...DEFAULT_SRC_URLS,
|
|
...(isDevOrStaging
|
|
? [
|
|
SUPABASE_STAGING_PROJECTS_URL,
|
|
SUPABASE_STAGING_PROJECTS_URL_WS,
|
|
NIMBUS_STAGING_PROJECTS_URL,
|
|
NIMBUS_STAGING_PROJECTS_URL_WS,
|
|
VERCEL_LIVE_URL,
|
|
SUPABASE_DOCS_PROJECT_URL,
|
|
SUPABASE_CONTENT_API_URL,
|
|
]
|
|
: []),
|
|
PUSHER_URL_WS,
|
|
SENTRY_URL,
|
|
].join(' ')
|
|
|
|
const cspDirectives = [
|
|
connectSrcDirective,
|
|
defaultSrcDirective,
|
|
imgSrcDirective,
|
|
scriptSrcDirective,
|
|
frameSrcDirective,
|
|
styleSrcDirective,
|
|
fontSrcDirective,
|
|
workerSrcDirective,
|
|
`object-src 'none'`,
|
|
`base-uri 'self'`,
|
|
`form-action 'self'`,
|
|
`frame-ancestors 'none'`,
|
|
`block-all-mixed-content`,
|
|
...(process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' &&
|
|
process.env.NEXT_PUBLIC_ENVIRONMENT === 'prod'
|
|
? [`upgrade-insecure-requests`]
|
|
: []),
|
|
]
|
|
|
|
const csp = cspDirectives.join('; ') + ';'
|
|
|
|
// Replace newline characters and spaces
|
|
return csp.replace(/\s{2,}/g, ' ').trim()
|
|
}
|