內容安全政策 (Content Security Policy)

內容安全政策 (Content Security Policy, CSP) 對於保護您的 Next.js 應用程式免受各種安全威脅非常重要，例如跨網站指令碼 (XSS)、點擊劫持和其他程式碼注入攻擊。

透過使用 CSP，開發者可以指定哪些來源是可允許的內容來源，包括腳本、樣式表、圖片、字體、物件、媒體 (音訊、影片)、iframe 等等。

範例

嚴格 CSP

Nonce (一次性隨機數)

Nonce 是一個為一次性使用而建立的唯一隨機字串。它與 CSP 一起使用，可以有選擇地允許某些內聯腳本或樣式執行，繞過嚴格的 CSP 指令。

為什麼要使用 nonce？

儘管 CSP 旨在阻擋惡意腳本，但在某些合法情況下，內聯腳本是必要的。在這種情況下，nonce 提供了一種方式，讓這些腳本在擁有正確 nonce 時可以執行。

使用中介軟體 (Middleware) 新增 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 (favicon 檔案)
     */
    {
      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
      missing: [
        { type: 'header', key: 'next-router-prefetch' },
        { type: 'header', key: 'purpose', value: 'prefetch' },
      ],
    },
  ],
}

讀取 nonce

現在您可以從伺服器元件 (Server Component) 使用 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。

中介軟體 (Middleware)

學習如何使用中介軟體 (Middleware) 在請求完成前執行程式碼。

headers

關於 `headers` 函式的 API 參考文件。