AppScan 扫出 Vue 项目 XSS 漏洞怎么修复？

司徒子聪提问于 2026-03-30 11:34:17 阅读 3

安全

最近用 AppScan 扫我们 Vue 项目，报了个反射型 XSS 高危漏洞，说是在路由参数没过滤。但我明明用的是 Vue Router，参数都是通过 this.$route.query 拿的，页面上也只做了简单展示，没直接拼 HTML 啊？

试过用 DOMPurify 处理，但 AppScan 还是报。是不是我理解错了？下面是我用的代码：

<template>
  <div>
    <p>欢迎，{{ userName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: this.$route.query.name || '游客'
    }
  }
}
</script>

这个写法真有 XSS 风险吗？AppScan 是不是误报了？

AppScan Web安全测试

我来解答赞 1 收藏

反馈

1 条解答

A. 子诺 Lv1

Vue确实对XSS有一定防护，但这里你直接从路由参数取值展示还是有风险。虽然用了模板语法，但最好加一层保护。

首先在后端处理时就应该对输入做校验和过滤，但这不影响前端再加固一下。DOMPurify要用对地方，你的写法需要改一下：



import DOMPurify from 'dompurify';



export default {

  data() {

    return {

      userName: ''

    }

  },

  created() {

    let rawName = this.$route.query.name || '游客';

    this.userName = DOMPurify.sanitize(rawName);

  }

}

另外建议把变量名改成更具体的名字，比如safeUserName，这样代码可读性更好。其实Vue的插值表达式已经做了基本转义，但AppScan报出来说明可能有特殊情况能绕过，稳妥起见加上净化处理。

说真的，前后端都要重视安全问题，光靠前端防范不够，后端也要做好输入验证。这种细节搞定了，以后维护也省心。

2026-03-30 12:03