Vue基础教程（50）内置指令之v-html：Vue中的“危险诱惑”：深度解剖v-html这杯甜蜜的毒酒，附送安全饮用指南！-优快云博客

嘿，各位Vue萌新和老司机们！咱们今天不聊那些温文尔雅的v-bind、v-if，咱们来点刺激的，聊一聊Vue内置指令里的“摇滚明星”——v-html。它就像电影里的亦正亦邪的角色，用好了秒天秒地，用砸了直接剧终。

一、初识v-html：它到底是干啥的？

想象一下，你正在开发一个博客网站。普通的文本内容，比如文章标题、作者名，你用双花括号{{ }}，也就是Mustache语法，就能轻松搞定。

<template>
  <div>
    <h1>{{ articleTitle }}</h1>
    <p>作者：{{ authorName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleTitle: '我的第一篇Vue文章',
      authorName: '前端小王子'
    }
  }
}
</script>

这没问题，{{ }}会把里面的数据都当成纯文本来处理。就算authorName里面不小心包含了<strong>前端小王子</strong>，页面上显示的也依然是这串字符本身，而不是一个加粗的“前端小王子”。

但是！如果有一天，你的产品经理跑过来，眨着天真无邪的大眼睛说：“咱们要让用户发的评论支持加粗、变色、甚至插入表情包！” 这时候你怎么办？你后台返回的数据可能是一串这样的HTML代码："这条评论<strong>非常棒</strong>！<span style=\"color: red;\">点赞！</span>"。

如果你还用{{ }}，页面就会原封不动地显示这串代码，用户看到的是一堆乱七八糟的标签，体验极差。

此时此刻，就是v-html闪亮登场的时刻！

它的作用就一句话：将数据值作为原始的HTML代码插入并渲染到指定节点中。简单说，它就是Vue给你开的一个“后门”，允许你直接操作DOM的innerHTML。

用法也超级简单：

<template>
  <div>
    <!-- 普通文本渲染 -->
    <div>{{ htmlContent }}</div>
    <!-- 输出：<p>这是一段HTML</p> -->

    <!-- v-html 渲染 -->
    <div v-html="htmlContent"></div>
    <!-- 输出：这是一段HTML（并且是一个段落） -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>这是一段HTML</p>'
    }
  }
}
</script>

看，区别立现！v-html就像个魔法师，把字符串变成了真实的HTML结构。

二、为啥都说它“危险”？XSS攻击的温床

好了，感受到v-html的强大了吧？是不是有点小激动？别急，Vue官方文档在v-html的旁边，明晃晃地标着一个“⚠”警告符号，还加粗写着：“注意，动态渲染任意HTML非常危险，容易导致XSS攻击。”

这可不是开玩笑的。什么叫XSS？它的全称是“跨站脚本攻击”。通俗来讲，就是坏蛋想办法在你的网页上执行他们自己写的恶意JavaScript代码。

v-html为什么容易导致这个？因为它无条件地信任并执行你给它的字符串里的所有HTML标签，包括<script>标签！

我们来演一场“黑客”情景剧：

假设你做了一个论坛，用户评论的内容你用v-html渲染，心想：“哇，用户可以发彩色字体了，好酷！”

这时，一个叫“小黑”的用户不怀好意地发了一条评论，内容不是“楼主好人”，而是这样一段代码：

`<script>alert('你的网站被黑了！')</script><span>楼主好人</span>`

如果你的代码是这么写的：

<!-- 危险代码！请勿模仿！ -->
<div v-html="userComment"></div>

那么，当这条评论渲染时，不仅仅是“楼主好人”这几个字显示出来，那个<script>标签里的alert弹窗也会被执行！所有看到这条评论的用户，都会弹出一个恼人的窗口。

这还只是弹个窗，如果是更恶意的代码呢？比如窃取用户的登录Cookie，并发送到黑客的服务器上？或者伪造一个登录框，骗取其他用户的账号密码？后果不堪设想！

所以，v-html的危险性在于：它打破了Vue引以为傲的“数据驱动视图”的安全屏障。 Vue原本通过虚拟DOM和响应式系统，帮你安全地更新视图，但v-html让你直接回到了原始社会的“innerHTML”操作，把安全的责任完全交给了开发者自己。

三、安全第一！如何与v-html“安全共舞”？

知道了风险，难道我们就因噎废食，永远不用v-html了吗？当然不是！就像我们不能因为菜刀能伤人就不做饭了。关键是要学会安全地使用。

以下是几条保命法则：

