Page d'accueil>Lié à la programmation>Code Source AI
Télécharger

têtes de sécurisation

⛑️ Définit des en-têtes de réponse sécurisés pour next.js. ? 

 // /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" ,
      } )
    } ] ;
  } ,
} ;

Table des matières

  • Table des matières
  • Caractéristiques
    • Pourquoi utiliser les têtes de sécurisation suivantes au lieu du casque?
      • t-t-t-t-t-thers vs casque
  • Démarrage rapide
    • Exigences
    • Installation
    • Installation
      • Utiliser createSecureHeaders dans next.config.js (recommandé)
      • Utiliser withSecureHeaders dans les composants de la page
  • Règles
    • forceHTTPSRedirect
    • frameGuard
    • noopen
    • nosniff
    • xssProtection
    • contentSecurityPolicy
    • expectCT
    • referrerPolicy
  • API
    • createSecureHeaders
    • withSecureHeaders
    • createHeadersObject
  • Recettes
    • Comment retirer l'en-tête Purmentered-by
    • Remplace les en-têtes dans une page spécifique en utilisant withSecureHeaders
  • Contribution aux t-t-t-t-t-t-thers
  • Licence

Caractéristiques

CARACTÉRISTIQUES Ce que tu peux faire
⚛️ conçu pour Next.js Utiliser pour next.config.js ou composants de page dans /pages
Règles appliquées par défaut Aidez votre projet même si vous n'avez pas de connaissances
? Type de coffre-fort Vous pouvez utiliser avec TypeScript

Pourquoi utiliser les têtes de sécurisation suivantes au lieu du casque?

Les t-headers de la prochaine sécurisation sont similaires à Helmet, qui définit les en-têtes de réponse HTTP liés à la sécurité pour express.js.

Next.js prend en charge à utiliser dans les cadres Node.js tels que Express.js. Vous pouvez donc utiliser le casque avec votre projet Next.js si vous créez un serveur personnalisé, mais l'équipe de développement Next.js ne recommande pas de serveur personnalisé. En outre, ils travaillent à implémenter afin d'être possibles d'utiliser Next.js sans serveur personnalisé. En fait, Next.js 9 prend en charge le routage dynamique, nous n'avons donc pas besoin de créer un serveur personnalisé afin de l'implémenter à l'aide de Next-Routes, qui nécessite un serveur personnalisé. 

 // /next.config.js
const { createSecureHeaders } = require ( "next-secure-headers" ) ;

module . exports = {
  async headers ( ) {
    return [ { source : "/(.*)" , headers : createSecureHeaders ( ) } ] ;
  } ,
} ;

Si vous souhaitez utiliser le casque, il faut utiliser un serveur personnalisé par rapport à une manière recommandée. Pour résoudre ce problème, les t-headers de la prochaine sécurisation sont nés. Next-Secure-Headers est conçu pour le projet Next.js afin que vous puissiez spécifier tous les en-têtes dans les composants next.config.js ou Page.

t-t-t-t-t-thers vs casque

Les règles suivantes sont les règles que les prochains-sécurisés ont et le casque a. Les capteurs de sécurisation des prochains sont inspirés par le casque, mais il n'a pas de règles pour une raison quelconque.

têtes de sécurisation Casque Commentaire
Sécurité de transport strict forceHTTPSRedirect hsts
Options X-Frame frameGuard frameguard
Options X-Download noopen ieNoOpen
Options de type X-Content nosniff noSniff
PROTECTION X-XSS xssProtection xssFilter
Contenu-Sécurité-politique contentSecurityPolicy contentSecurityPolicy
S'attendre à expectCT expectCt
Police de références referrerPolicy referrerPolicy
X-DNS-Prefetch-Control - dnsPrefetchControl Cela a des implications de confidentialité, mais cela améliore les performances.
Politique de fonctionnalité - featurePolicy La politique des fonctionnalités améliore la sécurité, mais elle fonctionne encore.
X-alimenté par X - hidePoweredBy Next.js prend en charge pour supprimer cet en-tête dans next.config.js .
Lié au cache - nocache Comme l'a dit Helmet, la mise en cache a beaucoup d'avantages.
X-Permed-Cross-Domain-Polies - crossdomain Adobe Flash est l'une des anciennes technologies Web.

