Vue中如何安全处理URL参数防止XSS攻击？

欧阳忠娟提问于 2026-03-25 21:45:21 阅读 10

安全

我在用Vue做项目时，需要从URL里取参数显示在页面上，但担心XSS风险。比如用户传了个带script标签的参数，直接渲染会不会被攻击？

我试过用encodeURIComponent，但好像只是编码了特殊字符，并不能阻止DOM渲染时的脚本执行。下面是我现在的写法：

<template>
  <div>{{ $route.query.msg }}</div>
</template>

<script>
export default {
  mounted() {
    // 比如 URL 是 ?msg=<script>alert(1)</script>
    console.log(this.$route.query.msg);
  }
}
</script>

这种写法是不是有安全隐患？应该怎么过滤或转义才安全？

我来解答赞 2 收藏

反馈

1 条解答

上官景源 Lv1

在Vue里直接渲染URL参数确实有XSS风险，你现在的写法确实不安全。简单说，你需要对用户输入进行转义处理。

首先别用 {{ }} 直接渲染外部输入的内容，Vue提供了一个专门的方法来避免这种情况：用 v-text 或者更保险的做法是用原生的DOM API。

我建议你这样改：



<template>

  <div ref="msgContainer"></div>

</template>



<script>

export default {

  mounted() {

    const msg = this.$route.query.msg || '';

    // 用 textContent 来设置内容

    this.$refs.msgContainer.textContent = msg;

  }

}

</script>

这种方法最保险，因为 DOM 的 textContent 属性会自动把HTML标签当成纯文本处理，不会执行任何脚本。

如果需要支持简单的HTML展示（比如加粗、换行），可以用第三方库像 DOMPurify 先清理一下再展示，不过一般情况下直接用 textContent 就够了。

这种处理方式虽然简单，但真的能有效防止大多数XSS攻击。干我们这行，安全意识很重要啊，不然很容易踩坑。

2026-03-25 22:04