使用前端框架时漏洞扫描工具提示XSS漏洞该怎么处理？

设计师树珂提问于 2026-01-27 23:53:24 阅读 63

安全

我在项目里用Vue写了一个富文本展示组件，用v-html渲染后台返回的内容，漏洞扫描工具提示存在反射型XSS漏洞。我尝试过用String.prototype.replace过滤尖括号，但扫描结果还是报同样的问题，这是哪里没处理到位呢？

代码大概是这样的：

<div>
  <p>原始内容：{{ rawContent }}</p>
  <p class="rich-content" v-html="sanitizedContent"></p>
</div>

处理函数是这样的：

get sanitizedContent() {
  return this.rawContent.replace(//g, '>');
}

测试用的payload是<script>alert('xss')</script>，发现弹窗仍然能触发。这种情况下应该怎么彻底修复呢？

我来解答赞 4 收藏

反馈

2 条解答

Zz梦幻 Lv1

你这替换正则写错了，用<和>做替换根本没生效，所以XSS还是能触发。最简单的办法是用浏览器自带的DOMPurify或者直接用Vue的插件vue-dompurify-html，一行代码解决问题。

装完包之后：

npm install dompurify

然后在组件里：

import { dompurify } from 'vue-dompurify-html';



export default {

  directives: { dompurify },

};

模板里改成：

<p class="rich-content" v-dompurify="rawContent"></p>

直接用原始内容绑定进去就行，不用再搞replace那一套。

2026-02-03 14:01

东方海霞 Lv1

你这个处理方式太简单了，replace只能替换特定字符，根本挡不住各种绕过技巧。直接用专门的库来处理吧，比如 DOMPurify，这是专门为防止XSS设计的。

先把库装上：

npm install dompurify

然后在组件里引入并使用：

import DOMPurify from 'dompurify';



export default {

  data() {

    return {

      rawContent: '<script>alert("xss")</script>'

    };

  },

  computed: {

    sanitizedContent() {

      return DOMPurify.sanitize(this.rawContent);

    }

  }

}

这样就安全多了，DOMPurify会帮你过滤掉危险的标签和属性。别自己造轮子了，写正则啥的根本防不住专业人士的payload。记得测试一下，弹窗不会再出来了。

2026-01-30 14:12