$route.hash 的客户端 URL 重定向错误

Posted 2023-03-17

【中文标题】$route.hash 的客户端 URL 重定向错误

【英文标题】：Client-side URL redirect error for $route.hash

【发布时间】：2021-06-24 07:24:41

【问题描述】：

GitHub 代码扫描开始抱怨我的旧 Vue 代码有安全警报。我确实理解它的目的 - 攻击者可以创建一个恶意 URI 来做一些令人讨厌的事情。

基于未经验证的用户输入的客户端 URL 重定向可能会导致 重定向到恶意网站。 CWE-79 CWE-116 CWE-601

它不喜欢以下代码，这是一种在 Vue 中向下滚动到指定锚点的解决方法：

  mounted() 
    const  hash  = this.$route;
    if (this.$route.hash) 
      setTimeout(() => 
        window.location.href = hash;
      , 1000);
    
  ,

首先 - 它真的没有经过验证吗？它由 Vue-router 处理。第二个 - 我能用这个警报做些什么吗？我正在考虑忽略它。坏主意？

【参考方案1】：

如果您只需要跳转到锚点，则无需解决方法。将 Vue Router 的 scroll behavior 配置为自动滚动到 hash 元素也可以解决 GitHub 警告：

// router.js
const router = new VueRouter(
  //...
  scrollBehavior(to, from, savedPosition) 
    if (savedPosition) 
      return savedPosition
    
    if (to.hash) 
      return 
        selector: to.hash,
        behavior: 'smooth'
      
    
  
)

demo

【讨论】：

您好，您的演示工作正常，但在我的项目中不行。我过去已经尝试过这种方法：github.com/literakl/mezinamiridici/blob/master/spa/src/…。使其工作的唯一解决方法是挂载的 hack。