Startseite>Programmierbezogen>AI-Quellcode
Herunterladen

Nächste-Sicherheitsleiter

⛑️ setzt sichere Antwort -Header für 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" ,
      } )
    } ] ;
  } ,
} ;

Inhaltsverzeichnis

  • Inhaltsverzeichnis
  • Merkmale
    • Warum Nextsecure-Header anstelle von Helm verwenden?
      • Nächste-Sicherheitsleiter gegen Helm
  • Schneller Start
    • Anforderungen
    • Installation
    • Aufstellen
      • Verwendung createSecureHeaders in next.config.js (empfohlen)
      • Verwenden Sie withSecureHeaders in Seitenkomponenten
  • Regeln
    • forceHTTPSRedirect
    • frameGuard
    • noopen
    • nosniff
    • xssProtection
    • contentSecurityPolicy
    • expectCT
    • referrerPolicy
  • API
    • createSecureHeaders
    • withSecureHeaders
    • createHeadersObject
  • Rezepte
    • So entfernen Sie X-Kraft-By-Header
    • Überschreibt die Header auf einer bestimmten Seite mit withSecureHeaders
  • Beitrag zu den Nächsträgern
  • Lizenz

Merkmale

MERKMALE Was Sie tun können
⚛️ für Next.js konzipiert Verwendung für next.config.js oder Seitenkomponenten in /pages
Standard angewandte Regeln Helfen Sie Ihrem Projekt, auch wenn Sie kein Wissen haben
? Geben Sie sicher Sie können mit TypeScript verwenden

Warum Nextsecure-Header anstelle von Helm verwenden?

Nächste-Sicherheitsleiter sind ein ähnlicher Helm, der HTTP-Antwortheader im Zusammenhang mit der Sicherheit für Express.js festlegt.

Next.js unterstützt es, in Node.js -Frameworks wie Express.js verwendet zu werden. Sie können also Helm mit Ihrem nächsten.js -Projekt verwenden, wenn Sie einen benutzerdefinierten Server erstellen. Das Next.js -Entwicklungsteam empfiehlt jedoch keinen benutzerdefinierten Server. Außerdem arbeiten sie an der Implementierung, um es ohne einen benutzerdefinierten Server zu verwenden. Tatsächlich unterstützt NEXT.JS 9 Dynamic Routing, sodass wir keinen benutzerdefinierten Server erstellen müssen, um ihn mithilfe von Next-Routes zu implementieren, für die ein benutzerdefinierter Server erforderlich ist. 

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

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

Wenn Sie Helm verwenden möchten, müssen Sie einen benutzerdefinierten Server gegen eine empfohlene Weise verwenden. Um dieses Problem zu lösen, wurde die Anleitung zum nächsten Seelen geboren. Für das Next-Secure-Anführer ist für das Next.js-Projekt erstellt, damit Sie alle Header in next.config.js oder Seitenkomponenten angeben können.

Nächste-Sicherheitsleiter gegen Helm

Im Folgenden sind Regeln für die Nächsten-Sicherheitsleiter und Helm. Die Überheiligungen im nächsten Seelen sind vom Helm inspiriert, aber aus irgendeinem Grund hat es keine Regeln.

Nächste-Sicherheitsleiter Helm Kommentar
Strenge Transportsicherheit forceHTTPSRedirect hsts
X-Frame-Optionen frameGuard frameguard
X-herunterladende Optionen noopen ieNoOpen
X-in-Inhalts-Optionen nosniff noSniff
X-XSS-Schutz xssProtection xssFilter
Content-Security-Policy contentSecurityPolicy contentSecurityPolicy
Erwartung expectCT expectCt
Überweisungspolitik referrerPolicy referrerPolicy
X-DNS-PREFECHT-CONTROL - - dnsPrefetchControl Dies hat Auswirkungen auf Privatsphäre, aber dies verbessert die Leistung.
Feature-Policy - - featurePolicy Die Feature -Richtlinie verbessert die Sicherheit, aber es arbeitet noch Entwurf.
X-Kraft - - hidePoweredBy NEXT.JS unterstützt diesen Header in next.config.js .
Im Zusammenhang mit Cache - - nocache Wie Helm sagte, hat Caching viele Vorteile.
X-permittierte Cross-Domain-Policies - - crossdomain Adobe Flash ist eine der alten Web -Technologien.

Schneller Start

Anforderungen

  • NPM oder Garn
  • Node.js 10.0.0 oder höher
  • Weiter.js 8.0.0 oder höher

Installation 

$ npm install -D next-secure-headers

Wenn Sie Garn verwenden, verwenden Sie den folgenden Befehl. 

$ yarn add -D next-secure-headers

❗️ Für withSecureHeaders . Wenn Sie withSecureHeaders verwenden möchten, müssen Sie ohne Option -D installieren (dh installieren als dependencies , nicht als devDependencies ).

Aufstellen

Es gibt zwei Möglichkeiten, Header anzugeben. Einer ist zu verwenden, die er sich in next.config.js createSecureHeaders , und ein anderer ist die Verwendung withSecureHeaders in Seitenkomponenten.

Verwendung createSecureHeaders in next.config.js (empfohlen)

❗️ Next.js 9,5 oder höher ist erforderlich. Die Funktionen headers werden seit dem nächsten.js 9.5 unterstützt, sodass Sie Next.js 9.5 oder höher verwenden müssen, wenn Sie auf diese Weise verwenden möchten.

? Für die nächsten.js 10 und i18n Routen. Wenn Ihr Projekt Next.js 10 und integrierte i18n-Routen verwendet und Sie Regeln für alle Seiten anwenden möchten, müssen Sie angeben "/:path*" um Eigenschaften anstelle von "/(.*)" zu source . Wenn Ihr Projekt umgekehrt i18n -Routen nicht verwendet, müssen Sie stattdessen "/(.*)" stattdessen angeben. Diese Einschränkungen sind möglicherweise Fehler in Next.js.

Auf diese Weise verwendet die Funktion createSecureHeaders -Funktion und einen integrierten Header-Konfigurationsweg von Next.js. Dies ist keine Server erforderlich, können auf statischen Seiten verwendet werden und kann eine automatische statische Optimierung beibehalten. Wenn Ihr Projekt keine Server verwendet (mit statischen Seiten oder SSG) oder Sie gerade ein Next.js -Projekt erstellt haben, empfehle ich, statische Seiten zu behalten und diese Weise zu übernehmen.

headers createSecureHeaders next.config.js 

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

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

Standardmäßig wendet die Anheißen der nächsten Sekunden einige Regeln an. Wenn Sie Regeln aktivieren oder deaktivieren möchten, können Sie dem ersten Argument der Funktion Optionen geben. 

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

Außerdem können Sie verschiedene Header nach URLs nach den offiziellen Dokumenten konfigurieren.

Verwenden Sie withSecureHeaders in Seitenkomponenten

❗️ Server sind erforderlich. Auf diese Weise erfordert Server, da mit withSecureHeaders getServerSideProps von Next.js.

Verwenden Sie eine exportierte Funktion für Ihre next.js -Anwendung in /pages/_app.tsx . Außerdem können Sie stattdessen in den Seitenkomponenten in /pages/xxx.tsx verwenden. 

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

class Application extends App {
  ...
}

export default withSecureHeaders ( ) ( Application ) ;

Standardmäßig wendet die Anheißen der nächsten Sekunden einige Regeln an. Wenn Sie Regeln aktivieren oder deaktivieren möchten, können Sie dem ersten Argument der Funktion Optionen geben. 

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

Regeln

forceHTTPSRedirect 

 {
  forceHTTPSRedirect: boolean | [ true , Partial < { maxAge : number ; includeSubDomains : boolean ; preload : boolean } > ] ;
}
Standardwert Mdn
[true, { maxAge: 63072000 }] https://developer.mozilla.org/docs/web/http/headers/strict-transport-security

Dies soll "Strict-Transport-Security (HSTS)" -Header festlegen und es soll Angriffe von Menschen in den Mitte während der Weiterleitungen von HTTP zu HTTPS verhindern. Um dies zu aktivieren, wird dies sehr empfohlen, wenn Sie HTTPS (SSL) auf Ihren Servern verwenden.

Sie können true geben, wenn Sie diese Regel aktivieren möchten, oder Optionen angeben, indem Sie [true, OPTION_OBJECT] geben. Standardmäßig setzt dies max-age auf zwei Jahre (63.072.000 Sekunden).

frameGuard 

 {
  frameGuard: false | "deny" | "sameorigin" | [ "allow-from" , { uri : string | URL } ] ;
}
Standardwert Mdn
"deny" https://developer.mozilla.org/docs/web/http/headers/x-frame-options

Dies soll den Header "X-Frame-Options" einstellen und es soll ClickJacking-Angriffe verhindern. "deny" wird dringend empfohlen, wenn Sie keine Frame -Elemente wie iframe verwenden.

noopen 

 {
  noopen: false | "noopen" ;
}
Standardwert Mdn
"noopen" https://developer.mozilla.org/docs/web/http/headers/x-download-options

Dies soll "X-Download-Options" -Header einstellen und verhindern, dass heruntergeladene Dateien automatisch für IE8+ (MIME-Handling-Angriffe) geöffnet werden.

nosniff 

 {
  nosniff: false | "nosniff" ;
}
Standardwert Mdn
"nosniff" https://developer.mozilla.org/docs/web/http/headers/x-content-type-options

Dies soll den Header "X-In-Incontent-Typ" festlegen, und es soll MIME-Schnüffelangriffe verhindern.

xssProtection 

 {
  xssProtection: false | "sanitize" | "block-rendering" | [ "report" , { uri : string | URL } ] ;
}
Standardwert Mdn
"sanitize" https://developer.mozilla.org/docs/web/http/headers/x--xss-protection

Dies soll den Header "X-XSS-Schutz" einstellen und XSS-Angriffe verhindern.

Wenn Sie "sanitize" angeben, setzt dies den Header auf "1" und Browser werden die unsichere Gegend bereinigen. Wenn Sie "block-rendering" angeben, setzt dies den Header auf "1; mode=block" , und Browser blockieren die Rendern einer Seite. "X-XSS-Protection" blockiert viele XSS-Angriffe, es wird jedoch empfohlen, im Vergleich dazu eine Verwendung zu verwenden.

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 ;
      } ;
}
Standardwert Mdn
false https://developer.mozilla.org/docs/web/http/headers/content-security-policy

Dies soll "Content-Security-Policy" oder "Content Security-Policy-Report" -Re-Report-Header festlegen, um nicht zugelassene Ressourcen zu laden und auszuführen.

Wenn Sie reportOnly treu geben, setzt dies "Inhaltssicherheitspolitik-Report" auf Wert anstelle von "Content-Security-Policy".

Sie können auch Anweisungen anhand von Kettenfallnamen wie child-src anstelle von childSrc angeben.

❗️ Bei der Festlegung frameAncestors : X-Frame-Options hat Vorrang. Abschnitt "Beziehung zu X-Frame-Optionen" der CSP-Spezifikation besagt: "Wenn eine Ressource mit einer Richtlinie geliefert wird, die eine Richtlinie namens Frame-Incestors enthält und deren Disposition" erzwungen "ist, dann muss der Header mit X-Frame-Optionen ignoriert werden" , aber Chrome 40 & Firefox Ignorieren Sie die Richtlinienanweisung und folgen dem X-FRAME-OPTICTIONions-Options.

Wenn Sie frameAncestors einstellen, sollten Sie frameGuard auf false festlegen.

expectCT 

 {
  expectCT: boolean | [ true , Partial < { maxAge : number ; enforce : boolean ; reportURI : string | URL } > ] ;
}
Standardwert Mdn
false https://developer.mozilla.org/docs/web/http/headers/exect-ct

Dies soll den Header "Erwartungs-CT" festlegen, und es soll die Browser mitgeteilt werden, dass sie die Transparenz von Zertifikaten erwarten.

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" ) [ ] ;
}
Standardwert Mdn
false https://developer.mozilla.org/docs/web/http/headers/referrer-policy

Dies soll den Header "Referrer-Policy" festlegen und verhindern, dass andere Server Referrer erhalten. Sie können einen oder mehrere Werte für Legacy -Browser angeben, die keinen bestimmten Wert unterstützen.

API

createSecureHeaders 

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

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

createSecureHeaders ist eine Funktion, um Header als Objekt zurückzugeben, das einem Format wie { key, value } folgt. 

 createSecureHeaders ( OPTIONS ) ;

Das erste Argument akzeptiert Optionen für Regeln.

withSecureHeaders 

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

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

withSecureHeaders ist ein hoc, um Header mit getServerSideProps anzugeben. Sie können diese Funktion für die Anwendung ( /pages/_app.tsx ) und die Seitenkomponenten ( /pages/xxx.tsx ) verwenden. Dies ist in next.config.js nicht verfügbar. 

 withSecureHeaders ( OPTIONS ) ( APPLICATION_OR_COMPONENT ) ;

Das erste Argument akzeptiert Optionen für Regeln, und das Argument der zurückgegebenen Funktion akzeptiert Anwendungs- oder Seitenkomponenten. Der zurückgegebene Wert ist eine neue React -Komponente.

createHeadersObject 

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

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

createHeadersObject ist eine Funktion, um Header als Objekt zurückzugeben. 

 createHeadersObject ( OPTIONS ) ;

Das erste Argument akzeptiert Optionen für Regeln.

Rezepte

So entfernen Sie X-Kraft-By-Header

Im Allgemeinen sollte der HTTP-Antwortheader mit X-Börsen-BY-BY-HTTP von Response Header entfernt werden, da Hacker die Serverinformationen erhalten können.

Nächste-Sicherheitsleiter unterstützt nicht die Entfernung von X-Boting-by-Header, aber als NEXT.JS unterstützt dies. 

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

Wenn Sie an poweredByHeader in next.config.js falsch geben, entzieht Next.js den Header von Antwortheadern.

Überschreibt die Header auf einer bestimmten Seite mit 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"...

Die Überheiligungen von Nächsten haben keine Überschreibung von Reaktionsüberschriften in Kinderseitenkomponenten, da die Architektur von Next.js eingeschränkt wurde. 

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

Um dies zu lösen, sollten Sie die Option als ein Modul definieren, dann sollten Sie das Objekt importieren und zusammenführen.

Beitrag zu den Nächsträgern

Fehlerberichte und Pull-Anfragen sind auf Github unter https://github.com/jagaapple/next-secure-headers willkommen. Dieses Projekt soll ein sicherer, einladender Raum für die Zusammenarbeit sein, und die Mitwirkenden sollen sich an den Verhaltenskodex für den Mitwirkenden halten.

Bitte lesen Sie die Richtlinien vor der Entwicklung und den Beitrag zur Verfügung.

Lizenz

Die Bibliothek ist unter den Bedingungen der MIT -Lizenz als Open Source erhältlich.

Copyright 2020 Jaga Apple. Alle Rechte vorbehalten.

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle