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" ,
} )
} ] ;
} ,
} ; next.config.js 에서 createSecureHeaders 사용하십시오 (권장)withSecureHeaders 사용하십시오forceHTTPSRedirectframeGuardnoopennosniffxssProtectioncontentSecurityPolicyexpectCTreferrerPolicycreateSecureHeaderswithSecureHeaderscreateHeadersObjectwithSecureHeaders 사용하여 특정 페이지의 헤더를 상체합니다| 특징 | 당신이 할 수있는 일 |
|---|---|
| ⚛️ Next.js를 위해 설계되었습니다 | /pages 의 next.config.js 또는 페이지 구성 요소에 사용하십시오 |
| 기본 적용 규칙 | 지식이 없어도 프로젝트를 도와주세요 |
| ? 안전을 입력하십시오 | TypeScript와 함께 사용할 수 있습니다 |
Next-Secure-Headers는 Express.js의 보안과 관련된 HTTP 응답 헤더를 설정하는 헬멧과 유사합니다.
Next.js는 Express.js와 같은 Node.js 프레임 워크에서 사용하도록 지원합니다. 따라서 사용자 정의 서버를 작성하는 경우 Next.js 프로젝트와 함께 헬멧을 사용할 수 있지만 Next.js 개발 팀은 사용자 정의 서버를 권장하지 않습니다. 또한 사용자 지정 서버없이 Next.js를 사용할 수 있도록 구현하기 위해 노력하고 있습니다. 실제로, Next.js 9는 동적 라우팅을 지원하므로 사용자 정의 서버가 필요한 Next-Routes와 같은 사용을 구현하기 위해 사용자 정의 서버를 구현할 필요가 없습니다.
// /next.config.js
const { createSecureHeaders } = require ( "next-secure-headers" ) ;
module . exports = {
async headers ( ) {
return [ { source : "/(.*)" , headers : createSecureHeaders ( ) } ] ;
} ,
} ; 헬멧을 사용하려면 권장 방법에 대해 사용자 정의 서버를 사용해야합니다. 이 문제를 해결하기 위해 차세대 보안 담당자가 탄생했습니다. Next-Secure-Headers는 Next.js 프로젝트를 위해 구축되므로 next.config.js 또는 페이지 구성 요소에 모든 헤더를 지정할 수 있습니다.
다음은 차세대 보안 담당자와 헬멧이 가지고있는 규칙입니다. 차세대 보안 관리자는 헬멧에서 영감을 얻었지만 어떤 이유로 든 규칙이 없습니다.
| 차세대 보안 관리자 | 헬멧 | 논평 | |
|---|---|---|---|
| 엄격한 트랜스 스포츠 보안 | forceHTTPSRedirect | hsts | |
| X- 프레임 옵션 | frameGuard | frameguard | |
| x 다운로드-옵션 | noopen | ieNoOpen | |
| X-Content- 타입-옵션 | nosniff | noSniff | |
| X-XSS 보호 | xssProtection | xssFilter | |
| 콘텐츠 보안 정책 | contentSecurityPolicy | contentSecurityPolicy | |
| 기대 -CT | expectCT | expectCt | |
| 참조 정책 | referrerPolicy | referrerPolicy | |
| X-DNS- 프리 페치 제어 | - | dnsPrefetchControl | 이것은 개인 정보 보호에 영향을 미치지 만 성능을 향상시킵니다. |
| 기능 정책 | - | featurePolicy | 기능 정책은 보안을 향상 시키지만 아직 작업 초안입니다. |
| X- 구동 바이 | - | hidePoweredBy | Next.js는 next.config.js 에서이 헤더를 제거하도록 지원합니다. |
| 캐시와 관련이 있습니다 | - | nocache | 헬멧이 말했듯이 캐싱에는 많은 이점이 있습니다. |
| X- 초과 크로스 도메인 폴리시 | - | crossdomain | Adobe Flash는 오래된 웹 기술 중 하나입니다. |
$ npm install -D next-secure-headers원사를 사용하는 경우 다음 명령을 사용하십시오.
$ yarn add -D next-secure-headers
withSecureHeaders의 경우 ❗️.withSecureHeaders사용하려면-D옵션없이 설치해야합니다 (즉,devDependencies아닌dependencies으로 설치).
헤더를 지정하는 두 가지 방법이 있습니다. 하나는 next.config.js 에서 createSecureHeaders 사용하고 다른 하나는 페이지 구성 요소에서 withSecureHeaders 사용하는 것입니다.
next.config.js 에서 createSecureHeaders 사용하십시오 (권장)❗️ next.js 9.5 이상이 필요합니다.
headers기능은 Next.js 9.5 이후에 지원되었으므로 다음에 사용하려면 JS 9.5 이상을 사용해야합니다.
? JS 10 및 I18N 경로의 경우. 프로젝트가 Next.js 10 및 내장 I18N 경로를 사용하고 모든 페이지에 규칙을 적용하려면
"/(.*)"대신source속성에"/:path*"지정해야합니다. 반대로, 프로젝트가 Next.js 10을 사용하더라도 i18n 경로를 사용하지 않으면 대신"/(.*)"지정해야합니다. 이러한 제한 사항은 다음에 버그 일 수 있습니다.
이 방식으로 createSecureHeaders 기능과 Next.js의 내장 헤더 구성 방식을 사용합니다. 이 서버는 필요하지 않으며 정적 페이지에서 사용할 수 있으며 자동 정적 최적화를 유지할 수 있습니다. 프로젝트가 서버를 사용하지 않거나 (정적 페이지 또는 SSG 사용) Next.js 프로젝트를 방금 만든 경우 정적 페이지를 유지하고이 방법을 채택하는 것이 좋습니다.
Next Secure-Headers의 createSecureHeaders 가져 와서 next.config.js 의 headers Async 함수에서 사용합니다.
// /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 사용하십시오❗️ 서버가 필요합니다.
withSecureHeadersNext.js의getServerSideProps사용하기 때문에 이러한 방식으로 모든 서버가 필요합니다.
/pages/_app.tsx 에서 다음.js 응용 프로그램에 내보내기 기능을 사용하십시오. 또한 대신 /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 |
이것은 "Strict-Transport-Security (HSTS)"헤더를 설정하는 것이며 HTTP에서 HTTPS로 리디렉션하는 동안 중간에 사람의 공격을 방지하는 것입니다. 이를 활성화하려면 서버에서 HTTP (SSL)를 사용하는 경우 적극 권장됩니다.
이 규칙을 활성화하려면 [true, OPTION_OBJECT] true 하여 옵션을 지정할 수 있습니다. 기본적으로 max-age 은 2 년 (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- 프레임-옵션"헤더를 설정하는 것이며 클릭 재킹 공격을 방지하기위한 것입니다. iframe 와 같은 프레임 요소를 사용하지 않으면 "deny" 가 적극 권장됩니다.
noopen {
noopen: false | "noopen" ;
}| 기본값 | MDN |
|---|---|
"noopen" | https://developer.mozilla.org/docs/web/http/headers/x-dounload-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- 타입-옵션"헤더를 설정하는 것이며 Mime 스니핑 공격을 방지하기위한 것입니다.
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-protection"헤더를 설정하는 것이며 XSS 공격을 방지하기위한 것입니다.
"sanitize" 지정하면 헤더를 "1" 로 설정하고 브라우저는 안전하지 않은 영역을 소독합니다. "block-rendering" 지정하면 헤더를 "1; mode=block" 으로 설정하고 브라우저는 페이지 렌더링을 차단합니다. "X-XSS-Protection"은 많은 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-Report 전용"헤더를 설정하며, 이는 자원이 아닌 리소스를로드 및 실행하는 것을 방지하기위한 것입니다.
reportOnly 에 충실하면 "Content-Security-Policy-Report 전용"이 "Content-Security-Policy"대신 값으로 설정합니다.
또한 childSrc 대신 child-src 와 같은 체인 케이스 이름을 사용하여 지시문을 지정할 수 있습니다.
frameAncestors설정할 때 : X- 프레임-옵션이 우선합니다. CSP 사양의 "X- 프레임-옵션과의 관계"섹션은 다음과 같이 말합니다. "프레임 인 인트 스토어 (Frame-Infessters)라는 지침이 포함 된 정책과"집행 "이라는 정책이 포함 된 리소스가 전달되면 X- 프레임 옵션 헤더는 무시해야 하지만 Chrome 40 & Firefox 35는 프레임 제작자 지침을 무시하고 대신 X-Frame Header를 따르십시오.따라서
frameAncestors설정하는 경우frameGuardfalse로 설정해야합니다.
expectCT {
expectCT: boolean | [ true , Partial < { maxAge : number ; enforce : boolean ; reportURI : string | URL } > ] ;
}| 기본값 | MDN |
|---|---|
false | https://developer.mozilla.org/docs/web/http/headers/expect-ct |
이것은 "예상 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 |
이것은 "참조 정책"헤더를 설정하는 것이며 다른 서버에서 참조자를 얻지 못하도록합니다. 특정 값을 지원하지 않는 레거시 브라우저에 대해 하나 이상의 값을 지정할 수 있습니다.
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 사용하여 헤더를 지정하는 HOC입니다. 응용 프로그램 ( /pages/_app.tsx ) 및 페이지 구성 요소 ( /pages/xxx.tsx ) 에이 기능을 사용할 수 있습니다. 다음은 next.config.js 에서 사용할 수 없습니다.
withSecureHeaders ( OPTIONS ) ( APPLICATION_OR_COMPONENT ) ;첫 번째 인수는 규칙에 대한 옵션을 수락하고 반환 된 기능의 인수는 응용 프로그램 또는 페이지 구성 요소를 수락합니다. 반환 된 값은 새로운 React 구성 요소입니다.
createHeadersObject import { createHeadersObject } from "next-secure-headers" ;
createHeadersObject ( { referrerPolicy : "same-origin" } ) ;
// {
// "Referrer-Policy": "same-origin",
// } createHeadersObject 헤더를 객체로 반환하는 함수입니다.
createHeadersObject ( OPTIONS ) ;첫 번째 인수는 규칙 옵션을 수락합니다.
일반적으로 X- 기반 HTTP 응답 헤더는 해커가 서버 정보를 얻는 데 도움이되므로 응답 헤더에서 제거해야합니다.
Next-Secure-Headers는 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-Secure-Headers는 Next.js Architecture에 의해 제한되어 있기 때문에 하위 페이지 구성 요소의 응답 헤더를 무시하는 것을 지원하지 않습니다.
// /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의 버그 보고서 및 풀 요청은 환영합니다. 이 프로젝트는 협력을위한 안전하고 환영하는 공간이되기위한 것이며, 기고자들은 기고자 계약 규범을 준수 할 것으로 예상됩니다.
개발 및 기여 전에 기고 가이드 라인을 읽으십시오.
라이브러리는 MIT 라이센스의 조건에 따라 오픈 소스로 제공됩니다.
Copyright 2020 Jaga Apple. 모든 권리 보유.
