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

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

安全

我在做一个评论功能，后端返回的评论内容可能包含换行和简单格式，所以前端用 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>

我来解答赞 6 收藏

反馈

1 条解答

长孙硕阳 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