v6版本升级后路由参数传递安全问题记录

Violet340 +0/-0 0 0 正常 2025-12-24T07:01:19 React-Router

在React Router v6升级后，我们遇到了一个路由参数传递的安全问题。问题表现为当用户访问/user/123这样的路由时，虽然能正常获取到id参数，但在某些特定场景下参数会丢失或被篡改。

复现步骤：

在v6中使用useParams()获取路由参数
在组件中通过{...params}展开参数传递给子组件
当路由参数包含特殊字符时，参数解析出现异常

问题代码：

function UserComponent() {
  const params = useParams();
  // 这里直接使用params，可能导致安全问题
  return <UserProfile userId={params.id} />;
}

解决方案： 建议对路由参数进行严格校验和编码处理。在获取参数后，先进行类型检查和URL解码，确保参数的安全性。

function UserComponent() {
  const params = useParams();
  // 参数校验和解码
  const userId = params.id ? decodeURIComponent(params.id) : null;
  if (!userId || isNaN(userId)) {
    return <div>无效的用户ID</div>;
  }
  return <UserProfile userId={parseInt(userId)} />;
}

通过这样的处理，可以有效防止路由参数传递过程中的安全风险。