v6路由安全审计

React Router v6的升级带来了诸多改进，但在实际应用中，路由安全问题不容忽视。本文将从安全角度分析v6路由的核心风险点。

路由权限控制漏洞

在v6中，useRoutes和useNavigate的使用需要格外注意权限验证。以下是一个常见的安全漏洞示例：

// 危险的路由配置
const routes = [
  {
    path: '/admin',
    element: <AdminPanel />
  }
];

// 缺乏权限检查的导航
const AdminButton = () => {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/admin')}>管理面板</button>
  );
};

修复方案：

const ProtectedRoute = ({ children }) => {
  const { user } = useAuth();
  if (!user?.isAdmin) {
    return <Navigate to="/" />;
  }
  return children;
};

const routes = [
  {
    path: '/admin',
    element: (
      <ProtectedRoute>
        <AdminPanel />
      </ProtectedRoute>
    )
  }
];

路由参数注入风险

v6中使用useParams时，需要对路由参数进行严格验证：

const UserProfile = () => {
  const { userId } = useParams();
  // 危险：未验证参数类型
  const user = fetchUser(userId);
  
  // 安全：验证参数
  if (!/^[0-9]+$/.test(userId)) {
    return <Navigate to="/404" />;
  }
  return <UserDetail userId={parseInt(userId)} />;
};

路由重定向安全

Navigate组件的使用需要避免重定向循环：

// 避免无限重定向
const SafeRedirect = () => {
  const location = useLocation();
  const { isAuthenticated } = useAuth();
  
  if (isAuthenticated && location.pathname === '/login') {
    return <Navigate to="/dashboard" replace />;
  }
  
  if (!isAuthenticated && location.pathname !== '/login') {
    return <Navigate to="/login" replace />;
  }
  
  return null;
};

通过以上安全审计和修复措施，可以有效防范v6路由中的常见安全风险。建议在项目升级时进行全面的安全检查。