Nuxt4 安全防护体系

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-security'],
  security: {
    headers: {
      contentSecurityPolicy: {
        'script-src': ["'self'", "'unsafe-inline'"],
      },
      crossOriginEmbedderPolicy: 'require-corp',
      xContentTypeOptions: 'nosniff',
      xFrameOptions: 'DENY',
      xXSSProtection: '1; mode=block',
    },
    requestSizeLimiter: { maxRequestSizeInBytes: 2000000 },  // 2MB
    rateLimiter: { tokensPerInterval: 150, interval: 300000 },
    corsHandler: { origin: ['https://example.com'] },
  },
})

<template>
  <!-- ✅ 安全：自动转义，<script> 变为 &lt;script&gt; -->
  <p>{{ userInput }}</p>
 
  <!-- ✅ 安全：属性绑定也会转义 -->
  <div :title="userInput"></div>
</template>

<!-- ❌ 极度危险：如果 content 来自用户输入 -->
<div v-html="content"></div>

// app/composables/useSanitize.ts
import DOMPurify from 'isomorphic-dompurify'
 
export function useSanitize() {
  function sanitize(dirty: string): string {
    return DOMPurify.sanitize(dirty, {
      ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'li'],
      ALLOWED_ATTR: ['href', 'target', 'rel'],
    })
  }
  return { sanitize }
}

<template>
  <!-- ✅ 过滤后的 HTML -->
  <div v-html="sanitize(article.content)"></div>
</template>
 
<script setup>
const { sanitize } = useSanitize()
</script>

function isSafeUrl(url: string): boolean {
  try {
    const parsed = new URL(url)
    return ['http:', 'https:'].includes(parsed.protocol)
  } catch {
    return false
  }
}

<a :href="isSafeUrl(link) ? link : '#'">{{ linkText }}</a>

// server/api/auth/login.post.ts
setCookie(event, 'auth-token', token, {
  httpOnly: true,    // JS 不可读取
  secure: true,      // 仅 HTTPS
  sameSite: 'lax',   // 同站请求才携带 Cookie
  maxAge: 60 * 60 * 24 * 7,  // 7 天
  path: '/',
})

// nuxt.config.ts
export default defineNuxtConfig({
  security: {
    csrf: {
      enabled: true,
      cookie: { name: '__csrf' },
    },
  },
})

// server/middleware/csrf-check.ts
export default defineEventHandler((event) => {
  if (['POST', 'PUT', 'DELETE', 'PATCH'].includes(event.method)) {
    const origin = getRequestHeader(event, 'origin')
    const allowedOrigins = ['https://example.com']
 
    if (origin && !allowedOrigins.includes(origin)) {
      throw createError({ statusCode: 403, message: 'CSRF check failed' })
    }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  security: {
    headers: {
      contentSecurityPolicy: {
        'default-src': ["'self'"],
        'script-src': ["'self'", "'nonce-{{nonce}}'"],  // nonce 模式
        'style-src': ["'self'", "'unsafe-inline'"],      // Vue SFC 需要
        'img-src': ["'self'", 'data:', 'https://images.example.com'],
        'connect-src': ["'self'", 'https://api.example.com'],
        'font-src': ["'self'", 'https://fonts.gstatic.com'],
        'frame-ancestors': ["'none'"],
        'base-uri': ["'self'"],
        'form-action': ["'self'"],
      },
    },
    nonce: true,  // 自动为内联脚本添加 nonce
  },
})

// server/middleware/https-redirect.ts
export default defineEventHandler((event) => {
  if (import.meta.prod) {
    const proto = getRequestHeader(event, 'x-forwarded-proto')
    if (proto === 'http') {
      const host = getRequestHeader(event, 'host')
      return sendRedirect(event, `https://${host}${event.path}`, 301)
    }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  security: {
    headers: {
      strictTransportSecurity: {
        maxAge: 31536000,        // 1 年
        includeSubdomains: true,
        preload: true,
      },
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // ✅ 私有：只在 server/ 中可访问
    openaiApiKey: process.env.OPENAI_API_KEY,
    dbPassword: process.env.DB_PASSWORD,
    jwtSecret: process.env.JWT_SECRET,
 
    public: {
      // ⚠️ 公开：会暴露到客户端 JS bundle
      apiBase: process.env.API_BASE,
      appName: 'AI Video Platform',
    },
  },
})

// ❌ 危险：useFetch 的数据会进入 Payload
const { data: user } = await useFetch('/api/user/me')
// user.value 包含 { id, name, email, passwordHash, internalNotes }
// passwordHash 和 internalNotes 会暴露到客户端！

// ✅ 安全：API 层只返回必要字段
// server/api/user/me.get.ts
export default defineEventHandler(async (event) => {
  const user = await getUserFromToken(event)
  return {
    id: user.id,
    name: user.name,
    email: user.email,
    avatar: user.avatar,
    // 不返回 passwordHash, internalNotes 等敏感字段
  }
})

# .env — 不提交到 Git
OPENAI_API_KEY=sk-xxx
DB_PASSWORD=xxx
JWT_SECRET=xxx
 
# .env.example — 提交到 Git（不含真实值）
OPENAI_API_KEY=
DB_PASSWORD=
JWT_SECRET=

// ❌ SQL 注入风险
const query = `SELECT * FROM videos WHERE title LIKE '%${userInput}%'`
 
// ✅ 参数化查询（Drizzle）
const videos = await db.select().from(videosTable)
  .where(like(videosTable.title, `%${userInput}%`))

// server/api/videos/index.post.ts
import { z } from 'zod'
 
const createVideoSchema = z.object({
  title: z.string().min(1).max(200),
  description: z.string().max(5000).optional(),
  tags: z.array(z.string().max(50)).max(10),
})
 
export default defineEventHandler(async (event) => {
  const body = await readValidatedBody(event, createVideoSchema.parse)
  // body 已经过校验和类型安全
  return createVideo(body)
})

// nuxt.config.ts
export default defineNuxtConfig({
  security: {
    rateLimiter: {
      tokensPerInterval: 100,   // 每个时间窗口 100 次请求
      interval: 60000,          // 60 秒窗口
    },
  },
  routeRules: {
    '/api/auth/login': {
      security: {
        rateLimiter: {
          tokensPerInterval: 5,   // 登录接口更严格
          interval: 300000,       // 5 分钟 5 次
        },
      },
    },
  },
})