绝对的信条：永远不要用v-html渲染用户输入的内容！
这是铁律！除非你有接下来要讲的“消毒”步骤。对于用户直接输入并提交的评论、昵称、签名等，坚决使用{{ }}进行文本渲染。
使用场景：仅限完全信任的后端数据
什么数据是可信的？比如：

- 你自己在代码里写死的HTML片段。
- 来自你完全掌控的后端系统（比如CMS内容管理系统）的富文本内容，并且这个后端也有严格的内容安全审核。

终极武器：使用第三方库进行HTML“消毒”
如果你的业务场景就是需要渲染用户提交的富文本（比如博客系统的文章正文），怎么办？这时候就需要一个“安全卫士”——HTML消毒库。
它的工作原理是：像过安检一样，扫描你的HTML字符串，只放行安全的标签和属性（如<p>, <span>, color），而把危险的标签和属性（如<script>, onclick）统统扔掉。

推荐神器：DOMPurify
这是业界最流行、最受信任的HTML消毒库。

使用方法：

- 安装：npm install dompurify
- 在Vue组件中使用：

<template>
  <div>
    <!-- 使用消毒后的内容 -->
    <div v-html="purifiedHtml"></div>
  </div>
</template>

<script>
import DOMPurify from 'dompurify'; // 引入DOMPurify

export default {
  data() {
    return {
      // 假设这是来自用户的不安全输入
      rawHtml: `<p>这是一段正常的文本</p><script>alert('恶意代码！')</script><img src="x" onerror="alert('XSS')">`
    };
  },
  computed: {
    // 使用计算属性进行实时消毒
    purifiedHtml() {
      return DOMPurify.sanitize(this.rawHtml);
    }
  }
};
</script>

经过DOMPurify处理后，最终的purifiedHtml只会剩下：<p>这是一段正常的文本</p><img src="x">。那个危险的<script>标签和onerror属性都被干净利落地干掉了！这样再使用v-html就安全多了。

四、完整实战示例：打造一个安全的博客评论区

光说不练假把式，我们来搞个完整的例子，模拟一个博客评论区。

功能需求：

用户可以输入评论（支持简单的富文本，如加粗、斜体）。
评论列表展示区，能正确渲染用户输入的富文本。
必须保证安全，防止XSS攻击。

实现思路：

使用textarea获取用户输入。
前端将纯文本转换为简单的HTML（例如，用**加粗**转换为<strong>加粗</strong>）。注意：更严谨的做法是后端处理，这里为了演示简化。
使用DOMPurify对转换后的HTML进行消毒。
使用v-html渲染消毒后的评论。

代码实现：

<template>
  <div class="blog-comment">
    <h3>发表评论</h3>
    <textarea v-model="rawComment" placeholder="支持**加粗**语法哦..." rows="4"></textarea>
    <button @click="submitComment">提交评论</button>

    <div class="preview" v-if="rawComment">
      <h4>预览：</h4>
      <!-- 预览也必须是安全的 -->
      <div v-html="previewHtml"></div>
    </div>

    <hr>

    <h3>评论列表</h3>
    <ul>
      <li v-for="(comment, index) in commentList" :key="index">
        <!-- 关键！渲染消毒后的内容 -->
        <div v-html="comment.safeHtml"></div>
      </li>
    </ul>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';

// 一个超级简单的Markdown转HTML函数（仅处理加粗）
function simpleMarkdownToHtml(text) {
  return text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
}

export default {
  name: 'BlogComment',
  data() {
    return {
      rawComment: '', // 用户原始输入
      commentList: [] // 存储评论的数组
    };
  },
  computed: {
    // 预览内容的计算属性，实时转换并消毒
    previewHtml() {
      const html = simpleMarkdownToHtml(this.rawComment);
      return DOMPurify.sanitize(html);
    }
  },
  methods: {
    submitComment() {
      if (!this.rawComment.trim()) return;

      // 1. 将纯文本转换为HTML
      const convertedHtml = simpleMarkdownToHtml(this.rawComment);
      // 2. 对转换后的HTML进行消毒！！！
      const safeHtml = DOMPurify.sanitize(convertedHtml);

      // 3. 将消毒后的评论存入列表
      this.commentList.unshift({
        id: Date.now(),
        safeHtml: safeHtml
      });

      // 4. 清空输入框
      this.rawComment = '';
    }
  }
};
</script>

<style scoped>
.blog-comment {
  max-width: 600px;
  margin: 0 auto;
}
textarea {
  width: 100%;
  margin-bottom: 10px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
</style>

这个示例的精华在于：