前端做XSS输入过滤到底该在哪儿处理？

Code°秀云提问于 2026-03-19 08:44:24 阅读 46

安全

我最近在用 Vue 写一个评论功能，用户输入的内容会直接渲染到页面上。我知道要防 XSS，但不确定是在输入时就过滤掉危险字符，还是在渲染时转义？试过在提交前用正则替换 script 标签，但好像还是能绕过……

比如下面这段代码，我把用户输入直接绑定到 v-html 里，虽然加了简单过滤，但总觉得不安全：

<template>
  <div v-html="sanitizeInput(userComment)"></div>
</template>

<script>
export default {
  methods: {
    sanitizeInput(str) {
      return str.replace(/<scriptb[^<]*(?:(?!</script>)<[^<]*)*</script>/gi, '');
    }
  }
}
</script>

这样写真的能防住 XSS 吗？还是说应该完全避免用 v-html？

我来解答赞 8 收藏

反馈

1 条解答

设计师梓童 Lv1

你的正则过滤分分钟能被绕过，v-html渲染用户输入本身就是找死。

正确做法：放弃v-html，用正常插值{{ }}渲染内容，Vue默认会转义。如果必须用v-html，上DOMPurify这个库：

import DOMPurify from 'dompurify'



// 渲染时

别自己写过滤逻辑，正则防XSS就没靠谱过。

2026-03-19 09:00