前端如何在Vue项目中安全地处理用户输入以防止XSS攻击？

长孙艳杰提问于 2026-03-24 10:12:22 阅读 8

安全

我在做DevSecOps集成时，安全扫描工具报了一个高危XSS漏洞，说用户输入直接渲染到页面上了。我试过用v-text，但有些地方必须用v-html展示富文本，结果就被扫出问题了。

比如下面这段代码，从接口拿到的内容要保留格式，但又怕被注入脚本，该怎么处理才安全？

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

<script>
export default {
  data() {
    return {
      userContent: '<p>用户输入的<strong>内容</strong></p>'
    }
  }
}
</script>

我来解答赞 1 收藏

反馈

1 条解答

Zz福萍 Lv1

处理这个问题得先理解一下XSS攻击的原理，简单说就是注入恶意脚本到网页中。用v-html直接渲染用户输入的内容确实存在风险，不过我们可以采取一些措施来降低这种风险。

首先，最安全的做法当然是尽量避免使用v-html。如果非要用，得对输入的内容进行严格的过滤和转义。这里可以借助一些库，比如DOMPurify，它专门用来净化HTML，移除潜在的危险代码。

你可以这样使用DOMPurify：

1. 安装DOMPurify：

npm install dompurify

2. 在你的组件里引入并使用：

import DOMPurify from 'dompurify';



export default {

  data() {

    return {

      userContent: '<p>用户输入的<strong>内容</strong></p>'

    }

  },

  computed: {

    safeUserContent() {

      return DOMPurify.sanitize(this.userContent);

    }

  }

}

然后模板里用safeUserContent这个计算属性来代替userContent：

<template>

  <div>

    <div v-html="safeUserContent"></div>

  </div>

</template>

这样做可以有效防止XSS攻击，虽然DOMPurify不是万能的，但在大多数情况下都能起到很好的防护作用。记得定期检查和更新DOMPurify库，以应对新的威胁。

2026-03-24 10:14