Página Inicial>Relacionado com a programação>Código-Fonte de IA
Baixar

Cheques da próxima segurança

⛑️ Define cabeçalhos de resposta seguros para 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" ,
      } )
    } ] ;
  } ,
} ;

Índice

  • Índice
  • Características
    • Por que usar os cabeçalhos da próxima segurança em vez de capacete?
      • Cheques seguintes versus capacete
  • Início rápido
    • Requisitos
    • Instalação
    • Configurar
      • Uso createSecureHeaders em next.config.js (recomendado)
      • Use withSecureHeaders em componentes de página
  • Regras
    • forceHTTPSRedirect
    • frameGuard
    • noopen
    • nosniff
    • xssProtection
    • contentSecurityPolicy
    • expectCT
    • referrerPolicy
  • API
    • createSecureHeaders
    • withSecureHeaders
    • createHeadersObject
  • Receitas
    • Como remover o cabeçalho-de-força-x
    • Substitui cabeçalhos em uma página específica usando com withSecureHeaders
  • Contribuindo para os cabeçalhos da próxima segurança
  • Licença

Características

CARACTERÍSTICAS O que você pode fazer
⚛️ Projetado para Next.js Use para next.config.js ou componentes de página em /pages
Regras aplicadas padrão Ajude seu projeto, mesmo que você não tenha conhecimento
? Tipo seguro Você pode usar com o TypeScript

Por que usar os cabeçalhos da próxima segurança em vez de capacete?

Os cabeçalhos próximos à segurança são semelhantes ao capacete, que define cabeçalhos de resposta HTTP relacionados à segurança do Express.js.

Next.js suporta a serem usados em estruturas Node.js, como o Express.js. Portanto, você pode usar o capacete com seu projeto Next.js se criar um servidor personalizado, mas a equipe de desenvolvimento Next.js não recomenda um servidor personalizado. Além disso, eles estão trabalhando para implementar para ser possível usar o Next.js sem um servidor personalizado. De fato, o Next.js 9 suporta roteamento dinâmico, portanto, não precisamos criar um servidor personalizado para implementá-lo usando como as próximas rotas, o que requer um servidor personalizado. 

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

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

Se você deseja usar o capacete, é necessário usar um servidor personalizado contra uma maneira recomendada. Para resolver esse problema, nasceu os títulos da próxima segurança. A próxima segurança é criada para o projeto Next.js, para que você possa especificar quaisquer cabeçalhos em next.config.js ou componentes de página.

Cheques seguintes versus capacete

A seguir, são apresentadas regras que os próximos cabeçalhos de segurança têm e o capacete tem. O próximo título de segurança é inspirado no capacete, mas não tem algumas regras por algum motivo.

Cheques da próxima segurança Capacete Comentário
Segurança de transporte rígido forceHTTPSRedirect hsts
Opções x-frame frameGuard frameguard
X-Download-opções noopen ieNoOpen
Opções do tipo X-Content nosniff noSniff
X-XSS-Proteção xssProtection xssFilter
Política de segurança de conteúdo contentSecurityPolicy contentSecurityPolicy
Espera-CT expectCT expectCt
Política do referenciador referrerPolicy referrerPolicy
X-DNS-PREFETCH-CONTROL - dnsPrefetchControl Isso tem implicações de privacidade, mas isso melhora o desempenho.
Política de recursos - featurePolicy A política de recursos melhora a segurança, mas está funcionando com o rascunho ainda.
X-Power-By - hidePoweredBy Next.js suporta para remover este cabeçalho no next.config.js .
Relacionado ao cache - nocache Como disse o capacete, o cache tem muitos benefícios.
Política de domínio-cross-cross - crossdomain O Adobe Flash é uma das tecnologias antigas da Web.

Início rápido

Requisitos

  • NPM ou fio
  • Node.js 10.0.0 ou superior
  • Next.js 8.0.0 ou superior

Instalação 

$ npm install -D next-secure-headers

Se você estiver usando fios, use o seguinte comando. 

