Vercel Live Feedback CSP Example

next.config.js

// See https://vercel.com/docs/workflow-collaboration/comments/specialized-usage#using-a-content-security-policy
const VERCEL_BASE_CSP = 'https://vercel.live/ https://vercel.com https://*.vercel.com'
const VERCEL_CSP_DEFAULT_SRC = `${VERCEL_BASE_CSP} wss://*.pusher.com`;
const VERCEL_CSP_IMG_SRC = `${VERCEL_BASE_CSP} https://sockjs-mt1.pusher.com/`;
const GOOGLE_FONTS_BASE_CSP = 'https://*.gstatic.com';
const ContentSecurityPolicy = `
  default-src 'self' *.mixpanel.com *.stripe.com *.sentry.io ${VERCEL_CSP_DEFAULT_SRC} ${GOOGLE_FONTS_BASE_CSP};
  style-src 'self' 'unsafe-inline';
  script-src 'self' '${process.env.VERCEL_ENV === "preview" ? 'unsafe-inline' : 'unsafe-eval'}' *.mixpanel.com *.stripe.com ${VERCEL_BASE_CSP};
  img-src 'self' ${VERCEL_CSP_IMG_SRC} data: blob:;
  object-src 'self' data:;
  frame-src 'self' *.stripe.com ${VERCEL_BASE_CSP};
`
const securityHeaders = [
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block'
  },
  {
    key: 'Content-Security-Policy',
    // Replace new lines with an empty string
    value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim()
  }
]

// Rest of next.config.js...

Why this gist? Because the Vercel docs lie! and they miss a lot of other important stuff...

Example includes things like Sentry, Mixpanel, and Stripe.
Note how unsafe-inline for script-src is only allowed in preview mode.