Démarrage rapide

Exigences

  • NPM ou fil
  • Node.js 10.0.0 ou plus
  • Suivant.js 8.0.0 ou plus

Installation 

$ npm install -D next-secure-headers

Si vous utilisez du fil, utilisez la commande suivante. 

$ yarn add -D next-secure-headers

❗️ pour withSecureHeaders . Si vous souhaitez utiliser withSecureHeaders , vous devez installer sans option -D (c'est-à-dire l'installation en tant que dependencies et non devDependencies ).

Installation

Il existe deux façons de spécifier les en-têtes. L'une consiste à utiliser createSecureHeaders dans next.config.js , et une autre est d'utiliser withSecureHeaders dans les composants de la page.

Utiliser createSecureHeaders dans next.config.js (recommandé)

❗️ Next.js 9,5 ou plus est requis. La fonction headers a été prise en charge depuis Next.js 9.5, vous devez donc utiliser Next.js 9.5 ou plus si vous souhaitez utiliser de cette façon.

? Pour les routes suivantes.js 10 et i18n. Si votre projet utilise Next.js 10 et les itinéraires I18N intégrés et que vous souhaitez appliquer des règles pour toutes les pages, vous devez spécifier "/:path*" vers la propriété source au lieu de "/(.*)" . Inversement, si votre projet n'utilise pas de routes i18n même si vous utilisez Next.js 10, vous devez spécifier "/(.*)" à la place. Ces limitations sont peut-être des bugs dans Next.js.

Cette façon utilise la fonction createSecureHeaders et un chemin de configuration d'en-tête intégré par suivant.js. Ceci n'est pas nécessaire de serveurs, peut être utilisé dans les pages statiques et peut conserver l'optimisation statique automatique. Si votre projet n'utilise aucun serveur (en utilisant des pages statiques ou SSG) ou si vous venez de créer un projet Next.js, je recommande de conserver des pages statiques et d'adopter de cette façon.

Import createSecureHeaders à partir des t-t-t-t-theaders et utilisez-le dans la fonction asynchrone en headers dans next.config.js . 

 // /next.config.js
const { createSecureHeaders } = require ( "next-secure-headers" ) ;

module . exports = {
  async headers ( ) {
    return [ { source : "/(.*)" , headers : createSecureHeaders ( ) } ] ;
  } ,
} ;

Par défaut, les t-t-t-t-t-t-thers appliquent certaines règles. Si vous souhaitez activer ou désactiver les règles, vous pouvez offrir des options au premier argument de la fonction. 

 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" ,
      } ) ,
    } ] ;
  } ,
} ;

En outre, vous pouvez configurer différents en-têtes par URL suivant les documents officiels.

Utiliser withSecureHeaders dans les composants de la page

❗️ Les serveurs sont nécessaires. De cette façon, il faut tous les serveurs car withSecureHeaders utilise getServerSideProps de next.js.

Utilisez une fonction exportée pour votre application Next.js dans /pages/_app.tsx . Vous pouvez également utiliser dans n'importe quelle page composants dans /pages/xxx.tsx à la place. 

 // /pages/_app.tsx
import { withSecureHeaders } from "next-secure-headers" ;

class Application extends App {
  ...
}

export default withSecureHeaders ( ) ( Application ) ;

Par défaut, les t-t-t-t-t-t-thers appliquent certaines règles. Si vous souhaitez activer ou désactiver les règles, vous pouvez offrir des options au premier argument de la fonction. 

 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 ) ;

Règles

