introduction

为了提高应用的安全性,你能够使用headers到 next.config.js中将这些安全头应用到Http 响应头中到引用中的所有路由 ..

  1. // next.config.js
  3. // You can choose which headers to add to the list
  4. // after learning more below.
  5. const securityHeaders = []
  7. module.exports = {
  8.   async headers() {
  9.     return [
  10.       {
  11.         // Apply these headers to all routes in your application.
  12.         source: '/(.*)',
  13.         headers: securityHeaders,
  14.       },
  15.     ]
  16.   },
  17. }

选项

X-DNS-Prefetch-Control

这个请求头控制DNS 预抓取,允许浏览器去先执行域名解析(在外部链接,Css,图片,以及更多),这个预抓取是在后台执行的,在需要引用对应的项目时,DNS 能够更快的解析,减少用户点击一个链接的延时 …

  1. {
  2.   key: 'X-DNS-Prefetch-Control',
  3.   value: 'on'
  4. }

Strict-Transport-Security

这个响应头告诉浏览器应该能够通过Https访问,而不是Http,使用以下配置,素有存在以及未来的后续域名都是用Https(最大时间2年),如果通过http访问页面或者子域将会导致阻止访问 ….

如果你部署在Vercel上,这个header 是不必要的(因为它将自动的增加到所有部署上) …

  1. {
  2.   key: 'Strict-Transport-Security',
  3.   value: 'max-age=63072000; includeSubDomains; preload'
  4. }

X-XSS-Protection

这个头将停止页面被加载(当它们检测到跨域站点脚本攻击(XSS),尽管这个保护不是必要的(如果站点实现了一个强壮的Content-Security-Policy(禁用内联脚本的使用unsafe-inline),它能够提供对不支持CSP的旧版本浏览器的保护 …

  1. {
  2.   key: 'X-XSS-Protection',
  3.   value: '1; mode=block'
  4. }

X-Frame-Options

这个请求头指示一个站点是否允许在iframe标签中使用,这能够保护点击劫持攻击 … 这个请求头已经CSP的frame-ancestors选项取代(但是对于不支持CSP的浏览器也是必须的)

  1. {
  2.   key: 'X-Frame-Options',
  3.   value: 'SAMEORIGIN'
  4. }

Permissions-Policy

这个请求头允许你控制那些特性以及API 能够使用在浏览器中,它之前的名称是Feature-Policy,你能够浏览完整的权限选项(here) …

  1. {
  2.   key: 'Permissions-Policy',
  3.   value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()'
  4. }

这些权限是浏览器提供用来调用操作系统底层的东西 ..

X-Content-Type-Options

这个请求头阻止了浏览器尝试猜测内容的类型(假设Content-Type请求头没有显式的设置,这能够阻止XSS 漏洞(exploits)(允许用户上传并共享文件) … 举个例子,一个用户尝试去下载一个图片,但是这个所谓的图片可能具有不同的Content-Type(也许它能够被执行),那么这可能很危险,这个请求头也能够应用到下载浏览器扩展中,这个请求头的唯一有效值是nosniff…

  1. {
  2.   key: 'X-Content-Type-Options',
  3.   value: 'nosniff'
  4. }

Referrer-Policy

这个请求头控制浏览器包括那些信息(当从当前web站点导航到另一个的时候),你能够读取有关不同的选项here.

  1. {
  2.   key: 'Referrer-Policy',
  3.   value: 'origin-when-cross-origin'
  4. }

Content-Security-Policy

这个请求头帮助保护XSS(cross-site scripting) 攻击,点击劫持以及其他代码注入攻击,Content Security Plicy(CSP)能够指定允许的来源的内容是允许的(包括脚本,样式,图片,字体,对象,媒体(音频/视频),以及iframes以及更多 ..

你能够读取CSP的各种选项 ..here.

  1. {
  2.   key: 'Content-Security-Policy',
  3.   value: // Your CSP Policy
  4. }

参考