next-i18next 安全最佳实践：防止 XSS 和其他安全威胁

next-i18next 是 Next.js 应用国际化的终极解决方案，但安全配置不当可能导致严重的 XSS 攻击风险。本文将为你提供完整的安全指南，确保你的多语言应用既功能强大又安全可靠。🚀

为什么 next-i18next 安全如此重要？

在构建国际化应用时，next-i18next 处理着来自不同来源的翻译内容。如果这些内容包含恶意脚本，而系统没有适当的安全防护，用户数据将面临严重威胁。特别是当翻译内容由第三方提供或用户可编辑时，安全风险更加突出。

核心安全配置：escapeValue 设置

在 src/config/defaultConfig.ts 中，next-i18next 默认设置了 escapeValue: false。这意味着默认情况下，插值不会被自动转义，为 XSS 攻击留下了潜在入口。

安全配置示例：

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'zh'],
  },
  interpolation: {
    escapeValue: true, // 启用自动转义
  },
}

防止 XSS 攻击的 5 个关键策略

1️⃣ 启用自动转义功能

在配置中明确设置 escapeValue: true 是最基本的安全措施：

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
  interpolation: {
    escapeValue: true, // 防止恶意脚本注入
  },
}

2️⃣ 验证翻译内容来源

确保翻译文件来自可信来源：examples/simple/public/locales 目录应该只包含经过审核的内容。

3️⃣ 使用 Content Security Policy (CSP)

为你的 Next.js 应用添加 CSP 头，进一步加固安全防护：

// next.config.js
const { i18n } = require('./next-i18next.config')

module.exports = {
  i18n,
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self'",
      },
    ]
  },
}

4️⃣ 实施输入验证和清理

在 src/serverSideTranslations.ts 处理翻译数据时，确保对用户输入进行严格验证。

5️⃣ 定期安全审计

检查 src/config/createConfig.test.ts 中的测试用例，确保安全配置正确生效。

实际案例分析：安全配置对比

不安全配置：

// ❌ 风险配置
module.exports = {
  i18n: { /* ... */ },
  interpolation: {
    escapeValue: false, // 禁用转义
  },
}

安全配置：

// ✅ 推荐配置
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'zh'],
  },
  interpolation: {
    escapeValue: true, // 启用转义
  },
}

高级安全特性

自定义转义函数

对于特殊需求，你可以实现自定义转义逻辑：

module.exports = {
  i18n: { /* ... */ },
  interpolation: {
    escapeValue: true,
    escape: (str) => {
      // 自定义转义逻辑
      return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
    },
  },
}

常见安全陷阱及解决方案

陷阱 1：过度信任翻译内容

解决方案： 对所有动态内容进行转义处理

陷阱 2：忽略 CSP 配置

解决方案： 实施严格的内容安全策略

陷阱 3：配置不一致

解决方案： 统一开发、测试和生产环境的安全配置

最佳实践检查清单

✅ 设置 interpolation.escapeValue: true
✅ 实施 Content Security Policy
✅ 验证翻译文件完整性
✅ 定期更新安全依赖
✅ 进行渗透测试

总结

next-i18next 为 Next.js 应用提供了强大的国际化能力，但安全必须放在首位。通过正确配置 escapeValue、实施 CSP 和持续的安全监控，你可以构建既用户友好又安全可靠的多语言应用。

记住：安全不是一次性的任务，而是持续的过程。定期审查和更新你的安全配置，确保你的应用始终处于最佳防护状态。🛡️