forceHTTPSRedirect 

 {
  forceHTTPSRedirect: boolean | [ true , Partial < { maxAge : number ; includeSubDomains : boolean ; preload : boolean } > ] ;
}
Valeur par défaut MDN
[true, { maxAge: 63072000 }] https://developer.mozilla.org/docs/web/http/heders/strict-transport-security

Il s'agit de définir une en-tête "strict-transport-security (hSTS)" et c'est pour empêcher les attaques de l'homme au milieu pendant les redirections de HTTP vers HTTPS. Pour l'activer, cela est fortement recommandé si vous utilisez HTTPS (SSL) sur vos serveurs.

Vous pouvez donner true si vous souhaitez activer cette règle, ou si vous pouvez spécifier des options en donnant [true, OPTION_OBJECT] . Par défaut, cela définit max-age à deux ans (63 072 000 secondes).

frameGuard 

 {
  frameGuard: false | "deny" | "sameorigin" | [ "allow-from" , { uri : string | URL } ] ;
}
Valeur par défaut MDN
"deny" https://developer.mozilla.org/docs/web/http/heders/x-frame-options

Il s'agit de définir l'en-tête "X-Frame-Options" et c'est pour empêcher les attaques de jacking de clics. "deny" est fortement recommandé si vous n'utilisez pas d'éléments de trame tels que iframe .

noopen 

 {
  noopen: false | "noopen" ;
}
Valeur par défaut MDN
"noopen" https://developer.mozilla.org/docs/web/http/heders/x-download-options

Il s'agit de définir l'en-tête "X-Download-Options" et il s'agit d'empêcher d'ouvrir automatiquement les fichiers téléchargés pour IE8 + (attaques de manipulation MIME).

nosniff 

 {
  nosniff: false | "nosniff" ;
}
Valeur par défaut MDN
"nosniff" https://developer.mozilla.org/docs/web/http/heders/x-content-type-options

Il s'agit de définir une en-tête "X-Content-Type-Options" et c'est pour empêcher les attaques de reniflement MIME.

xssProtection 

 {
  xssProtection: false | "sanitize" | "block-rendering" | [ "report" , { uri : string | URL } ] ;
}
Valeur par défaut MDN
"sanitize" https://developer.mozilla.org/docs/web/http/heders/x-xss-protection

Il s'agit de définir l'en-tête "X-XSS-Protection" et c'est pour empêcher les attaques XSS.

Si vous spécifiez "sanitize" , cela définit l'en-tête vers "1" et les navigateurs désinfecteront la zone dangereuse. Si vous spécifiez "block-rendering" , cela définit l'en-tête sur "1; mode=block" et les navigateurs bloquent le rendu d'une page. "X-XSS-Protection" bloque de nombreuses attaques XSS, mais la politique de sécurité du contenu est recommandée à l'utiliser par rapport à cela.

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 ;
      } ;
}
Valeur par défaut MDN
false https://developer.mozilla.org/docs/web/http/heders/content-security-policy

Il s'agit de définir un en-tête "Content-Security-Policy" ou "Content-Security-Policy-Report-Only" et c'est pour éviter de charger et d'exécuter des ressources non alloculées.

Si vous donnez vrai à reportOnly , cela définit "Content-Security-Policy-Report-Only" pour évaluer au lieu de "Content-Security-Policy".

Vous pouvez également spécifier des directives à l'aide de noms de cas de chaîne tels que child-src au lieu de childSrc .

❗️ Lorsque vous définissez frameAncestors : les options X-Frame sont prioritaires. La section "Relation avec les options X-Frame" de la spécification CSP indique: "Si une ressource est délivrée avec une politique qui comprend une directive nommée Frame-Orestors et dont la disposition est" appliquer ", alors l'en-tête X-Frame-Options doit être ignoré" , mais Chrome 40 & Firefox 35 Ignorez la directive des cadres Framestors et suivez la direction de X-Frame-Options.

Par conséquent, si vous définissez frameAncestors vous devez définir frameGuard sur false .

