首页>编程相关>Ai源码
下载

隔壁的头

⛑️为Next设置安全的响应标头。 ？ 

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

目录

  • 目录
  • 特征
    • 为什么要使用临时头头代替头盔？
      • 隔壁的头头与头盔
  • 快速开始
    • 要求
    • 安装
    • 设置
      • 在next.config.js中使用createSecureHeaders （建议）
      • 在页面组件中withSecureHeaders使用
  • 规则
    • forceHTTPSRedirect
    • frameGuard
    • noopen
    • nosniff
    • xssProtection
    • contentSecurityPolicy
    • expectCT
    • referrerPolicy
  • API
    • createSecureHeaders
    • withSecureHeaders
    • createHeadersObject
  • 食谱
    • 如何删除X驱动的标头
    • 使用withSecureHeaders覆盖特定页面中的标题
  • 为隔壁的头头做出贡献
  • 执照

特征

特征你能做什么
⚛️为Next.js设计用于next.config.js或/pages中的页面组件
默认应用规则即使您没有知识，也可以帮助您的项目
？键入安全您可以与打字稿一起使用

为什么要使用临时头头代替头盔？

隔壁标头类似于头盔，该头盔设置了与Express.js安全性相关的HTTP响应标头。

next.js支持用于在node.js框架（例如express.js）中使用。因此，如果您创建自定义服务器，则可以在Next.js项目中使用头盔，但是Next.js开发团队不建议使用自定义服务器。此外，他们正在努力实施，以便在没有自定义服务器的情况下使用Next.js。实际上，Next.js 9支持动态路由，因此我们不需要构建自定义服务器即可使用诸如Next-Routes之类的诸如需要自定义服务器的诸如Next Routes。 

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

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

如果要使用头盔，则需要根据建议的方式使用自定义服务器。为了解决这个问题，隔壁的头脑诞生了。为Next.js项目构建了临时标题，因此您可以在next.config.js或页面组件中指定任何标头。

隔壁的头头与头盔

以下是临时头头和头盔的规则。隔壁的头头受到头盔的启发，但由于某种原因没有某些规则。

隔壁的头头盔评论
严格的传输安全forceHTTPSRedirect hsts
X框架frameGuard frameguard
X-Download-Options noopen ieNoOpen
X-content-type-options nosniff noSniff
X-XSS保护xssProtection xssFilter
内容 - 安全性contentSecurityPolicy contentSecurityPolicy
期望-CT expectCT expectCt
推荐人 - 政策referrerPolicy referrerPolicy
X-dns-prefetch-Control - dnsPrefetchControl这具有隐私影响，但这可以提高性能。
功能政策 - featurePolicy功能策略改善了安全性，但正在工作草案。
X驱动 - hidePoweredBy Next.js支持在next.config.js中删除此标头。
与缓存有关 - nocache正如头盔所说，缓存有很多好处。
X-Perment-cross域域 - crossdomain Adobe Flash是旧的Web技术之一。

快速开始

要求

  • NPM或纱
  • Node.js 10.0.0或更高
  • next.js 8.0.0或更高

安装

$ npm install -D next-secure-headers

如果使用纱线，请使用以下命令。 

$ yarn add -D next-secure-headers

❗️为withSecureHeaders 。如果要withSecureHeaders使用，则必须在没有-D选项的情况下安装（即，作为dependencies而不是devDependencies ）安装。

设置

有两种指定标题的方法。一种是在next.config.js中使用createSecureHeaders ，另一个是在页面组件中使用withSecureHeaders 。

在next.config.js中使用createSecureHeaders （建议）

❗️下一条。js 9.5或更高。自Next.js 9.5以来，已支持headers功能，因此您必须使用Next.js 9.5或更高版本，如果您想使用这种方式。

？对于Next.js 10和I18N路线。如果您的项目使用Next.js 10和内置的I18N路线，并且您想对所有页面应用规则，则必须将"/:path*"指定到source属性，而不是"/(.*)" 。相反，如果您的项目不使用I18N路由，即使使用Next.js 10，则必须指定"/(.*)" 。这些限制可能是Next.js中的错误。

这种方式使用createSecureHeaders功能和Next.js的内置标头配置方式。这不需要任何服务器，可以在静态页面中使用，并且可以保留自动静态优化。如果您的项目不使用任何服务器（使用静态页面或SSG），或者您刚刚创建了下一个项目。JS项目，我建议保留静态页面并采用这种方式。

导入从隔壁标题中createSecureHeaders ，并在next.config.js中使用headers异步函数。 

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

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

默认情况下，隔壁的头部标先应用了一些规则。如果要启用或禁用规则，则可以为函数的第一个参数提供选项。 

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

另外，您可以按照官方文档来通过URL配置不同的标头。

在页面组件中withSecureHeaders使用

需要服务器。这样需要任何服务器，因为withSecureHeaders使用next.js的getServerSideProps 。

