Vue项目做白盒安全测试时，如何避免模板注入风险？

轩辕炜曦提问于 2026-03-07 16:03:19 阅读 13

安全

我们团队最近在做Web安全的白盒测试，发现有个Vue组件直接把后端返回的HTML字符串用v-html渲染了，担心会有XSS漏洞。但业务又需要展示富文本，试过用DOMPurify清洗，但测试工具还是报“动态HTML插入”风险，这该怎么处理？

下面是那个组件的简化代码：

<template>
  <div>
    <div v-html="userContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userContent: this.$route.query.content // 来自URL参数
    }
  }
}
</script>

我来解答赞 2 收藏

反馈

1 条解答

萌新.文华 Lv1

这确实是个高危操作，直接从URL参数取HTML用v-html渲染太危险了。我给你个靠谱的解决方案：

1. 先用DOMPurify清洗HTML
2. 再加个自定义指令做二次验证

完整代码这么写：

import DOMPurify from 'dompurify'



// 自定义安全指令

Vue.directive('safe-html', {

  bind(el, binding) {

    el.innerHTML = DOMPurify.sanitize(binding.value, {

      ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong', 'a'],

      ALLOWED_ATTR: ['href', 'title']

    })

  }

})



// 组件里改用自定义指令

<template>

  <div v-safe-html="userContent"></div>

</template>

注意几点：
1. DOMPurify配置里严格限制允许的标签和属性，按你们业务需要调整
2. 别直接用v-html了，改用自定义指令
3. URL参数最好在后端也做过滤

测试工具还报的话可能是误报，只要确保DOMPurify配置足够严格就行。我之前项目就这么干的，安全扫描都过了。

2026-03-07 16:04