Nuxt.js SSR服务端渲染安全加固：输入验证与输出编码

在Nuxt.js SSR项目中，安全加固是保障应用稳定运行的关键环节。本文将深入探讨输入验证与输出编码在服务端渲染环境中的实现方法。

输入验证实践

首先，在Nuxt.js的API路由中，我们需要对所有外部输入进行严格验证。以/api/users接口为例：

// server/middleware/validation.js
export default function (req, res, next) {
  const { id } = req.params;
  if (!id || isNaN(id)) {
    return res.status(400).json({ error: 'Invalid user ID' });
  }
  next();
}

// pages/api/users/[id].js
export default async function handler(req, res) {
  // 验证输入参数
  const validation = validateUserId(req.params.id);
  if (!validation.isValid) {
    return res.status(400).json({ error: validation.message });
  }
  // 处理业务逻辑
}

输出编码策略

针对SSR环境中的XSS防护，必须对所有动态内容进行HTML编码：

// utils/encoder.js
export function encodeHtml(str) {
  if (typeof str !== 'string') return str;
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;');
}

// 在组件中使用
export default {
  data() {
    return { 
      message: '<script>alert("XSS")</script>' 
    }
  },
  computed: {
    safeMessage() {
      return encodeHtml(this.message);
    }
  }
}

配置加固

在nuxt.config.js中启用安全头：

export default {
  render: {
    security: {
      csp: {
        reportOnly: true,
        policies: {
          'default-src': [''self''],
          'script-src': [''self'', ''unsafe-inline''],
          'style-src': [''self'', ''unsafe-inline'']
        }
      }
    }
  }
}

通过以上配置，可以有效防止常见的安全漏洞，确保SSR应用的稳定运行。