expectCT 

 {
  expectCT: boolean | [ true , Partial < { maxAge : number ; enforce : boolean ; reportURI : string | URL } > ] ;
}
Valeur par défaut MDN
false https://developer.mozilla.org/docs/web/http/heders/expect-ct

Il s'agit de définir l'en-tête "Awing-CT" et il s'agit de dire aux navigateurs de s'attendre à la transparence du certificat.

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" ) [ ] ;
}
Valeur par défaut MDN
false https://developer.mozilla.org/docs/web/http/heders/referrer-policy

Il s'agit de définir l'en-tête "référentiel-politique" et c'est pour éviter d'être référé par d'autres serveurs. Vous pouvez spécifier une ou plusieurs valeurs pour les navigateurs héritées qui ne prend pas en charge une valeur spécifique.

API

createSecureHeaders 

 import { createSecureHeaders } from "next-secure-headers" ;

createSecureHeaders ( { referrerPolicy : "same-origin" } ) ;
// [
//   {
//     key: "Referrer-Policy",
//     value: "same-origin",
//   },
// ]

createSecureHeaders est une fonction pour retourner les en-têtes comme objet suivant un format comme { key, value } . 

 createSecureHeaders ( OPTIONS ) ;

Le premier argument accepte les options de règles.

withSecureHeaders 

 import { withSecureHeaders } from "next-secure-headers" ;

export default withSecureHeaders ( { referrerPolicy : "same-origin" } ) ( Page ) ;

withSecureHeaders est un HOC pour spécifier des en-têtes à l'aide de getServerSideProps . Vous pouvez utiliser cette fonction pour l'application ( /pages/_app.tsx ) et les composants de page ( /pages/xxx.tsx ). Ceci n'est pas disponible dans next.config.js . 

 withSecureHeaders ( OPTIONS ) ( APPLICATION_OR_COMPONENT ) ;

Le premier argument accepte les options de règles et l'argument de la fonction retournée accepte les composants de l'application ou de la page. La valeur retournée est un nouveau composant React.

createHeadersObject 

 import { createHeadersObject } from "next-secure-headers" ;

createHeadersObject ( { referrerPolicy : "same-origin" } ) ;
// {
//   "Referrer-Policy": "same-origin",
// }

createHeadersObject est une fonction pour retourner les en-têtes en tant qu'objet. 

 createHeadersObject ( OPTIONS ) ;

Le premier argument accepte les options de règles.

Recettes

Comment retirer l'en-tête Purmentered-by

En général, l'en-tête de réponse HTTP à X-alimentée doit être supprimé des en-têtes de réponse car il aide les pirates à obtenir les informations du serveur.

Les capteurs de sécurisation suivants ne prennent pas en charge de supprimer l'en-tête X-propulsé par X, mais Suivant.js prend en charge à faire. 

 // next.config.js
module . exports = {
  poweredByHeader : false ,
} ;

Si vous donnez un faux à poweredByHeader dans next.config.js , next.js supprime l'en-tête des en-têtes de réponse.

Remplace les en-têtes dans une page spécifique en utilisant 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"...

Les t-headers de Next-Sécure ne supporte pas de remplacer les en-têtes de réponse dans les composants de la page enfant en raison de la limitation de l'architecture 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 ) ;

Pour résoudre ce problème, vous devez définir l'option comme un seul module, vous devez donc importer et fusionner l'objet.

Contribution aux t-t-t-t-t-t-thers

Les rapports de bogues et les demandes de traction sont les bienvenus sur GitHub à https://github.com/jagaapple/next-secure-headers. Ce projet est destiné à être un espace sûr et accueillant pour la collaboration, et les contributeurs devraient adhérer au Code de conduite de l'alliance des contributeurs.

Veuillez lire les directives contributives avant le développement et la contribution.

Licence

La bibliothèque est disponible en open source en vertu des termes de la licence MIT.

Copyright 2020 Jaga Apple. Tous droits réservés.

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout