next secure headers
v2.2.0 - Support navigation directives for CSP
// /next.config.js
module . exports = {
async headers ( ) {
return [ {
source : "/(.*)" ,
headers : createSecureHeaders ( {
contentSecurityPolicy : {
directives : {
defaultSrc : "'self'" ,
styleSrc : [ "'self'" , "https://stackpath.bootstrapcdn.com" ] ,
} ,
} ,
forceHTTPSRedirect : [ true , { maxAge : 60 * 60 * 24 * 4 , includeSubDomains : true } ] ,
referrerPolicy : "same-origin" ,
} )
} ] ;
} ,
} ; createSecureHeaders en next.config.js (recomendado)withSecureHeaders en los componentes de la páginaforceHTTPSRedirectframeGuardnoopennosniffxssProtectioncontentSecurityPolicyexpectCTreferrerPolicycreateSecureHeaderswithSecureHeaderscreateHeadersObjectwithSecureHeaders| CARACTERÍSTICAS | Lo que puedes hacer |
|---|---|
| ⚛️ diseñado para Next.js | Usar para next.config.js o componentes de página en /pages |
| Reglas aplicadas predeterminadas | Ayuda a tu proyecto incluso si no tienes conocimiento |
| ? Tipo seguro | Puede usar con TypeScript |
El siguiente-cabeza de seguridad es similar al casco, que establece los encabezados de respuesta HTTP relacionados con la seguridad para Express.js.
Next.js admite que se utilizarán en marcos Node.js como Express.js. Por lo tanto, puede usar el casco con su proyecto Next.js si crea un servidor personalizado, pero el equipo de desarrollo Next.js no recomienda un servidor personalizado. Además, están trabajando para implementar para ser posible usar Next.js sin un servidor personalizado. De hecho, Next.js 9 admite un enrutamiento dinámico, por lo que no necesitamos crear un servidor personalizado para implementarlo utilizando, como las siguientes rutas, que requiere un servidor personalizado.
// /next.config.js
const { createSecureHeaders } = require ( "next-secure-headers" ) ;
module . exports = {
async headers ( ) {
return [ { source : "/(.*)" , headers : createSecureHeaders ( ) } ] ;
} ,
} ; Si desea usar el casco, requiere usar un servidor personalizado de una manera recomendada. Para resolver este problema, nació la siguiente seguridad. El siguiente-cabeza de seguridad está construido para el proyecto Next.js para que pueda especificar cualquier encabezado en next.config.js o componentes de la página.
Las siguientes son las reglas que tienen y el casco de la próxima seguridad tiene. El siguiente casco está inspirado en el casco, pero no tiene algunas reglas por alguna razón.
| cabezadores de la siguiente seguridad | Casco | Comentario | |
|---|---|---|---|
| Seguridad de transporte estricto | forceHTTPSRedirect | hsts | |
| X-Opciones | frameGuard | frameguard | |
| X-Download-Opciones | noopen | ieNoOpen | |
| Opciones de tipo X | nosniff | noSniff | |
| Protección x-xss | xssProtection | xssFilter | |
| Contenido Seguridad-Policía | contentSecurityPolicy | contentSecurityPolicy | |
| Esperar-CT | expectCT | expectCt | |
| Policía referente | referrerPolicy | referrerPolicy | |
| X-DNS-Prefetch-Control | - | dnsPrefetchControl | Esto tiene implicaciones de privacidad, pero esto mejora el rendimiento. |
| Política | - | featurePolicy | La política de características mejora la seguridad, pero todavía está funcionando. |
| X-Powered-by | - | hidePoweredBy | Next.js admite para eliminar este encabezado en next.config.js . |
| Relacionado con el caché | - | nocache | Como dijo el casco, el almacenamiento en caché tiene muchos beneficios. |
| Comodines | - | crossdomain | Adobe Flash es una de las antiguas tecnologías web. |
$ npm install -D next-secure-headersSi está utilizando el hilo, use el siguiente comando.
$ yarn add -D next-secure-headers❗️ para
withSecureHeaders. Si desea usarwithSecureHeaders, debe instalar sin opción-D(es decir, instalar comodependencies, nodevDependencies).
Hay dos formas de especificar encabezados. Una es usar createSecureHeaders en next.config.js , y otro es usar withSecureHeaders en los componentes de la página.
createSecureHeaders en next.config.js (recomendado)❗️ Next.js 9.5 o superior se requiere. La función
headersha sido compatible desde Next.js 9.5, por lo que debe usar Next.js 9.5 o superior si desea usar de esta manera.
? Para rutas Next.js 10 e I18N. Si su proyecto usa las rutas next.js 10 y i18n incorporadas, y desea aplicar reglas para todas las páginas, debe especificar
"/:path*"a la propiedadsourceen lugar de"/(.*)". Por el contrario, si su proyecto no usa rutas I18N incluso si usa Next.js 10, debe especificar"/(.*)"en su lugar. Estas limitaciones son quizás errores en Next.js.
Esta forma utiliza la función createSecureHeaders y una forma de configuración de encabezado incorporada por Next.js. Esto no se requiere ningún servidor, se puede usar en páginas estáticas y puede retener la optimización estática automática. Si su proyecto no usa ningún servidor (usando páginas estáticas o SSG) o si acaba de crear un proyecto Next.js, recomiendo retener páginas estáticas y adoptar de esta manera.
Importar createSecureHeaders de los principales encabezados de la seguridad y usarlo en la función Async headers en next.config.js .
// /next.config.js
const { createSecureHeaders } = require ( "next-secure-headers" ) ;
module . exports = {
async headers ( ) {
return [ { source : "/(.*)" , headers : createSecureHeaders ( ) } ] ;
} ,
} ;De manera predeterminada, los encabezados de la siguiente educación aplican algunas reglas. Si desea habilitar o deshabilitar las reglas, puede dar opciones al primer argumento de la función.
module . exports = {
async headers ( ) {
return [ {
source : "/(.*)" ,
headers : createSecureHeaders ( {
contentSecurityPolicy : {
directives : {
defaultSrc : "'self'" ,
styleSrc : [ "'self'" , "https://stackpath.bootstrapcdn.com" ] ,
} ,
} ,
forceHTTPSRedirect : [ true , { maxAge : 60 * 60 * 24 * 4 , includeSubDomains : true } ] ,
referrerPolicy : "same-origin" ,
} ) ,
} ] ;
} ,
} ;Además, puede configurar diferentes encabezados mediante URL siguiendo los documentos oficiales.
withSecureHeaders en los componentes de la página❗️ Se requieren servidores. De esta manera requiere cualquier servidor porque
withSecureHeadersusagetServerSidePropsde Next.js.
Use una función exportada para su aplicación Next.js en /pages/_app.tsx . Además, puede usar en cualquier componente de página en /pages/xxx.tsx en su lugar.
// /pages/_app.tsx
import { withSecureHeaders } from "next-secure-headers" ;
class Application extends App {
...
}
export default withSecureHeaders ( ) ( Application ) ;De manera predeterminada, los encabezados de la siguiente educación aplican algunas reglas. Si desea habilitar o deshabilitar las reglas, puede dar opciones al primer argumento de la función.
export default withSecureHeaders ( {
contentSecurityPolicy : {
directives : {
defaultSrc : "'self'" ,
styleSrc : [ "'self'" , "https://stackpath.bootstrapcdn.com" ] ,
} ,
} ,
forceHTTPSRedirect : [ true , { maxAge : 60 * 60 * 24 * 4 , includeSubDomains : true } ] ,
referrerPolicy : "same-origin" ,
} ) ( Application ) ; forceHTTPSRedirect {
forceHTTPSRedirect: boolean | [ true , Partial < { maxAge : number ; includeSubDomains : boolean ; preload : boolean } > ] ;
}| Valor predeterminado | MDN |
|---|---|
[true, { maxAge: 63072000 }] | https://developer.mozilla.org/docs/web/http/headers/strict-transport-security |
Esto es para establecer el encabezado "Strict-Transport-Security (HSTS)" y es para evitar ataques de hombre en el medio durante las redirecciones de HTTP a HTTPS. Para habilitar esto, se recomienda encarecidamente si usa HTTPS (SSL) en sus servidores.
Puede dar true si desea habilitar esta regla, o puede especificar opciones dando [true, OPTION_OBJECT] . Por defecto, esto establece max-age en dos años (63,072,000 segundos).
frameGuard {
frameGuard: false | "deny" | "sameorigin" | [ "allow-from" , { uri : string | URL } ] ;
}| Valor predeterminado | MDN |
|---|---|
"deny" | https://developer.mozilla.org/docs/web/http/headers/xframe-options |
Esto es para establecer el encabezado "X-Frame-Options" y es para evitar ataques con clickjacking. "deny" es muy recomendable si no usa elementos de cuadro como iframe .
noopen {
noopen: false | "noopen" ;
}| Valor predeterminado | MDN |
|---|---|
"noopen" | https://developer.mozilla.org/docs/web/http/headers/x- download-options |
Esto es para establecer el encabezado "X-Download-Options" y es para evitar abrir archivos descargados automáticamente para IE8+ (ataques de manejo de MIME).
nosniff {
nosniff: false | "nosniff" ;
}| Valor predeterminado | MDN |
|---|---|
"nosniff" | https://developer.mozilla.org/docs/web/http/headers/x-content-type-options |
Esto es para establecer el encabezado de "opciones de tipo X-Content" y es para evitar ataques de olfateo de mime.
xssProtection {
xssProtection: false | "sanitize" | "block-rendering" | [ "report" , { uri : string | URL } ] ;
}| Valor predeterminado | MDN |
|---|---|
"sanitize" | https://developer.mozilla.org/docs/web/http/headers/x-xss-protection |
Esto es para establecer el encabezado "X-XSS-Protection" y es para evitar ataques XSS.
Si especifica "sanitize" , esto establece el encabezado en "1" y los navegadores desinfectarán un área insegura. Si especifica "block-rendering" , esto establece el encabezado en "1; mode=block" y los navegadores bloquearán una página. "X-XSS-Protection" bloquea muchos ataques XSS, pero se recomienda usar la política de seguridad de contenido en comparación con esto.
contentSecurityPolicy {
contentSecurityPolicy :
| false
| {
directives :
& Partial < {
childSrc : string | string [ ] ;
connectSrc : string | string [ ] ;
defaultSrc : string | string [ ] ;
fontSrc : string | string [ ] ;
frameSrc : string | string [ ] ;
imgSrc : string | string [ ] ;
manifestSrc : string | string [ ] ;
mediaSrc : string | string [ ] ;
prefetchSrc : string | string [ ] ;
objectSrc : string | string [ ] ;
scriptSrc : string | string [ ] ;
scriptSrcElem : string | string [ ] ;
scriptSrcAttr : string | string [ ] ;
styleSrc : string | string [ ] ;
styleSrcElem : string | string [ ] ;
styleSrcAttr : string | string [ ] ;
workerSrc : string | string [ ] ;
} >
& Partial < {
baseURI : string | string [ ] ;
pluginTypes : string | string [ ] ;
sandbox :
| true
| "allow-downloads-without-user-activation"
| "allow-forms"
| "allow-modals"
| "allow-orientation-lock"
| "allow-pointer-lock"
| "allow-popups"
| "allow-popups-to-escape-sandbox"
| "allow-presentation"
| "allow-same-origin"
| "allow-scripts"
| "allow-storage-access-by-user-activation"
| "allow-top-navigation"
| "allow-top-navigation-by-user-activation" ;
} >
& Partial < {
formAction : string | string [ ] ;
frameAncestors : string | string [ ] ;
navigateTo : string | string [ ] ;
reportURI : string | URL | ( string | URL ) [ ] ;
reportTo : string ;
} > ;
reportOnly?: boolean ;
} ;
}| Valor predeterminado | MDN |
|---|---|
false | https://developer.mozilla.org/docs/web/http/headers/content-security-policy |
Esto es para establecer el encabezado "Contenido-Security-Policy" o el encabezado "Contenido-Security-Policy-Report-Report" y es para evitar cargar y ejecutar recursos no permiso.
Si da un cierto a reportOnly , esto establece "solo informes de control de seguridad de contenido" para valorar en lugar de "Contenido-Security-Policy".
También puede especificar directivas utilizando nombres de casos en cadena como child-src en lugar de childSrc .
❗️ Al configurar
frameAncestors: las opciones X-Frame tienen prioridad. La Sección "Relación con las opciones X-Frame" de la especificación de CSP dice: "Si se entrega un recurso con una política que incluye una directiva llamada Frame-Achestors y cuya disposición se" aplica ", entonces el encabezado de X-Frame-Opciones debe ignorarse" , pero el encabezado de las opciones de opciones de Frame-Opciones de Frome 40 & Firefox.Por lo tanto, si establece
frameAncestors, debe establecerframeGuardenfalse.
expectCT {
expectCT: boolean | [ true , Partial < { maxAge : number ; enforce : boolean ; reportURI : string | URL } > ] ;
}| Valor predeterminado | MDN |
|---|---|
false | https://developer.mozilla.org/docs/web/http/headers/expect-ct |
Esto es para establecer el encabezado "Espere-CT" y es para decirle a los navegadores que esperen la transparencia del certificado.
referrerPolicy {
referrerPolicy :
| false
| "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin"
| ( "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" ) [ ] ;
}| Valor predeterminado | MDN |
|---|---|
false | https://developer.mozilla.org/docs/web/http/headers/referrer-policy |
Esto es para establecer el encabezado "Referrer-Policy" y es para evitar ser referente por otros servidores. Puede especificar uno o más valores para navegadores heredados que no admitan un valor específico.
createSecureHeaders import { createSecureHeaders } from "next-secure-headers" ;
createSecureHeaders ( { referrerPolicy : "same-origin" } ) ;
// [
// {
// key: "Referrer-Policy",
// value: "same-origin",
// },
// ] createSecureHeaders es una función para devolver los encabezados como objeto que sigue un formato como { key, value } .
createSecureHeaders ( OPTIONS ) ;El primer argumento acepta opciones para reglas.
withSecureHeaders import { withSecureHeaders } from "next-secure-headers" ;
export default withSecureHeaders ( { referrerPolicy : "same-origin" } ) ( Page ) ; withSecureHeaders es un hoc para especificar encabezados usando getServerSideProps . Puede usar esta función para la aplicación ( /pages/_app.tsx ) y los componentes de la página ( /pages/xxx.tsx ). Esto no está disponible en next.config.js .
withSecureHeaders ( OPTIONS ) ( APPLICATION_OR_COMPONENT ) ;El primer argumento acepta opciones para las reglas, y el argumento de la función devuelta acepta la aplicación o los componentes de la página. El valor devuelto es un nuevo componente React.
createHeadersObject import { createHeadersObject } from "next-secure-headers" ;
createHeadersObject ( { referrerPolicy : "same-origin" } ) ;
// {
// "Referrer-Policy": "same-origin",
// } createHeadersObject es una función para devolver los encabezados como objeto.
createHeadersObject ( OPTIONS ) ;El primer argumento acepta opciones para reglas.
En general, el encabezado de respuesta HTTP de X-Powered debe eliminarse de los encabezados de respuesta porque ayuda a los piratas informáticos a obtener la información del servidor.
Los próximos, los encabezados no admiten para eliminar el encabezado de X-Powered, pero Next.js admite que hacer.
// next.config.js
module . exports = {
poweredByHeader : false ,
} ; Si da falso a poweredByHeader en next.config.js , Next.js elimina el encabezado de los encabezados de respuesta.
withSecureHeaders // /pages/_app.tsx
export default withSecureHeaders ( { referrerPolicy : "same-origin" } ) ( Application ) ;
// /pages/about.tsx
export default withSecureHeaders ( { referrerPolicy : "no-referrer-when-downgrade" } ) ( Page ) ;
// But actually the server responds "same-origin"...Los propietarios de la próxima seguridad no admiten los encabezados de respuesta en los componentes de la página infantil debido a estar restringido por la arquitectura Next.js.
// /config/secure-headers.ts
import { withSecureHeaders } from "next-secure-headers" ;
export const secureHeadersDefaultOption : Parameters < typeof withSecureHeaders > [ 0 ] = {
referrerPolicy : "same-origin" ,
} ;
// /pages/_app.tsx
import { secureHeadersDefaultOption } from "../config/secure-headers" ;
export default withSecureHeaders ( secureHeadersDefaultOption ) ( Application ) ;
// /pages/about.tsx
export default withSecureHeaders ( {
... secureHeadersDefaultOption ,
referrerPolicy : "no-referrer-when-downgrade" ,
} ) ( Page ) ;Para resolver esto, debe definir la opción como un módulo, luego debe importar y fusionar el objeto.
Los informes de errores y las solicitudes de extracción son bienvenidas en GitHub en https://github.com/jagaapple/next-segure-headers. Este proyecto está destinado a ser un espacio seguro y acogedor para la colaboración, y se espera que los contribuyentes se adhieran al Código de Conducta del Pacto de contribuyente.
Lea las pautas de contribución antes del desarrollo y la contribución.
La biblioteca está disponible como código abierto bajo los términos de la licencia MIT.
Copyright 2020 Jaga Apple. Reservados todos los derechos.
