Vue中渲染HTML字符串的挑战
在开发web应用时，我们经常会遇到需要显示包含html标签的动态字符串的场景。例如，从后端获取的富文本内容、用户输入的带格式文本，或者像本例中混合了纯文本和html标签的字符串数组：
const msgs = [ 'hello there', '<b>print this in bold</b>', '<br/>', 'and this is in another line' ];
直接使用Vue的{{ }}（Mustache语法）进行数据绑定时，Vue会自动对HTML内容进行转义，以防止跨站脚本（XSS）攻击。这意味着，像<b>print this in bold</b>这样的字符串会被渲染成字面量<b>print this in bold</b>，而不是加粗的文本。
为了解决这个问题，开发者可能会尝试使用JavaScript的DOMParser来解析HTML字符串。然而，DOMParser.parseFromString()方法返回的是一个HTMLDocument对象，而不是可直接在DOM中渲染的HTML元素或字符串。因此，如果尝试直接将HTMLDocument对象绑定到Vue模板，页面上会显示[object HTMLDocument]，而不是预期的格式化内容。这正是本例中用户遇到的困境。
使用v-html指令渲染HTML
Vue提供了一个专门的指令v-html来解决在模板中渲染原始HTML字符串的需求。v-html指令将绑定的字符串内容作为普通HTML插入到元素的innerHTML中。
基本用法
立即学习“前端免费学习笔记（深入）”；
使用v-html非常简单，只需将其绑定到包含HTML内容的字符串变量上即可：
<template>
<div id="app">
<div v-for="(msg, index) in msgs" :key="index">
<div v-html="msg"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msgs: [
'hello there',
'<b>print this in bold</b>',
'<br/>',
'and this is in another line'
]
};
}
};
</script>在这个示例中：
- v-for遍历msgs数组。
- 对于数组中的每个字符串msg，v-html="msg"会将其内容作为HTML插入到<div>元素中。
- 纯文本字符串如'hello there'会被正常显示。
- 包含HTML标签的字符串如'<b>print this in bold</b>'会被解析并渲染为加粗文本。
- <br/>标签会被正确解析为换行。
v-html与{{ }}的区别
理解v-html与{{ }}之间的根本区别至关重要：
- {{ }} (Mustache语法)：用于显示纯文本数据。它会自动对HTML实体进行转义，以防止浏览器将数据解析为实际的HTML标签。这是Vue默认且最安全的文本绑定方式。
- v-html指令：用于渲染原始HTML内容。它不会对HTML实体进行转义，而是直接将其作为HTML插入到DOM中。这意味着你可以渲染富文本，但也带来了潜在的安全风险。
核心安全考量：防范XSS攻击
尽管v-html指令提供了方便的HTML渲染能力，但它也伴随着一个严重的安全风险：跨站脚本（XSS）攻击。
XSS攻击的原理
当使用v-html渲染来自不可信来源（如用户输入、第三方API）的HTML字符串时，如果这些字符串中包含恶意的<script>标签或其他可执行代码，浏览器会将其作为页面的一部分执行。攻击者可以利用这一点窃取用户数据（如Cookie）、篡改页面内容、重定向用户或执行其他恶意操作。
例如，如果一个恶意用户输入了以下内容：
<img src="x" onerror="alert('你被攻击了！'); document.cookie = 'stolen'" />如果直接使用v-html渲染，当<img>标签加载失败时，onerror事件会触发，执行其中的JavaScript代码，从而窃取用户的Cookie信息。
解决方案：HTML内容净化（Sanitization）
为了安全地使用v-html，你必须对所有来自不可信来源的HTML内容进行净化（Sanitization）。净化是指移除或转义HTML字符串中所有潜在的恶意或不安全的标签和属性，只保留安全的、可显示的HTML。
推荐使用成熟的第三方库来进行HTML净化，例如DOMPurify。DOMPurify是一个经过严格测试和广泛使用的库，能够有效防止XSS攻击。
在Vue组件中使用DOMPurify进行净化
-
安装DOMPurify：
npm install dompurify # 或 yarn add dompurify
-
在组件中使用：
<template> <div id="app"> <div v-for="(msg, index) in sanitizedMsgs" :key="index"> <div v-html="msg"></div> </div> </div> </template> <script> import DOMPurify from 'dompurify'; export default { data() { return { // 模拟来自不可信来源的混合内容 rawMsgs: [ 'hello there', '<b>print this in bold</b>', '<br/>', 'and this is in another line', '<script>alert("恶意脚本！");</script>', // 恶意脚本 '<img src="x" onerror="alert(\'XSS攻击！\')">' // 另一个恶意脚本 ] }; }, computed: { sanitizedMsgs() { return this.rawMsgs.map(msg => DOMPurify.sanitize(msg)); } } }; </script>在这个示例中：
- 我们创建了一个rawMsgs数组，其中包含了一些恶意内容。
- 通过一个计算属性sanitizedMsgs，我们遍历rawMsgs数组，并使用DOMPurify.sanitize()方法对每个字符串进行净化。
- DOMPurify.sanitize()会移除所有不安全的HTML标签和属性，只留下安全的HTML。例如，<script>标签会被完全移除，onerror属性也会被清除。
- 最终，v-html绑定的是经过净化的安全内容。
总结与最佳实践
- 何时使用v-html：仅当你确定需要渲染原始HTML内容，并且该内容已从可信来源获取或已进行严格净化时才使用v-html。
- 始终净化不可信内容：对于任何来自用户输入、第三方API或其他不可信来源的HTML字符串，在将其绑定到v-html之前，务必使用像DOMPurify这样的库进行净化。这是防止XSS攻击的关键防御措施。
- 避免过度使用v-html：如果仅需显示纯文本，或只需应用简单的样式（如加粗、斜体），优先使用Vue的{{ }}插值或绑定CSS类/样式，而不是v-html。这不仅更安全，也通常更高效。
- 理解其工作原理：v-html直接操作元素的innerHTML，这意味着它不会编译Vue模板。因此，在v-html内部的Vue组件或指令将不会被解析和激活。
通过遵循这些指南，你可以在Vue.js应用中安全有效地处理和渲染动态HTML内容，同时保护用户免受潜在的安全威胁。
