CSP example documentation question

[therealgilles]

In the CSP documentation, I am curious as to why setting the response headers here is necessary:

  response.headers.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )

Doesn't the code below already set this header on the response?

  requestHeaders.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )
 
  const response = NextResponse.next({
    request: {
      headers: requestHeaders, // <-- HERE
    },
  })

[icyJoseph]

Right, it is because the Middleware model, AFAIK, sends the request, which could be potentially modified, to the application, and at the same time, generates a response, that'll be given to the client.

So, in this case, it is the request headers, that the application will be see, that are getting updated/modified, through this:

  const response = NextResponse.next({
    request: {
      headers: requestHeaders, // <-- HERE
    },
  })

However, the response object, going back to the client, doesn't have that modification, unless you do:

  response.headers.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )

I think, this other bit of documentation, conveys that too: https://nextjs.org/docs/app/building-your-application/routing/middleware#setting-headers

  // Clone the request headers and set a new header `x-hello-from-middleware1`
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-hello-from-middleware1', 'hello')
 
  // You can also set request headers in NextResponse.next
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  })
 
  // Set a new response header `x-hello-from-middleware2`
  response.headers.set('x-hello-from-middleware2', 'hello')
  return response

Here's the origin of the changes: #57410 (comment), and the initial change, https://github.com/vercel/next.js/pull/58300/files ~ there's a commit, af2c3f7, which I can't find the PR for, yeah, that's it