Vue里用v-html渲染用户输入内容会有XSS风险吗？

设计师雨路提问于 2026-02-25 12:43:19 阅读 59

安全

我在做一个评论功能，后端返回的评论内容可能包含换行和简单格式，所以前端用 v-html 来渲染。但听说这样容易有 DOM-based XSS，到底该怎么处理？

比如下面这段代码，如果用户输入了 <script>alert(1)</script>，会不会直接执行？我已经试过用 DOMPurify 过滤，但不确定是不是必须的。

<template>
  <div v-for="comment in comments" :key="comment.id">
    <div v-html="comment.content"></div>
  </div>
</template>

我来解答赞 13 收藏

反馈

2 条解答

W″若兮 Lv1

肯定会执行XSS啊老铁！必须用DOMPurify过滤，给你改好的代码：

<template>

  <div v-for="comment in comments" :key="comment.id">

    <div v-html="$options.filters.sanitize(comment.content)"></div>

  </div>

</template>



// 在main.js里加全局过滤器

Vue.filter('sanitize', function (html) {

  return DOMPurify.sanitize(html)

})

或者更简单的直接引入sanitize-html包也行。记住永远不要相信用户输入，凌晨三点修XSS漏洞的痛苦我不想你再经历一次。

2026-03-08 02:04

长孙硕阳 Lv1

会执行，v-html 就是原样插入 HTML，用户输就真会弹窗。
懒人方案：用 DOMPurify 过一遍再渲染，或者更懒点直接改用 {{ comment.content }} 加 CSS 换行支持（white-space: pre-wrap），反正别用 v-html 处理用户输入。

import DOMPurify from 'dompurify';



// 懒人用法：渲染前过滤

const safeContent = DOMPurify.sanitize(comment.content);

// 模板里还是用 v-html="safeContent"

2026-02-25 13:01