markdown-it-vue 插件 如何把 后端返回的 html 标签字符串 转换成html标签

• • 1. vue开发项目 markdown-it-vue 插件 如何把 后端返回的 html 标签字符串 转换成html标签
• • 1.1. 一、核心原理
• • 1.2. 二、基础实现步骤
• • 1.2.1. 安装依赖（若未安装）
• • 1.2.2. 组件中配置并使用
• • 1.3. 三、处理纯 HTML 字符串（无 Markdown）
• • 1.4. 四、关键注意事项（必看）
• • 1.4.1. XSS 安全风险（重中之重）
• • 1.4.2. HTML 样式冲突
• • 1.4.3. 特殊标签解析问题
• • 1.5. 五、常见问题排查
• • 1.6. 总结

1. vue开发项目 markdown-it-vue 插件 如何把 后端返回的 html 标签字符串 转换成html标签

在 Vue 项目中使用 markdown-it-vue 渲染后端返回的包含 HTML 标签的字符串，核心是开启 html 解析配置（默认禁用，防止 XSS），并确保 Vue 正确渲染解析后的 HTML。以下是分步实现方案：

1.1. 一、核心原理

markdown-it-vue 基于 markdown-it，而 markdown-it 默认会转义 HTML 标签（将 <div> 转为 <div>）。需通过配置 html: true 允许解析 HTML 标签，同时 markdown-it-vue 内部会将解析后的 HTML 字符串通过 v-html 渲染为真实 DOM。

1.2. 二、基础实现步骤

1.2.1. 安装依赖（若未安装）

npm install markdown-it-vue --save# 或 yarn add markdown-it-vue

1.2.2. 组件中配置并使用

关键配置：options.html = true（开启 HTML 解析）。

<template>  <!-- markdown-it-vue 组件接收 content 和 options -->  <markdown-it-vue     :content="htmlMdContent"     :options="mdOptions"   /></template><script>import MarkdownItVue from 'markdown-it-vue'import 'markdown-it-vue/dist/markdown-it-vue.css' // 引入默认样式export default {  components: { MarkdownItVue },  data() {    return {      // 后端返回的包含 HTML 标签的字符串（示例）      htmlMdContent: `# 标题<p style="color: red;">这是后端返回的 HTML 标签</p><div class="custom-div">自定义 div 内容</div>\`\`\`jsconsole.log('Markdown 代码块')\`\`\`      `,      // 核心配置：开启 HTML 解析      mdOptions: {        html: true, // 必须开启，否则 HTML 标签会被转义        breaks: true, // 可选：换行转 <br>        linkify: true, // 可选：自动识别链接        // 其他扩展配置（按需）        plugins: ['toc', 'emoji'], // 启用需要的插件        toc: { includeLevel: [1, 2] }      }    }  }}</script><style scoped>/* 自定义渲染后的 HTML 样式 */:deep(.custom-div) {  background: #f5f5f5;  padding: 8px;  margin: 10px 0;}</style>

1.3. 三、处理纯 HTML 字符串（无 Markdown）

如果后端返回的是纯 HTML 字符串（无 Markdown 语法），markdown-it-vue 依然可以处理（开启 html: true 后，会直接渲染 HTML）：

data() {return {// 纯 HTML 字符串（无 Markdown）htmlMdContent: `      <h2>纯 HTML 内容</h2>      <ul>        <li>列表项 1</li>        <li>列表项 2</li>      </ul>      <img src="https://example.com/img.jpg" alt="示例图片">    `,mdOptions: {html: true, // 核心：开启 HTML 解析typographer: false, // 纯 HTML 可关闭排版优化，提升性能plugins: [] // 纯 HTML 可禁用所有插件，减少解析耗时    }  }}

1.4. 四、关键注意事项（必看）

1.4.1. XSS 安全风险（重中之重）

开启 html: true 后，若后端返回的内容包含恶意 HTML/JS（如 <script>alert('XSS')</script>），会直接执行，导致安全漏洞。生产环境必须做 XSS 过滤：

• • 方案 1：后端过滤（推荐）：返回内容前过滤危险标签/属性（如 <script>、onclick、javascript: 等）。
• • 方案 2：前端过滤（兜底）：使用 xss 库过滤内容后再渲染：

  npm install xss --save

  import xss from'xss'data() {return {rawContent: '<script>alert("恶意代码")</script><p>安全内容</p>', // 后端返回的原始内容mdOptions: { html: true }  }},computed: {// 过滤后再传递给 markdown-it-vuehtmlMdContent() {returnxss(this.rawContent, {// 自定义白名单：仅允许安全标签/属性whiteList: {p: ['style', 'class'],div: ['class'],h1: [],h2: [],img: ['src', 'alt', 'title'],ul: [],li: []      },// 过滤 style 中的危险属性（如 background-image: url(javascript:)）cssFilter: true    })  }}

1.4.2. HTML 样式冲突

markdown-it-vue 的默认样式可能覆盖自定义 HTML 样式，需通过 :deep()（Vue3）/ ::v-deep（Vue2）穿透样式：

<style scoped>/* Vue3 穿透样式 */:deep(.custom-div) {  color: #333;  font-size: 16px;}/* Vue2 穿透样式 */::v-deep(.custom-div) {  color: #333;}</style>

1.4.3. 特殊标签解析问题

• • script 标签：即使开启 html: true，markdown-it 也会默认过滤 <script> 标签（安全机制），若需支持（不推荐），需自定义 markdown-it 规则。
• • iframe/video 等标签：需确保在 XSS 白名单中，且服务器配置了 CSP 策略。

1.5. 五、常见问题排查

1. 1. HTML 标签仍显示为文本？
• • 检查 mdOptions.html 是否设为 true（核心）。
• • 确认后端返回的字符串未被二次转义（如 <div> 需先转回 <div>）。
2. 2. 样式不生效？
• • 检查是否引入 markdown-it-vue.css。
• • 使用 :deep() 穿透 scoped 样式。
3. 3. 性能卡顿？
• • 禁用不需要的插件（plugins: []）。
• • 对超长内容做分片渲染，或使用 v-if 懒加载。

1.6. 总结

核心步骤：

1. 1. 配置 mdOptions.html = true 开启 HTML 解析；
2. 2. 生产环境必须通过 xss 库/后端过滤危险内容；
3. 3. 用 :deep() 处理样式穿透问题。

该方案既满足后端 HTML 字符串的渲染需求，又能最大程度保证安全性和样式兼容性。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。