$ yarn add -D next-secure-headers

❗️ Para withSecureHeaders . Se você deseja usar withSecureHeaders , deve instalar sem -D opção (ou seja, instalando como dependencies e não devDependencies ).

Configurar

Existem duas maneiras de especificar cabeçalhos. Um é usar createSecureHeaders no next.config.js , e outro é usar withSecureHeaders de componentes de página.

Uso createSecureHeaders em next.config.js (recomendado)

❗️ Next.js 9.5 ou superior é necessário. A função headers foi suportada desde o próximo.js 9.5, então você deve usar o próximo.js 9.5 ou superior se quiser usar dessa maneira.

? Para Next.JS 10 e I18N Rotas. Se o seu projeto usar o Next.js 10 e as rotas I18N embutidas e você deseja aplicar regras para todas as páginas, você deve especificar "/:path*" na propriedade source em vez de "/(.*)" . Por outro lado, se o seu projeto não usar rotas i18n, mesmo que use o próximo.js 10, você precisará especificar "/(.*)" . Essas limitações são talvez bugs no próximo.js.

Dessa forma, usa createSecureHeaders funcionam e uma configuração de cabeçalho embutida pelo Next.js. Isso não é necessário nenhum servidor, pode ser usado em páginas estáticas e pode reter a otimização estática automática. Se o seu projeto não usar nenhum servidor (usando páginas estáticas ou SSG) ou você acabou de criar um projeto Next.js, recomendo reter páginas estáticas e adotar dessa maneira.

Importar createSecureHeaders dos cabeçalhos seguintes e usá-lo na função assíncrona headers em next.config.js . 

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

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

Por padrão, os cabeçalhos seguintes aplica algumas regras. Se você deseja ativar ou desativar as regras, poderá dar opções ao primeiro argumento da função. 

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

Além disso, você pode configurar cabeçalhos diferentes por URLs seguindo os documentos oficiais.

Use withSecureHeaders em componentes de página

❗️ Servidores são necessários. Dessa forma, requer quaisquer servidores, porque withSecureHeaders usa getServerSideProps de Next.js.

Use uma função exportada para o seu aplicativo Next.js em /pages/_app.tsx . Além disso, você pode usar em qualquer componente de página em /pages/xxx.tsx . 

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

class Application extends App {
  ...
}

export default withSecureHeaders ( ) ( Application ) ;

Por padrão, os cabeçalhos seguintes aplica algumas regras. Se você deseja ativar ou desativar as regras, poderá dar opções ao primeiro argumento da função. 

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

Regras

forceHTTPSRedirect 

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

Isso é para definir o cabeçalho "Strict-Transport-Security (HSTS)" e é para evitar ataques de homem no meio durante os redirecionamentos de HTTP para HTTPS. Para ativar, isso é altamente recomendado se você usar o HTTPS (SSL) em seus servidores.

Você pode dar true se deseja ativar esta regra ou especificar opções dando [true, OPTION_OBJECT] . Por padrão, isso define max-age para dois anos (63.072.000 segundos).

frameGuard 

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

Isso é para definir o cabeçalho "Opções X-Frame" e é para evitar ataques de roubo de cliques. "deny" é altamente recomendado se você não usar elementos de quadro como iframe .

noopen 

 {
  noopen: false | "noopen" ;
}
Valor padrão Mdn
"noopen" https://developer.mozilla.org/docs/web/http/headers/x-wnload-options

Isso é para definir o cabeçalho "X-download-opções" e é para evitar abrir arquivos baixados automaticamente para o IE8+ (ataques de manuseio MIME).

nosniff 

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

Isso é para definir o cabeçalho "X-Content-Type-Options" e é para evitar ataques de fungamento.

xssProtection 

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

Isso é para definir o cabeçalho "X-XSS-Proteção" e é para evitar ataques XSS.

