小程序富文本解析

目前项目中的富文本来自于后台的编辑器,导致富文本比较粗糙,什么内容都有。直接使用wxparse进行解析会失败。我们目前的方案是先让富文本通过js-xss过滤工具进行过滤。然后在进行解析。

Js-xss使用方法:

  1. 下载整个js-xss项目
  2. 安装browserify
    npm install -g browserify
  3. 在js-xss目录下,使用browserify重新打包
    browserify  lib/index.js > dist/xss.js  -s  xss
  4. 如果提示不能找到cssfilter文件,则需要通过下面命令获取这个文件

$ npm install cssfilter --save

  1. 先引入文件

const xss = require('../../../lib/js-xss/dist/xss.js');

//富文本解析

let that = this;
let article = _data.content;

let options = { // 自定义规则
  whiteList: {  // 白名单为空,表示过滤所有标签
    html: [],
    body: [],
    div: ['style'],
    p: ['style'],
    img: ['src'],
    strong: ['style']
  },        
  stripIgnoreTag: true,      // 过滤所有非白名单标签的HTML
  allowCommentTag: false, //去掉HTML备注
  stripIgnoreTagBody: ['script', 'style'] // script标签较特殊,需要过滤标签中间的内容
};
let myxss = new xss.FilterXSS(options);
// 以后直接调用 myxss.process() 来处理即可
article = myxss.process(article);

这时得到的article就是过滤之后的富文本内容了。
https://segmentfault.com/a/11...

小程序富文本解析

xss

相关推荐