Tengo la necesidad de agregar un encabezado a cada solicitud al servidor.
Lo hago usando _midleware así:
export async function middleware(req: NextRequest): Promise<NextResponse> { req.headers.append('x-custom-header', '1337'); return NextResponse.next(); } Si hago console.log(req.headers) veo que se ha agregado el encabezado de la solicitud:
BaseHeaders [Headers] { [Symbol(map)]: { accept: [ '*/*' ], 'accept-encoding': [ 'gzip, deflate, br' ], 'accept-language': [ 'en-GB,en-US;q=0.9,en;q=0.8' ], 'cache-control': [ 'no-cache' ], connection: [ 'keep-alive' ], cookie: ..., host: ..., pragma: [ 'no-cache' ], referer: ..., ..., 'x-custom-header': [ '1337' ] } }Sin embargo, esto no modifica la solicitud: no hay un encabezado de solicitud en el navegador.
¿Por qué no se modifica la solicitud? ¿Hay formas alternativas de modificar los encabezados de solicitud en Next.js?
En realidad, es una pregunta interesante, ya que aunque he trabajado mucho en arquitecturas SPA, no había investigado nextjs y su comportamiento SSR.
FALSIFICACIÓN DE ENCABEZADOS PERSONALIZADOS Y SOLICITUD DE CROSS SITE
Un buen ángulo para resolver su problema es pensar en otros casos de uso comunes para encabezados personalizados y buscar una solución nextjs. Uno relacionado con la seguridad es enviar un encabezado de solicitud personalizado de falsificación de solicitud entre sitios , por ejemplo, example-csrf , en solicitudes de API de cambio de datos.
Cuando busqué las formas de nextjs para hacerlo, encontré esta biblioteca next-csrf y sospecho que le permitirá resolver su problema. Por lo que puedo ver, funciona así, aunque creo que entenderás los detalles de nextjs mejor que yo:
La clase de middleware se ejecuta en el sitio web cuando se recibe una solicitud por primera vez y crea el valor del encabezado de la solicitud.
Luego, el valor se proporciona a los componentes de React, que se ejecutarán en el navegador:
import { getCsrfToken } from '../lib/csrf'; function MyApp({ Component, pageProps }) { return <Component {...pageProps} csrfToken={getCsrfToken()} /> } const response = await fetch('/api/protected', { 'headers': { 'XSRF-TOKEN': csrfToken, } });También hay algunos problemas / comentarios publicados en el repositorio CSRF GitHub; leer algunos de ellos puede ayudarlo con su propia solución.
PENSAMIENTOS DE ARQUITECTURA
Es interesante ver esto, ya que sé que nextjs es muy respetado y permite un mejor SEO, etc. También me recuerda a las tecnologías de sitios web más antiguas en las que los desarrolladores a menudo tenían problemas, debido a que tenían que cambiar entre el código del lado del cliente y del lado del servidor. Tener el control de las solicitudes de datos es una base técnica importante.
Como curiosidad, en Curity tenemos algunos recursos de código centrados en la seguridad de SPA, la implementación de CDN y la experiencia del desarrollador, en caso de que algo de esto sea útil, para futuras referencias. No usamos SSR actualmente, pero es posible que queramos decir más sobre los casos de uso de SSR en el futuro:
Puede agregar encabezados personalizados de forma similar a como lo haría agregando encabezados de seguridad , usando headers en su next.config.js :
// next.config.js // You can choose which headers to add to the list // after learning more below. const securityHeaders = [] module.exports = { async headers() { return [ { // Apply these headers to all routes in your application. source: '/:path*', headers: securityHeaders, }, ] }, }