如何限制Next.js API仅允许自有Web应用与移动端应用访问

核心问题本质 #

浏览器端运行的前端代码天生无法存储敏感密钥：所有前端可访问的内容都可以被用户通过调试工具抓取，因此不能采用和移动端相同的静态私有密钥校验逻辑验证Web端请求来源。

可行落地方案 #

方案1：拆分不同端的来源校验规则 #

不用强求所有端用同一套校验逻辑，针对Web端的浏览器环境做适配：

• 移动端侧：保留你原计划的专属密钥校验逻辑，请求时携带X-App-Secret请求头，后端与数据库存储的密钥比对即可
• Web端侧：用「CORS域名限制 + CSRF令牌校验」组合实现来源合法性验证，无需携带密钥：
  • 配置API路由的CORS规则，仅允许你的自有Web端域名发起跨域请求，拦截所有非信任域名的请求
  • 登录接口返回JWT的同时，返回与用户会话绑定的CSRF令牌，或通过Next.js服务端渲染时直接注入到页面中，后续所有Web端请求携带X-CSRF-Token请求头，后端校验令牌与会话的匹配性即可证明请求来自自有前端

方案2：通过Next.js服务端代理统一封装密钥 #

如果要求所有端请求必须携带统一的专属密钥，可以将Web端的API调用全部收敛到Next.js服务端处理，完全避免密钥暴露到前端：

• 新增一层代理API路由（如/api/proxy/*），该路由运行在Next.js服务端侧，可安全读取存储在服务端环境变量中的专属密钥
• 前端所有业务请求不再直接调用业务API，而是调用上述代理路由，由代理路由在服务端添加密钥请求头后，再转发到对应的业务API，或直接复用原有业务逻辑代码
• 示例代码片段：

// pages/api/proxy/[...path].js 代理路由示例
export default async function handler(req, res) {
  const { path } = req.query;
  // 从服务端环境变量读取密钥，前端完全不可见
  const APP_SECRET = process.env.NEXT_PRIVATE_APP_SECRET;
  // 转发请求到业务接口，携带密钥
  const response = await fetch(`${process.env.API_BASE_URL}/${path.join('/')}`, {
    method: req.method,
    headers: {
      ...req.headers,
      'X-App-Secret': APP_SECRET
    },
    body: req.body
  });
  const data = await response.json();
  res.status(response.status).json(data);
}

安全注意事项 #

• 原有JWT会话校验逻辑不要移除，来源校验仅用于拦截非法来源请求，用户权限校验仍然依赖JWT，两层校验叠加安全性更高
• 所有敏感配置（密钥、JWT签名秘钥等）不要硬编码在代码中，统一存在环境变量或安全配置中心，避免提交到代码仓库
• 若使用代理方案，需要在代理层做好参数校验与频率限制，避免代理接口被恶意滥用

内容的提问来源于stack exchange，提问作者Marcel Dz