Remove redundant header setting of "Content-Security-Policy".

[ar-work-acc]

Remove redundant header setting of "Content-Security-Policy".

[ijjk]

Allow CI Workflow Run

• approve CI run for commit: a2fb095

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

[darthmaim]

Good catch, but this still looks wrong, because you should only set x-nonce on the request, not on the response. So instead of removing response.headers.set, the { headers: requestHeaders } should be removed from NextResponse.next (maybe someone even sets other headers on the request before the CSP part in their middleware that should be internal only and not be exposed on the response).

[ar-work-acc]

Okay, thanks for your reply. I just wanted to point out the weird stuff in the documentation. You can fix this on your own, as I'll close the pull request (since more might need to be added to make the example more complete).

[darthmaim]

I took another look, and the code is actually correct right now.

1. This creates a new Headers instance and sets the x-nonce and Content-Security-Policy:

   const requestHeaders = new Headers(request.headers)
   requestHeaders.set('x-nonce', nonce)
   requestHeaders.set(
     'Content-Security-Policy',
     contentSecurityPolicyHeaderValue
   )

2. This then tells next to handle the request using the created headers (notice the request: , the response will not have those headers):

   const response = NextResponse.next({
     request: {
       headers: requestHeaders,
     },
   })

3. And finally the Content-Security-Policy header is also added to the response:

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

So nothing has to be changed 👍

[ar-work-acc]

Okay, after tracing the code:

  static next(init?: MiddlewareResponseInit) {
    const headers = new Headers(init?.headers)
    headers.set('x-middleware-next', '1')

    handleMiddlewareField(init, headers)
    return new NextResponse(null, { ...init, headers })
  }

interface MiddlewareResponseInit extends globalThis.ResponseInit {
 /**
  * These fields will override the request from clients.
  */
 request?: ModifiedRequest
}

interface ModifiedRequest {
  /**
   * If this is set, the request headers will be overridden with this value.
   */
  headers?: Headers
}

It seems that it will indeed only modify request headers.

But the description in the documentation is somewhat misleading:

The next() method is useful for Middleware, as it allows you to return early and continue routing.


import { NextResponse } from 'next/server'
 
return NextResponse.next()
You can also forward headers when producing the response:


import { NextResponse } from 'next/server'
 
// Given an incoming request...
const newHeaders = new Headers(request.headers)
// Add a new header
newHeaders.set('x-version', '123')
// And produce a response with the new headers
return NextResponse.next({
  request: {
    // New request headers
    headers: newHeaders,
  },
})

// And produce a response with the new headers

This is the line that got me.

Just clarifying things. Thanks for your help and time.