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

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

安全

我们团队最近在做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>

我来解答赞 13 收藏

反馈

2 条解答

A. 永景 Lv1

这问题前端这块确实挺常见。直接用 v-html 渲染用户输入的内容风险很大，特别是从URL参数获取数据。

首先得承认 DOMPurify 是个不错的选择，但你得确保配置正确。建议在使用 DOMPurify 前先对内容做基本校验，比如检查是否包含恶意标签或属性。

这里有个简单方案：在获取数据后立即处理 userContent。记得把 script 标签和一些危险的事件属性都清理掉。下面是改进后的代码：



import DOMPurify from 'dompurify';



export default {

  data() {

    return {

      userContent: ''

    }

  },

  created() {

    let rawContent = this.$route.query.content || '';

    // 先做一层简单的防御

    if (rawContent.includes('<script') || rawContent.includes('javascript:')) {

      rawContent = 'Invalid content';

    }

    // 使用 DOMPurify 进行深度清洗

    this.userContent = DOMPurify.sanitize(rawContent, { 

      ALLOWED_TAGS: ['b', 'i', 'u', 'a'], // 根据需求调整允许的标签

      FORBID_ATTR: ['onclick', 'onmouseover'] // 禁止危险属性

    });

  }

}

这样做能极大降低XSS风险，但记住没有绝对安全。还得结合后端做好输入验证。有时候真想骂街，明明前端只需要展示内容，却要操心这么多安全问题。不过为了项目安全，该做的防护还是要做足。

2026-03-27 08:06

萌新.文华 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