Next.js Server Actions安全性、底层原理及组件内权限检查咨询

1. Server Actions 的安全性 #

Server Actions 本身是 Next.js 为服务器端执行逻辑设计的安全机制：

• 标记了"use server"的函数仅在服务器环境运行，客户端无法获取到函数的具体实现，避免敏感逻辑泄露。
• Next.js 会自动处理请求的签名验证，防范非法请求伪造（如 CSRF），但这仅保证请求的合法性，不能替代业务层面的权限校验。
• 最终安全性取决于开发者实现：必须做好输入校验与权限检查，避免直接使用未验证的用户输入执行敏感操作（如数据库修改）。

2. 底层原理与权限校验疑问 #

底层工作原理 #

Server Actions 的核心是将标记"use server"的函数映射为内部 API 路由：

• 当你把 Server Action 作为 form 的action属性时，Next.js 会在构建或运行时生成对应的服务器端点。
• 客户端触发提交时，会向该端点发送请求，请求携带必要上下文（如用户会话），服务器端执行函数逻辑后返回结果。
• 函数逻辑完全在服务器端运行，客户端无法干预或查看内部代码。

权限检查的关键注意事项 #

针对你的代码示例，必须明确以下几点：

• 必须在 Server Action 内部再次做权限检查：组件外层的if (!hasViewerAccess(targetUser))只是渲染阶段的校验，攻击者可绕过组件渲染，直接构造请求调用 Server Action 的端点，此时外层校验完全无效。
• TypeScript 的提示不可信：TypeScript 提示变量始终为 true，是因为编译阶段仅能看到组件渲染时的逻辑，无法预知服务器端运行时的请求上下文（比如攻击者可能篡改请求中的目标用户参数），必须手动在 Action 内部添加权限校验。
• Server Components 同样需遵守权限规则：无论 Server Action 定义在 Server Components 还是 Client Components 中，它本质都是服务器端可调用函数，任何能构造合法请求的客户端都能触发它，所以官方文档要求的「在 Action 内部检查用户权限」规则完全适用。

修正后的代码示例 #

async function DeleteUser({ targetUser }: Props) {
  // 渲染阶段校验：避免无权限用户看到删除按钮
  if (!hasViewerAccess(targetUser)) return "403 forbidden";

  const submit = async () => {
    "use server";

    // 关键：服务器端执行时再次校验权限
    if (!hasViewerAccess(targetUser)) {
      throw new Error("403 forbidden");
    }

    deleteUser(targetUser);
  };

  return (
    <form action={submit}>
      <input type="submit" value="Delete" />
    </form>
  );
}

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