如何防止Vue中通过URL参数引发的反射型XSS？

远香（打工版）提问于 2026-03-13 10:28:17 阅读 5

安全

我最近在做一个搜索功能，URL里会带 keyword 参数，然后直接显示在页面上。但安全扫描说有反射型XSS风险，我试过用 v-html 但好像更危险了……

现在代码是这样的：

<template>
  <div>
    您搜索的是：{{ $route.query.keyword }}
  </div>
</template>

这样写真的会被XSS攻击吗？如果用户传了个 <script> 标签进来会执行吗？该怎么安全地展示这个参数？

我来解答赞 2 收藏

反馈

1 条解答

公孙梓晴 Lv1

先说结论：你现在这样写 {{ $route.query.keyword }} 其实反而是安全的。

Vue的模板插值默认会对HTML进行转义，用户传进来，页面上会直接显示这串文本，不会被执行。所以你完全没必要用 v-html，用了 v-html 才真的完蛋。

但为什么扫描器还报反射型XSS？这里有个点要注意：Vue的转义是针对模板渲染阶段的，如果你后面通过某些方式（比如某个第三方组件、或者你自己用了 innerHTML）绕过了Vue的转义，那就有问题了。

更稳妥的做法是自己在显示前先转义一遍，别全靠框架：

// 简单的转义函数

function escapeHtml(str) {

  const div = document.createElement('div')

  div.textContent = str

  return div.innerHTML

}

然后模板里这样用：

<template>

  <div>

    您搜索的是：{{ escapeHtml($route.query.keyword) }}

  </div>

</template>



<script>

export default {

  methods: {

    escapeHtml(str) {

      const div = document.createElement('div')

      div.textContent = str

      return div.innerHTML

    }

  }

}

</script>

另外，keyword 从 URL 取出来默认是字符串，如果你之前对它做过 decodeURIComponent 或者其他处理，也要确保处理顺序是对的，先转义再拼接。

还有就是可以在服务端加 CSP 响应头，多重防护嘛。

2026-03-13 11:05