使用React navigate()跳转第三方认证返回URL是否存在开放重定向漏洞？

为啥有风险？ #

• 攻击者能构造恶意参数，比如把return_back_to设成钓鱼网站的地址，用户走完认证流程后会直接被跳转到这个恶意站点。用户大概率会因为是从官方认证环节跳过来的，放松戒备，进而泄露账号密码这类敏感信息。
• 就算你一开始是自己把参数传给外部认证服务的，但这类服务一般不会校验参数合法性，只会原样返回。攻击者完全可以通过构造钓鱼链接诱导用户点击，篡改这个参数，绕过你最初的设置。

怎么解决？ #

• 白名单校验：提前列好允许跳转的合法路径，比如只允许应用内的路由（像/、/foo/bar这类），跳转前先检查return_back_to的值在不在白名单里，不符合就跳去默认页面（比如首页）。
  示例代码：

  // 定义允许跳转的路径白名单
  const allowedPaths = ['/', '/foo/bar', '/dashboard'];
  // 获取查询参数里的返回路径
  const returnPath = new URLSearchParams(window.location.search).get('return_back_to');
  
  // 校验后再跳转
  if (returnPath && allowedPaths.includes(returnPath)) {
    navigate(returnPath);
  } else {
    navigate('/'); // 不符合就跳首页
  }
  

• 只允许相对路径：限制跳转的路径必须是相对路径（也就是不能以http://或https://开头），这样能避免跳转到外部域名。同时最好再确认下路径属于你的应用路由范围，防止跳转到恶意内部路径。
• 添加签名校验：给return_back_to参数加个签名，跳转前验证签名是否有效，确保参数没被篡改。这种方式适合复杂场景，但实现起来会麻烦点。

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