Add CSP config for Firebase, Metabase and the API.

Author: apognu

packages/app-builder/src/entry.server.tsx

@@ -13,7 +13,7 @@ import { PassThrough } from 'stream';
 
 import { initServerServices } from './services/init.server';
 import { captureUnexpectedRemixError } from './services/monitoring';
-import { checkEnv, getServerEnv } from './utils/environment';
+import { checkEnv, getClientEnvVars, getServerEnv } from './utils/environment';
 import { NonceProvider } from './utils/nonce';
 
 const ABORT_DELAY = 70000;
@@ -120,16 +120,29 @@ function handleBrowserRequest(
 
         responseHeaders.set('Content-Type', 'text/html');
 
+        const clientEnv = getClientEnvVars();
+        const firebaseUrl = clientEnv.FIREBASE_CONFIG.withEmulator
+          ? clientEnv.FIREBASE_CONFIG.authEmulatorUrl
+          : 'https://identitytoolkit.googleapis.com';
+
+        const externalDomains = ['cdn.segment.com', 'api.segment.io', '*.sentry.io'];
+
         const cspOrigins = [
+          ['base-uri', "'none'"],
           ['default-src', "'self'"],
           ['frame-ancestors', "'none'"],
           ['object-src', "'none'"],
-          ['style-src', "'self' 'unsafe-inline'"],
-          ['script-src', `'self' 'nonce-${nonce}' 'unsafe-eval' https://cdn.segment.com`],
-          ['connect-src', "'self' localhost:9099"],
-          ['frame-src', `https://subdomain.metabaseapp.com`],
+          ['style-src', "'self' 'unsafe-inline'"], // unsafe-inline seems to trigger a lot of errors, even though it did not seem to break the UI.
+          ['script-src', `'nonce-${nonce}' 'unsafe-eval' 'strict-dynamic'`], // unsafe-eval seems to be required by lottie.js for home page animations.
+          [
+            'connect-src',
+            `'self' ${clientEnv.MARBLE_API_URL} ${firebaseUrl} ${externalDomains.map((d) => `https://${d}`).join(' ')}`,
+          ],
+          ['img-src', "'self' data:"],
         ];
 
+        if (clientEnv.METABASE_URL) cspOrigins.push(['frame-src', clientEnv.METABASE_URL]);
+
         responseHeaders.set(
           'content-security-policy',
           cspOrigins.flatMap((rule) => rule.join(' ')).join('; '),

packages/app-builder/src/utils/environment.ts

@@ -27,6 +27,8 @@ const PublicEnvVarsSchema = z.object({
   MARBLE_API_URL_SERVER: z.string(),
   MARBLE_APP_URL: z.string(),
 
+  METABASE_URL: z.string().optional(),
+
   FIREBASE_AUTH_EMULATOR_HOST: z.string().optional(),
   FIREBASE_API_KEY: z.string(),
   FIREBASE_APP_ID: z.string().optional(),
@@ -87,6 +89,7 @@ interface ServerEnvVars {
   MARBLE_API_URL_SERVER: string;
   MARBLE_APP_URL: string;
   FIREBASE_CONFIG: FirebaseConfig;
+  METABASE_URL?: string;
   SENTRY_DSN?: string;
   SENTRY_ENVIRONMENT?: string;
   SEGMENT_WRITE_KEY?: string;
@@ -117,6 +120,7 @@ interface ClientEnvVars {
   MARBLE_APP_URL: string;
   SENTRY_DSN?: string;
   SENTRY_ENVIRONMENT?: string;
+  METABASE_URL?: string;
 }
 export function getClientEnvVars(): ClientEnvVars {
   return {
@@ -126,6 +130,7 @@ export function getClientEnvVars(): ClientEnvVars {
     MARBLE_APP_URL: getServerEnv('MARBLE_APP_URL'),
     SENTRY_DSN: getServerEnv('SENTRY_DSN'),
     SENTRY_ENVIRONMENT: getServerEnv('SENTRY_ENVIRONMENT'),
+    METABASE_URL: getServerEnv('METABASE_URL'),
   };
 }