内容安全策略 (Content Security Policy)

内容安全策略 (CSP) 对于防范 Next.js 应用遭受跨站脚本 (XSS)、点击劫持和其他代码注入攻击等安全威胁至关重要。

通过 CSP，开发者可以指定允许加载内容的来源，包括脚本、样式表、图片、字体、对象、媒体（音频、视频）、iframe 等。

示例

严格 CSP

Nonce 随机数

Nonce 是一个一次性使用的唯一随机字符串。它与 CSP 配合使用，可以绕过严格的 CSP 指令，选择性地允许特定的内联脚本或样式执行。

为何使用 Nonce？

尽管 CSP 旨在阻止恶意脚本，但在某些合法场景中内联脚本是必需的。此时，Nonce 提供了一种验证机制——只有携带正确 Nonce 的脚本才能执行。

通过中间件添加 Nonce

中间件允许您在页面渲染前添加头部信息并生成 Nonce。

每次页面访问时都应生成新的 Nonce，这意味着 必须使用动态渲染来添加 Nonce。

例如：

import { NextRequest, NextResponse } from 'next/server'

export function middleware(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
`
  // 替换换行符和空格
  const contentSecurityPolicyHeaderValue = cspHeader
    .replace(/\s{2,}/g, ' ')
    .trim()

  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-nonce', nonce)

  requestHeaders.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  })
  response.headers.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )

  return response
}

默认情况下，中间件会处理所有请求。您可以通过 matcher 配置使其仅针对特定路径生效。

我们建议忽略来自 next/link 的预取请求和不需要 CSP 头的静态资源：

export const config = {
  matcher: [
    /*
     * 匹配所有请求路径，除了以下开头的路径：
     * - api (API 路由)
     * - _next/static (静态文件)
     * - _next/image (图片优化文件)
     * - favicon.ico (网站图标文件)
     */
    {
      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
      missing: [
        { type: 'header', key: 'next-router-prefetch' },
        { type: 'header', key: 'purpose', value: 'prefetch' },
      ],
    },
  ],
}

读取 Nonce

现在您可以通过 headers 在服务端组件中读取 Nonce：

import { headers } from 'next/headers'
import Script from 'next/script'

export default function Page() {
  const nonce = headers().get('x-nonce')

  return (
    <Script
      src="https://www.googletagmanager.com/gtag/js"
      strategy="afterInteractive"
      nonce={nonce}
    />
  )
}

不使用 Nonce 的方案

对于不需要 Nonce 的应用，可以直接在 next.config.js 文件中设置 CSP 头：

next.config.js

const cspHeader = `
    default-src 'self';
    script-src 'self' 'unsafe-eval' 'unsafe-inline';
    style-src 'self' 'unsafe-inline';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
`

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
        ],
      },
    ]
  },
}

版本历史

建议使用 Next.js v13.4.20+ 版本以获得完整的 Nonce 支持。