Se você especificar "sanitize" , isso define o cabeçalho para "1" e os navegadores higienizarão a área insegura. Se você especificar "block-rendering" , isso define o cabeçalho para "1; mode=block" e os navegadores bloquearão a renderização de uma página. "X-XSS-Proteção" bloqueia muitos ataques XSS, mas a política de segurança de conteúdo é recomendada para usar em comparação com isso.

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

Isso é para definir o cabeçalho "Política de segurança de conteúdo" ou "conteúdo-segurança-policy-relatário-relatório" e é para evitar carregar e executar recursos não permitidos.

Se você der verdadeiro ao reportOnly , isso define "Content-Segurança-Policy-Relater-Only" como valor em vez de "conteúdo-segurança-política".

Além disso, você pode especificar diretivas usando nomes de caixa de cadeia, como child-src em vez de childSrc .

❗️ Ao definir frameAncestors : o X-Options tem prioridade. A seção "Relação com as opções de estrutura x" da especificação CSP diz: "Se um recurso for entregue com uma política que inclua uma diretiva de acordo com os ancestores de quadros e cuja disposição é" aplicar ", então o cabeçalho do X-Frame deve ser ignorado" , mas o Chrome 40 e o Firefox 35 ignoram o quadro.

Portanto, se definir frameAncestors , você deve definir frameGuard como false .

expectCT 

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

Isso é para definir o cabeçalho "Especial-CT" e diz aos navegadores que esperam transparência de 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 padrão Mdn
false https://developer.mozilla.org/docs/web/http/headers/referrer-policy

Isso é para definir o cabeçalho "Referrer-Policy" e é para evitar ser referente por outros servidores. Você pode especificar um ou mais valores para navegadores herdados que não suportam um valor específico.

API

createSecureHeaders 

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

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

createSecureHeaders é uma função de retornar cabeçalhos como objeto seguindo um formato como { key, value } . 

 createSecureHeaders ( OPTIONS ) ;

O primeiro argumento aceita opções de regras.

withSecureHeaders 

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

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

withSecureHeaders é um hoc para especificar cabeçalhos usando getServerSideProps . Você pode usar esta função para componentes do aplicativo ( /pages/_app.tsx ) e página ( /pages/xxx.tsx ). Isso não está disponível no next.config.js . 

 withSecureHeaders ( OPTIONS ) ( APPLICATION_OR_COMPONENT ) ;

O primeiro argumento aceita opções de regras e o argumento da função retornado aceita componentes de aplicativos ou página. O valor retornado é um novo componente React.

createHeadersObject 

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

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

createHeadersObject é uma função de devolver cabeçalhos como objeto. 

 createHeadersObject ( OPTIONS ) ;

O primeiro argumento aceita opções de regras.

Receitas

Como remover o cabeçalho-de-força-x

Em geral, o cabeçalho de resposta HTTP-BY-PODED-BY deve ser removido dos cabeçalhos de resposta, pois ajuda os hackers a obter as informações do servidor.

Os cabeçalhos seguintes não suportam a remoção do cabeçalho do X da X, mas o Next.js suporta. 

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

Se você der falso ao poweredByHeader em next.config.js , o próximo.js remove o cabeçalho dos cabeçalhos de resposta.

Substitui cabeçalhos em uma página específica usando com 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"...

Os cabeçalhos próximos à segurança não suportam a substituição dos cabeçalhos de resposta nos componentes da página infantil por serem restritos pela arquitetura 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 isso, você deve definir a opção como um módulo, então deve importar e mesclar o objeto.

Contribuindo para os cabeçalhos da próxima segurança

Relatórios de bug e solicitações de tração são bem-vindos no github em https://github.com/jagaapple/next-secure headers. Este projeto deve ser um espaço seguro e acolhedor para a colaboração, e espera -se que os colaboradores sigam o Código de Conduta do Covenant colaborador.

Leia diretrizes contribuintes antes do desenvolvimento e contribuição.

Licença

A biblioteca está disponível como código aberto nos termos da licença do MIT.

Copyright 2020 Jaga Apple. Todos os direitos reservados.

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos