安全头部中间件

安全头部中间件简化了安全头部的设置。部分受Helmet功能的启发，它允许您控制特定安全头部的启用和禁用。

导入

import { Hono } from 'hono'
import { secureHeaders } from 'hono/secure-headers'

使用方法

您可以默认使用最佳设置。

const app = new Hono()
app.use(secureHeaders())

您可以通过将不必要的头设置为 false 来抑制它们。

const app = new Hono()
app.use(
  '*',
  secureHeaders({
    xFrameOptions: false,
    xXssProtection: false,
  })
)

您可以使用字符串覆盖默认头值。

const app = new Hono()
app.use(
  '*',
  secureHeaders({
    strictTransportSecurity:
      'max-age=63072000; includeSubDomains; preload',
    xFrameOptions: 'DENY',
    xXssProtection: '1',
  })
)

支持的选项

每个选项对应以下标题键值对。

选项	头部	值	默认值
-	X-Powered-By	(删除头部)	True
contentSecurityPolicy	Content-Security-Policy	用法: 设置内容安全策略	无设置
crossOriginEmbedderPolicy	Cross-Origin-Embedder-Policy	require-corp	False
crossOriginResourcePolicy	Cross-Origin-Resource-Policy	same-origin	True
crossOriginOpenerPolicy	Cross-Origin-Opener-Policy	same-origin	True
originAgentCluster	Origin-Agent-Cluster	?1	True
referrerPolicy	Referrer-Policy	no-referrer	True
reportingEndpoints	Reporting-Endpoints	用法: 设置内容安全策略	无设置
reportTo	Report-To	用法: 设置内容安全策略	无设置
strictTransportSecurity	Strict-Transport-Security	max-age=15552000; includeSubDomains	True
xContentTypeOptions	X-Content-Type-Options	nosniff	True
xDnsPrefetchControl	X-DNS-Prefetch-Control	off	True
xDownloadOptions	X-Download-Options	noopen	True
xFrameOptions	X-Frame-Options	SAMEORIGIN	True
xPermittedCrossDomainPolicies	X-Permitted-Cross-Domain-Policies	none	True
xXssProtection	X-XSS-Protection	0	True

中间件冲突

处理操作相同头部的中间件时，请注意规范的顺序。

在这种情况下，Secure-headers 生效，x-powered-by 被移除：

const app = new Hono()
app.use(secureHeaders())
app.use(poweredBy())

在这种情况下，Powered-By 生效，x-powered-by 被添加：

const app = new Hono()
app.use(poweredBy())
app.use(secureHeaders())

设置内容安全策略

const app = new Hono()
app.use(
  '/test',
  secureHeaders({
    reportingEndpoints: [
      {
        name: 'endpoint-1',
        url: 'https://example.com/reports',
      },
    ],
    // -- 或者
    // reportTo: [
    //   {
    //     group: 'endpoint-1',
    //     max_age: 10886400,
    //     endpoints: [{ url: 'https://example.com/reports' }],
    //   },
    // ],
    contentSecurityPolicy: {
      defaultSrc: ["'self'"],
      baseUri: ["'self'"],
      childSrc: ["'self'"],
      connectSrc: ["'self'"],
      fontSrc: ["'self'", 'https:', 'data:'],
      formAction: ["'self'"],
      frameAncestors: ["'self'"],
      frameSrc: ["'self'"],
      imgSrc: ["'self'", 'data:'],
      manifestSrc: ["'self'"],
      mediaSrc: ["'self'"],
      objectSrc: ["'none'"],
      reportTo: 'endpoint-1',
      sandbox: ['allow-same-origin', 'allow-scripts'],
      scriptSrc: ["'self'"],
      scriptSrcAttr: ["'none'"],
      scriptSrcElem: ["'self'"],
      styleSrc: ["'self'", 'https:', "'unsafe-inline'"],
      styleSrcAttr: ['none'],
      styleSrcElem: ["'self'", 'https:', "'unsafe-inline'"],
      upgradeInsecureRequests: [],
      workerSrc: ["'self'"],
    },
  })
)

`nonce` 属性

您可以通过将从 hono/secure-headers 导入的 NONCE 添加到 scriptSrc 或 styleSrc，为 script 或 style 元素添加一个 nonce 属性：

tsx

import { secureHeaders, NONCE } from 'hono/secure-headers'
import type { SecureHeadersVariables } from 'hono/secure-headers'

// Specify the variable types to infer the `c.get('secureHeadersNonce')`:
type Variables = SecureHeadersVariables

const app = new Hono<{ Variables: Variables }>()

// Set the pre-defined nonce value to `scriptSrc`:
app.get(
  '*',
  secureHeaders({
    contentSecurityPolicy: {
      scriptSrc: [NONCE, 'https://allowed1.example.com'],
    },
  })
)

// Get the value from `c.get('secureHeadersNonce')`:
app.get('/', (c) => {
  return c.html(
    <html>
      <body>
        {/** contents */}
        <script
          src='/js/client.js'
          nonce={c.get('secureHeadersNonce')}
        />
      </body>
    </html>
  )
})

如果您想自己生成 nonce 值，您也可以指定一个函数，如下所示：

tsx

const app = new Hono<{
  Variables: { myNonce: string }
}>()

const myNonceGenerator: ContentSecurityPolicyOptionHandler = (c) => {
  // This function is called on every request.
  const nonce = Math.random().toString(36).slice(2)
  c.set('myNonce', nonce)
  return `'nonce-${nonce}'`
}

app.get(
  '*',
  secureHeaders({
    contentSecurityPolicy: {
      scriptSrc: [myNonceGenerator, 'https://allowed1.example.com'],
    },
  })
)

app.get('/', (c) => {
  return c.html(
    <html>
      <body>
        {/** contents */}
        <script src='/js/client.js' nonce={c.get('myNonce')} />
      </body>
    </html>
  )
})

安全头部中间件 ​

导入 ​

使用方法 ​

支持的选项 ​

中间件冲突 ​

设置内容安全策略 ​

nonce 属性 ​