安全性 (Security)

安全性不是附加功能，而是開發的基礎。本章將介紹如何在 Nuxt 應用程式中實作輸入驗證、設定安全標頭，並保護您的敏感資料。

資料驗證 (Zod)

永遠不要信任客戶端的輸入。我們推薦使用 Zod 來驗證 API 請求的 Body 與 Query Parameters。

Terminal

pnpm add zod h3-zod

在 Server Handler 中使用：

server/api/register.post.ts

import { z } from 'zod'

const userSchema = z.object({
  username: z.string().min(3),
  email: z.string().email(),
  age: z.number().min(18)
})

export default defineEventHandler(async (event) => {
  // readValidatedBody 會自動驗證並拋出 400 錯誤
  const body = await readValidatedBody(event, (body) => userSchema.parse(body))
  
  return { success: true, user: body }
})

安全性標頭

設定適當的 HTTP Headers 可以防禦 XSS、Clickjacking 等攻擊。您可以使用 nuxt-security 模組，或在 nuxt.config.ts 中手動設定。

nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    '/**': {
      headers: {
        'X-Frame-Options': 'SAMEORIGIN',
        'X-Content-Type-Options': 'nosniff',
        'Referrer-Policy': 'strict-origin-when-cross-origin'
      }
    }
  }
})

環境變數安全

再次強調，絕對不要將私鑰 (Private Keys) 放入 public runtime config 中。

危險做法 (Don't)

runtimeConfig: {
  public: {
    // ❌ 這會暴露給瀏覽器！
    stripeSecret: 'sk_live_...'
  }
}

正確做法 (Do)

runtimeConfig: {
  // ✅ 僅限伺服器端存取
  stripeSecret: 'sk_live_...',
  public: {
    apiBase: '/api'
  }
}