Content Security Policy and Live Feedback on vercel.com

[holgergp]

Summary

I am introducing CSP for a next.js app (version 13.4.12) deployed on vercel.com.
This works perfectly for most parts of the app thanks to the new docs at https://nextjs.org/docs/pages/building-your-application/configuring/content-security-policy

But sadly the vercel live feedback script (https://vercel.live/_next-live/feedback/feedback.js) is not being loaded correctly, as in the nonce attribute is missing when injecting this script. Is there a way to include this?
This leads to the live-feedback not working, unless I provide the unsfafe-inline-attribute and thus circumventing the whole nice nonce approach.

For reference I get this error messages:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-ZDQyYzczMmItMmEwZS00YWM1LTg4OGUtNmRjYjhmMDI5MDUx' https://vercel.live/ https://*.vercel.app/". Either the `
unsafe-inline' keyword, a hash ('sha256-nKHYgchWh4uBUFDFBqJSIO1l7Z42bX+gxXMx3Q6J4r0='), or a nonce ('nonce-...') is required to enable inline execution.

And thus:

feedback.js:1 Uncaught TypeError: v.contentWindow.initLiveFeedback is not a function
    at v.onload (feedback.js:1:610204)

Thank you very much!

Additional information

No response

Example

You can find an example here: https://with-strict-6b50yj4wz-holgergp.vercel.app/ This is a preview deployment (that contains the feedback capability) of this repo https://github.com/holgergp/with-strict-csp and this PR https://github.com/holgergp/with-strict-csp/pull/1
This is based on the official example: https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp with the differences of a providing an actual script.
If you look in the browser console you will find this:

[nkabour]

i'm having the same problem with next v13.5.4 :/ - have you find any solution for this?

[nkabour]

i found a way to fix this based on Vercel docs, i'm using this function to create CSP headers and update the request headers in next.js middleware:

// CSP headers here is set based on Next.js recommendations:
// https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy
export const createCspHeaders = (nonce: string) => {
  const defaultsCSPHeaders = `
    style-src 'self';
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    block-all-mixed-content;
    upgrade-insecure-requests;
  `

  // when environment is preview enable unsafe-inline scripts for vercel preview feedback/comments feature
  // and whitelist vercel's domains based on:
  // https://vercel.com/docs/workflow-collaboration/comments/specialized-usage#using-a-content-security-policy
  // and white-list vitals.vercel-insights
  // based on: https://vercel.com/docs/speed-insights#content-security-policy
  if (process.env?.VERCEL_ENV === "preview") {
    return `
      ${defaultsCSPHeaders}
      default-src 'none';
      script-src 'self' https://vercel.live/ https://vercel.com 'unsafe-inline';
      connect-src 'self' https://vercel.live/ https://vercel.com https://vitals.vercel-insights.com https://sockjs-mt1.pusher.com/ wss://ws-mt1.pusher.com/;
      img-src 'self' https://vercel.live/ https://vercel.com https://sockjs-mt1.pusher.com/ data: blob:;
      frame-src 'self' https://vercel.live/ https://vercel.com;
      `
  }

  // for production environment white-list vitals.vercel-insights
  // based on: https://vercel.com/docs/speed-insights#content-security-policy
  if (process.env.NODE_ENV === "production") {
    return `
      ${defaultsCSPHeaders}
      default-src 'none';
      script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
      img-src 'self' blob: data:;
      connect-src 'self' https://vitals.vercel-insights.com;
      `
  }

  // for dev environment enable unsafe-eval for hot-reload
  return `
    ${defaultsCSPHeaders}
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic' 'unsafe-eval';
    img-src 'self' blob: data:;
  `
}

[EduardoSP6]

I found the solution here: https://vercel.com/docs/workflow-collaboration/comments/specialized-usage

[dohooo]

Thanks! It's save my day!

[barziahmed]

@EduardoSP6 What was the solution? You're provided link doesn't open 😭

[StephaneChevassus]

Extracted from web archive:

You do not need to make these changes to your production environment. You can achieve this using Edge Middleware.

Add the following to script-src (Most commonly used):

script-src https://vercel.live/ https://vercel.com 'unsafe-inline'
Add the following to connect-src:

connect-src https://vercel.live/ https://vercel.com *.pusher.com *.pusherapp.com
Add the following to img-src:

img-src https://vercel.live/ https://vercel.com *.pusher.com/ data: blob:
Add the following to frame-src:

frame-src https://vercel.live/ https://vercel.com

[danthedaniel]

Here is what I use for Vercel Live:

connect-src: https://vercel.live https://*.pusher.com wss://*.pusher.com; img-src: https://vercel.com; script-src: https://vercel.live; style-src: https://vercel.com; font-src https://vercel.live; frame-src: https://vercel.live

I just went through and ensured this is the minimal set of required domains.

• vercel.live hosts the Live scripts and assets
• *.pusher.com manages websockets for collaboration
• vercel.com hosts user avatars shown near comments etc.

Every service that makes external requests really needs to simply post a CSP string like the one above for you to easily integrate into your service.

This is how I manage CSPs: https://gist.github.com/danthedaniel/cadcaa74888e79d954a7ac403ad41c33