在/pages/_app.tsx中为您的next.js应用程序使用导出功能。另外，您可以在 /pages /pages/xxx.tsx中的任何页面组件中使用。 

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

class Application extends App {
  ...
}

export default withSecureHeaders ( ) ( Application ) ;

默认情况下，隔壁的头部标先应用了一些规则。如果要启用或禁用规则，则可以为函数的第一个参数提供选项。 

 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 } > ] ;
}
默认值MDN
[true, { maxAge: 63072000 }] https://developer.mozilla.org/docs/web/http/headers/strict-transport-security

这是为了设置“严格的传输安全性（HSTS）”标头，这是为了防止在从HTTP重定向到HTTPS期间的中间人攻击。为此，强烈建议您在服务器上使用HTTPS（SSL）。

如果要启用此规则，则可以给出true ，也可以通过提供[true, OPTION_OBJECT]来指定选项。默认情况下，这将max-age设置为两年（63,072,000秒）。

frameGuard 

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

这是为了设置“ X-Frame-options”标头，这是为了防止点击夹克攻击。如果您不使用诸如iframe类的框架元素，则强烈建议使用"deny" 。

noopen 

 {
  noopen: false | "noopen" ;
}
默认值MDN
"noopen" https://developer.mozilla.org/docs/web/http/headers/x-download-options

这是设置“ x-download-options”标头，这是为了防止为IE8+（MIME处理攻击）自动打开下载的文件。

nosniff 

 {
  nosniff: false | "nosniff" ;
}
默认值MDN
"nosniff" https://developer.mozilla.org/docs/web/http/headers/x-content-type-options

这是设置“ X-content-type-options”标头，这是为了防止哑剧嗅探攻击。

xssProtection 

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

这是设置“ X-XSS保护”标头，这是为了防止XSS攻击。

如果您指定"sanitize" ，则将标题设置为"1" ，并且浏览器将消毒不安全的区域。如果指定"block-rendering" ，则将标题设置为"1; mode=block" ，并且浏览器将阻止渲染页面。 “ X-XSS保护”阻止了许多XSS攻击，但建议与此相比使用内容安全策略。

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

这是为了设置“ content-security-policy”或“ content-security-policy-policy-polty-portly”标题，这是为了防止加载和执行非允许资源。

如果您忠于reportOnly ，则将“仅限内容”设置为“只有内容”，而不是“ content-security-policy”。

另外，您可以使用链案例名称（例如child-src而不是childSrc ）指定指令。

设置frameAncestors时：X-Frame-Options优先。 Section "Relation to X-Frame-Options" of the CSP Spec says: "If a resource is delivered with a policy that includes a directive named frame-ancestors and whose disposition is "enforce", then the X-Frame-Options header MUST be ignored" , but Chrome 40 & Firefox 35 ignore the frame-ancestors directive and follow the X-Frame-Options header instead.

因此，如果设置frameAncestors ，则应将frameGuard设置为false 。

expectCT 

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

这是设置“ Expect-ct”标题，并告诉浏览器期望证书透明度。

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

这是设置“推荐人 - 政策”标头，这是为了防止其他服务器获得推荐人。您可以为不支持特定值的旧浏览器指定一个或多个值。

API

createSecureHeaders 

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

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

createSecureHeaders是按照{ key, value }之类的格式返回标头作为对象的函数。 

 createSecureHeaders ( OPTIONS ) ;

第一个参数接受规则的选项。

withSecureHeaders 

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

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

使用withSecureHeaders是使用getServerSideProps指定标头的事件。您可以将此功能用于应用程序（ /pages/_app.tsx ）和页面组件（ /pages/xxx.tsx ）。这在next.config.js中无法使用。 

 withSecureHeaders ( OPTIONS ) ( APPLICATION_OR_COMPONENT ) ;

第一个参数接受规则的选项，返回函数的参数接受应用程序或页面组件。返回的值是一个新的反应组件。

createHeadersObject 

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

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

createHeadersObject是将标题返回对象的函数。 

 createHeadersObject ( OPTIONS ) ;

第一个参数接受规则的选项。

食谱

如何删除X驱动的标头

通常，应从响应标头中删除X驱动的HTTP响应标头，因为它可以帮助黑客获取服务器信息。

隔壁的标题不支持删除X驱动的按标头，但Next.js支持要做。 

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

如果您在next.config.js中向poweredByHeader false，next.js从响应标题中删除标头。

使用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"...

由于受到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 ) ;

要解决此问题，您应该将选项定义为一个模块，然后应导入并合并对象。

为隔壁的头头做出贡献

欢迎在https://github.com/jagaapple/next-secure-headers上的GitHub上的错误报告和拉动请求。该项目旨在是一个安全，热情的协作空间，预计贡献者将遵守撰稿人契约的行为准则。

请在开发和贡献之前阅读贡献指南。

执照

根据MIT许可证的条款，该图书馆可作为开源。

版权2020 Jaga Apple。版权所有。

展开
附加信息
相关应用
为您推荐
相关资讯 全部