解决Vue-markdown编辑器加入xss之后，code标签里的代码块会被转义的问题

最新推荐文章于 2025-06-24 20:26:20 发布

原创最新推荐文章于 2025-06-24 20:26:20 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何处理Vue-markdown编辑器在添加XSS防护后，code标签内的代码块被转义的问题。通过使用mavonEditor的底层markdown-it API将字符串转换为HTML片段，并结合js-xss进行过滤，最终用v-html渲染，确保用户输入与展示内容一致，同时兼顾安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mavonEditor

一、简单的介绍一下关于vue-markdown的使用

安装

 npm install mavon-editor --save

引入（在main.js中全局引入）

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);

使用

 <mavon-editor  v-model="value" ></mavon-editor>

二、问题：考虑到了安全性问题使用了js-xss做过滤，导致code标签里的标签会被解析

预期效果：code标签的代码块不能被解析，用户输入的内容与展示的内容一一对应，前提条件也需要考虑到安全性问题

解决思路：
1.渲染时用mavon-editor 底层 markdown-it 的 api 将字符串转换为 html 片段
2.用拿到的 html 片段用 js-xss 做过滤，然后用 v-html 渲染
3.具体实现的代码如下：
加入xss过滤（main.js）

import filterXSS from 'xss'
filterXSS.whiteList['input'] = ['type', 'src', 'disabled', 'checked', 'class']
filterXSS.whiteList['img'] = ['src', 'alt', 'title', 'width', 'max-width', 'style', 'height']
filterXSS.whiteList['math'] = []
filterXSS.whiteList['semantics'] = []
filterXSS.whiteList['mrow'] = []
filterXSS.whiteList['mtext'] = []
filterXSS.whiteList['annotation'] = ['encoding']
filterXSS.whiteList['msub'] = []
filterXSS.whiteList['mi'] = []
filterXSS.whiteList['mo'] = []
filterXSS.whiteList['mn'] = []
filterXSS.whiteList['li'] = ['class']
filterXSS.whiteList['span'] = ['class', 'title', 'aria-hidden', 'style']
filterXSS.whiteList['code'] = []
filterXSS.whiteList['li'] = ['class', 'id']
filterXSS.whiteList['td'] = ['style', 'class']
filterXSS.whiteList['p'] = ['style', 'class']
filterXSS.whiteList['div'] = ['style', 'class']
filterXSS.whiteList['a'] = ['style', 'class', 'id', 'target', 'href', 'title']
filterXSS.stripIgnoreTag = true
Vue.prototype.filterXSS = filterXSS;

展示的内容

<template>
    <div class="preview-wrapper" v-html="showData"></div>
</template>
<script>
    import mavonEditor from 'mavon-editor';
    export default {
        props: {
            previewInfo: {
                type: String,
                default: ''
            }
        },
        data () {
            return {
                showData: ''
            }
        },
        mounted () {
            this.initMrakdownContent()
        },
        methods: {
            initMrakdownContent () {
                const data = mavonEditor.markdownIt.render(this.previewInfo)
                this.showData = filterXSS(data)
            }
        }
    }
</script>

previewInfo为用户编辑的内容