next secure headers

Следующие заголовки

⛑ Устанавливает защитные заголовки ответов для следующего.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" ,
      } )
    } ] ;
  } ,
} ; 

Оглавление

• Оглавление
• Функции
  • Зачем использовать заголовки следующих посетителей вместо шлема?
    • Управления следующей службы против шлема
• Быстрый старт
  • Требования
  • Установка
  • Настраивать
    • Используйте createSecureHeaders в next.config.js (рекомендуется)
    • Использовать withSecureHeaders в компонентах страницы
• Правила
  • forceHTTPSRedirect
  • frameGuard
  • noopen
  • nosniff
  • xssProtection
  • contentSecurityPolicy
  • expectCT
  • referrerPolicy
• API
  • createSecureHeaders
  • withSecureHeaders
  • createHeadersObject
• Рецепты
  • Как удалить заголовок x-y-y-power-by
  • Переопределяет заголовки на определенной странице, используя withSecureHeaders
• Вклад в заголовки следующих посетителей
• Лицензия

Функции

ФУНКЦИИ	Что вы можете сделать
⚛ разработан для lete.js	Используйте для next.config.js или компонентов страницы в /pages
Применяемые правила по умолчанию	Помогите вашему проекту, даже если у вас нет знаний
? Тип сейф	Вы можете использовать с TypeScript

Зачем использовать заголовки следующих посетителей вместо шлема?

Хеды следующего заселения похожи на шлем, который устанавливает заголовки ответов HTTP, связанные с безопасностью для Express.js.

Next.js поддерживает использование в рамках Node.js, таких как Express.js. Таким образом, вы можете использовать шлем с вашим проектом. Кроме того, они работают над реализацией, чтобы быть возможным для использования Next.js без пользовательского сервера. На самом деле, Next.js 9 поддерживает динамическую маршрутизацию, поэтому нам не нужно создавать пользовательский сервер, чтобы реализовать его с помощью таких как следующие маршруты, для которого требуется пользовательский сервер.

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

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

Если вы хотите использовать шлем, необходимо использовать пользовательский сервер против рекомендованного способа. Чтобы решить эту проблему, родился Headers Next Secure. Headers Next Secure создан для проекта Next.js, так что вы можете указать любые заголовки в next.config.js или компонентах страницы.

Управления следующей службы против шлема

Ниже приведены правила, которые есть в следующих зрелищах, и у шлема есть. Уголовки следующих зрелей вдохновляются шлемом, но по какой-то причине у него нет никаких правил.

	Следующие заголовки	Шлем	Комментарий
Строго-транспортная безопасность	forceHTTPSRedirect	hsts
X-frame-options	frameGuard	frameguard
X-download-options	noopen	ieNoOpen
X-контент-тип-опции	nosniff	noSniff
X-XSS-защита	xssProtection	xssFilter
Контент-безопасная политика	contentSecurityPolicy	contentSecurityPolicy
Ожидается-Ct	expectCT	expectCt
Рефератель-политика	referrerPolicy	referrerPolicy
X-DNS-Prefetch-Control	-	dnsPrefetchControl	Это имеет последствия для конфиденциальности, но это повышает производительность.
Функциональная политика	-	featurePolicy	Функциональная политика улучшает безопасность, но он еще является рабочим проектом.
X-Power-By	-	hidePoweredBy	Next.js поддерживает для удаления этого заголовка в next.config.js .
Связано с кэшем	-	nocache	Как сказал Хельт, кэширование имеет много преимуществ.
X-Permitted-Cross-Domain-Policies	-	crossdomain	Adobe Flash - одна из старых веб -технологий.

Быстрый старт

Требования

• 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 ).

Настраивать

Есть два способа указать заголовки. Одним из них является использование createSecureHeaders в next.config.js , а другой - использовать withSecureHeaders в компонентах страницы.

Используйте createSecureHeaders в next.config.js (рекомендуется)

❗ Next.js 9,5 или выше требуется. Функция headers была поддержана с следующей.js 9.5, поэтому вы должны использовать Next.js 9.5 или выше, если вы хотите использовать таким образом.

? Для следующих маршрутов. 10 и I18N. Если ваш проект использует Next.js 10 и встроенные маршруты I18N, и вы хотите применить правила для всех страниц, вы должны указать "/:path*" для source свойства вместо "/(.*)" . И наоборот, если ваш проект не использует маршруты i18n, даже если использует next.js 10, вы должны указать "/(.*)" . Эти ограничения, возможно, ошибки в next.js.

Этот способ использует функцию createSecureHeaders и встроенную конфигурацию заголовка By Next.js. Это не требуется каких -либо серверов, можно использовать на статических страницах и может сохранить автоматическую статическую оптимизацию. Если ваш проект не использует какие -либо серверы (используя статические страницы или SSG) или вы только что создали проект Next.js, я рекомендую сохранить статические страницы и принять это.

Import createSecureHeaders из заголовков следующих посетителей и используйте его в асинхронной функции headers в next.config.js .

 // /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 использует getServerSideProps of Next.js.

Используйте экспортируемую функцию для вашего приложения Next.js в /pages/_app.tsx . Кроме того, вместо этого вы можете использовать в любых компонентах страниц в /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 } > ] ;
}

Значение по умолчанию	МДН
[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 } ] ;
}

Значение по умолчанию	МДН
"deny"	https://developer.mozilla.org/docs/web/http/headers/x-frame-options

Это должно установить заголовок «x-frame-options», и это предотвратить атаки клика. "deny" настоятельно рекомендуется, если вы не используете такие элементы кадра, как iframe .

noopen

 {
  noopen: false | "noopen" ;
}

Значение по умолчанию	МДН
"noopen"	https://developer.mozilla.org/docs/web/http/headers/x-dwalload-options

Это должно установить заголовок «X-Download-Options», и он должен предотвратить автоматически открывать загруженные файлы для IE8+ (атаки обработки MIME).

nosniff

 {
  nosniff: false | "nosniff" ;
}

Значение по умолчанию	МДН
"nosniff"	https://developer.mozilla.org/docs/web/http/headers/x-content-type-options

Это должно установить заголовок «x-content-type-options», и это предотвращение атак MIME.

xssProtection

 {
  xssProtection: false | "sanitize" | "block-rendering" | [ "report" , { uri : string | URL } ] ;
}

Значение по умолчанию	МДН
"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-защита» блокирует множество атак 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 ;
      } ;
}

Значение по умолчанию	МДН
false	https://developer.mozilla.org/docs/web/http/headers/content-security-policy

Это установить «контент-безопасность-политика» или «заголовок контента-безопасность-политика-отчет, только для того, чтобы предотвратить загрузку и выполнять непотащиваемые ресурсы.

Если вы даете True The reportOnly , это устанавливает «контент-безопасность-политическую отчеты только для стоимости вместо« политики в области контента ».

Также вы можете указать директивы с использованием имен цепей, таких как child-src вместо childSrc .

❗ При установке frameAncestors : x-Frame-Options имеет приоритет. В разделе «Отношение к x-frame-options» спецификации CSP говорится: «Если ресурс предоставляется с политикой, которая включает в себя директиву под названием кадр-сериалы и чей расположение является« обеспечением », то заголовок X-Frame-Options должен быть игнорируется» , но вместо этого Chrome 40 & Firefox 35.

Поэтому, если установить frameAncestors , вы должны установить frameGuard в false .

expectCT

 {
  expectCT: boolean | [ true , Partial < { maxAge : number ; enforce : boolean ; reportURI : string | URL } > ] ;
}

Значение по умолчанию	МДН
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" ) [ ] ;
}

Значение по умолчанию	МДН
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 - это HOC для указания заголовков с использованием getServerSideProps . Вы можете использовать эту функцию для Application ( /pages/_app.tsx ) и компоненты Page ( /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-y-y-power-by

В целом, заголовок ответа HTTP X-Power-By HTTP должен быть удален из заголовков ответов, поскольку он помогает хакерам получить информацию о сервере.

Хеды следующих обязательств не поддерживают удаление заголовка X-Power-By, но Next.js поддерживает для этого.

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

Если вы отдаете ложь poweredByHeader в next.config.js , 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 ) ;

Чтобы решить это, вы должны определить опцию как один модуль, затем вы должны импортировать и объединить объект.

Вклад в заголовки следующих посетителей

Отчеты об ошибках и запросы на тягу приветствуются на GitHub по адресу https://github.com/jagaapple/next-secure-ders. Этот проект предназначен для безопасного, гостеприимного пространства для сотрудничества, и ожидается, что участники будут придерживаться Кодекса поведения завета участника.

Пожалуйста, прочитайте рекомендации по разработке и внести свой вклад.

Лицензия

Библиотека доступна как открытый исходный код в условиях лицензии MIT.

Copyright 2020 Jaga Apple. Все права защищены.