Merge pull request #29 from thomasKn/csp

Update CSP
frontvibe · Feb 3, 2024 · c89050b · c89050b
2 parents 8a46b5e + 30c5cfa
commit c89050b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 45 deletions.
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -11,12 +11,8 @@ export default async function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
-  const {NonceProvider, header, nonce} = createContentSecurityPolicy({
-    connectSrc: ['*'],
-    fontSrc: ['*.sanity.io', "'self'"],
-    frameAncestors: ['localhost:*', '*.sanity.studio'],
-    imgSrc: ['*.sanity.io', 'https://cdn.shopify.com', "'self'", 'localhost:*'],
-  });
+  const {NonceProvider, header, nonce} =
+    createContentSecurityPolicy(createCspHeaders());
 
   const body = await renderToReadableStream(
     <NonceProvider>
@@ -38,8 +34,11 @@ export default async function handleRequest(
   }
 
   responseHeaders.set('Content-Type', 'text/html');
-  if (!isVercelPreview({remixContext})) {
-    // Disable CSP in Vercel preview environments to allow Vercel live feedback tool
+
+  // Set CSP headers only for non-preview environments
+  // to allow vercel preview feedback/comments feature
+  const VERCEL_ENV = getVercelEnv();
+  if (!VERCEL_ENV || VERCEL_ENV !== 'preview') {
     responseHeaders.set('Content-Security-Policy', header);
   }
 
@@ -49,16 +48,30 @@ export default async function handleRequest(
   });
 }
 
-function isVercelPreview({remixContext}: {remixContext: EntryContext}) {
-  // Parse remix context to check if we're in a Vercel preview environment
-  const context: any =
-    remixContext.serverHandoffString &&
-    JSON.parse(remixContext.serverHandoffString);
-  const isDev =
-    context?.state?.loaderData?.root?.env?.NODE_ENV === 'development';
+export const createCspHeaders = () => {
+  // Default CSP headers, will be used as a base for all environments
+  const defaultsCSPHeaders = {
+    connectSrc: ['*', 'self'],
+    fontSrc: ['*.sanity.io', "'self'", 'localhost:*'],
+    frameAncestors: ['localhost:*', '*.sanity.studio'],
+    frameSrc: ['self'],
+    imgSrc: ['*.sanity.io', 'https://cdn.shopify.com', "'self'", 'localhost:*'],
+    scriptSrc: ["'self'", 'localhost:*', 'https://cdn.shopify.com'],
+  };
+
+  // For Vercel production environment white-list vitals.vercel-insights
+  const VERCEL_ENV = getVercelEnv();
+  if (VERCEL_ENV === 'production') {
+    defaultsCSPHeaders.connectSrc.push('https://vitals.vercel-insights.com');
+    defaultsCSPHeaders.imgSrc.push('blob:', 'data:');
+  }
 
-  if (!isDev) {
-    return process.env.VERCEL_ENV === 'preview';
+  return defaultsCSPHeaders;
+};
+
+const getVercelEnv = () => {
+  if (typeof process !== 'undefined') {
+    return process.env.VERCEL_ENV;
   }
-  return false;
-}
+  return null;
+};
diff --git a/app/lib/env.server.ts b/app/lib/env.server.ts
@@ -3,31 +3,27 @@
  * some are only available through the process.env object
  */
 
-export function envVariables(env: Env) {
-  return {
-    NODE_ENV: env.NODE_ENV ?? process.env.NODE_ENV,
-    PRIVATE_STOREFRONT_API_TOKEN:
-      env.PRIVATE_STOREFRONT_API_TOKEN ??
-      process.env.PRIVATE_STOREFRONT_API_TOKEN,
-    PUBLIC_STORE_DOMAIN:
-      env.PUBLIC_STORE_DOMAIN ?? process.env.PUBLIC_STORE_DOMAIN,
-    PUBLIC_STOREFRONT_API_TOKEN:
-      env.PUBLIC_STOREFRONT_API_TOKEN ??
-      process.env.PUBLIC_STOREFRONT_API_TOKEN,
-    PUBLIC_STOREFRONT_API_VERSION:
-      env.PUBLIC_STOREFRONT_API_VERSION ??
-      process.env.PUBLIC_STOREFRONT_API_VERSION,
+export function envVariables(contextEnv: Env) {
+  let env: Env | NodeJS.ProcessEnv;
+
+  if (typeof process !== 'undefined') {
+    // Process is accessible in Vercel environment
+    env = process.env;
+  } else {
+    env = contextEnv;
+  }
 
-    PUBLIC_STOREFRONT_ID:
-      env.PUBLIC_STOREFRONT_ID ?? process.env.PUBLIC_STOREFRONT_ID,
-    SANITY_STUDIO_API_VERSION:
-      env.SANITY_STUDIO_API_VERSION ?? process.env.SANITY_STUDIO_API_VERSION,
-    SANITY_STUDIO_DATASET:
-      env.SANITY_STUDIO_DATASET ?? process.env.SANITY_STUDIO_DATASET,
-    SANITY_STUDIO_PROJECT_ID:
-      env.SANITY_STUDIO_PROJECT_ID ?? process.env.SANITY_STUDIO_PROJECT_ID,
-    SANITY_STUDIO_URL: env.SANITY_STUDIO_URL ?? process.env.SANITY_STUDIO_URL,
-    SANITY_STUDIO_USE_STEGA:
-      env.SANITY_STUDIO_USE_STEGA ?? process.env.SANITY_STUDIO_USE_STEGA,
+  return {
+    NODE_ENV: env.NODE_ENV,
+    PRIVATE_STOREFRONT_API_TOKEN: env.PRIVATE_STOREFRONT_API_TOKEN,
+    PUBLIC_STORE_DOMAIN: env.PUBLIC_STORE_DOMAIN,
+    PUBLIC_STOREFRONT_API_TOKEN: env.PUBLIC_STOREFRONT_API_TOKEN,
+    PUBLIC_STOREFRONT_API_VERSION: env.PUBLIC_STOREFRONT_API_VERSION,
+    PUBLIC_STOREFRONT_ID: env.PUBLIC_STOREFRONT_ID,
+    SANITY_STUDIO_API_VERSION: env.SANITY_STUDIO_API_VERSION,
+    SANITY_STUDIO_DATASET: env.SANITY_STUDIO_DATASET,
+    SANITY_STUDIO_PROJECT_ID: env.SANITY_STUDIO_PROJECT_ID,
+    SANITY_STUDIO_URL: env.SANITY_STUDIO_URL,
+    SANITY_STUDIO_USE_STEGA: env.SANITY_STUDIO_USE_STEGA,
   };
 }
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "version": "0.0.0",
   "scripts": {
     "build": "shopify hydrogen build",
-    "dev": "shopify hydrogen dev --worker --codegen",
+    "dev": "shopify hydrogen dev --codegen",
     "dev:all": "run-p dev sanity:dev",
     "preview": "npm run build && shopify hydrogen preview",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",