Remix中如何向Action传递标识符？隐藏输入的安全性疑问

结论先行 #

用隐藏输入向Action传递标识符是可行的，但绝对不能依赖隐藏字段做权限控制——你担心的用户修改ID误删其他用户的情况，完全会发生，必须在后端Action里做严格校验。

1. 隐藏字段传值的基本用法 #

Remix的Action可以正常接收隐藏输入的值，这是合法的传参方式。示例代码：

前端表单

<form method="post" action="/users/delete">
  <input type="hidden" name="targetUserId" value="user_123" />
  <button type="submit">删除该用户</button>
</form>

后端Action处理

import type { ActionArgs } from "@remix-run/node";

export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const targetUserId = formData.get("targetUserId");
  
  // 这里先拿到了ID，但直接删除会有风险
}

2. 你担心的风险确实存在 #

用户可以通过浏览器开发者工具轻松修改隐藏输入的value值，提交任意用户ID。如果你的Action没有做权限校验，直接执行删除操作，就会导致误删其他用户的数据，这是严重的安全问题。

3. 必须做的后端校验步骤 #

无论前端做了多少限制，后端Action都要做以下校验：

• 校验当前用户身份：从Session或请求上下文里获取当前登录用户的ID、角色等信息
• 校验操作权限：判断当前用户是否有权限删除目标用户（比如普通用户只能删除自己，管理员才能删除其他用户）
• 校验目标资源存在：确认传入的用户ID对应真实存在的用户，避免无效操作

示例校验代码：

import type { ActionArgs } from "@remix-run/node";
import { db } from "~/db";
import { getCurrentUser } from "~/utils/session";

export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const targetUserId = formData.get("targetUserId") as string;
  
  // 1. 获取当前登录用户
  const currentUser = await getCurrentUser(request);
  if (!currentUser) {
    throw new Response("未登录", { status: 401 });
  }
  
  // 2. 校验权限：管理员可删任意用户，普通用户只能删自己
  if (currentUser.role !== "admin" && currentUser.id !== targetUserId) {
    throw new Response("无权限执行此操作", { status: 403 });
  }
  
  // 3. 校验目标用户存在
  const targetUser = await db.user.findUnique({
    where: { id: targetUserId }
  });
  if (!targetUser) {
    throw new Response("用户不存在", { status: 404 });
  }
  
  // 4. 执行删除操作
  await db.user.delete({ where: { id: targetUserId } });
  return redirect("/users");
}

4. 额外优化建议 #

• 前端渲染删除按钮前，先通过loader校验权限，没有权限就不渲染按钮，从源头减少无效操作
• 重要操作增加二次确认弹窗（比如点击删除后弹出确认框），提升用户体验，但这不能替代后端校验

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