icindy / wxParse

wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析
http://weappdev.com/
MIT License
7.75k stars 1.82k forks source link

提一个建议,关于使用wxParse前的HTML标准化处理 #80

Open lpreterite opened 7 years ago

lpreterite commented 7 years ago

我目前这个小项目富文本编辑后的内容可说乱七八糟啥都有,然后用上了过滤工具js-xss就很好解决此类问题了。所以建议在官方文档上提及一下,对于一些了解不深的同学能一定程度上提高开发效率。

使用算是蛮简单的:

var xss = require('xss');
var whiteList = Object.assign(xss.whiteList, {
    /**在这添加你的标签白名单**/
    div: ['style', 'css', 'title']
});
xss(html, whiteList);

===[补充]========================================

关于使用js-xss引用出错的问题。

这里由于dist目录下的xss.js文件并不是UMD包裹所以导致引用出错,这里得把整个js-xss项目下载下来并使用browerify重新打包。

browerify lib/index.js > dist/xss.js -s xss

生成的xss.js就可以使用了。

icindy commented 7 years ago

非常感谢你的支持

很好的建议 你也可以pr一下 谢谢

FantasyWind2016 commented 6 years ago

@lpreterite 请问xss这个过滤工具你有在小程序里使用吗?我直接把xss.js文件放进小程序工程,module导入不进去

lpreterite commented 6 years ago

@FantasyWind2016 放到lib目录下再加载进去的

const xss = require('../lib/js-xss/xss')
const WxParse = require('../../lib/wxParse/wxParse.js')

//把style及class添加到白名单。
Object.keys(xss.whiteList).forEach(name => xss.whiteList[name] = xss.whiteList[name].concat(['style', 'class']))
let content = xss('<div>HTML文本</div>', Object.assign(xss.whiteList, {
  /**在这添加你的标签白名单**/
  //div: ['style', 'css', 'title']
}))

WxParse.wxParse('wxml', 'html', content, this, 15)
FantasyWind2016 commented 6 years ago

@lpreterite 请问“const xss = require('../lib/js-xss/xss')”你这一句是引用的js-xss源码dist目录下的xss.js文件吗?我引用之后没有导入成功,xss是未定义

vikingsailor commented 6 years ago

const xss = require('../../libs/xss.js')//https://raw.githubusercontent.com/leizongmin/js-xss/master/dist/xss.js

    var source = "<strong>hello</strong><script>alert</script>";
    var whiteList= {
      a: ["h2", "title", "target"]
    }
    xss(source, whiteList);

显示xss is not a function;如何解决?

lpreterite commented 6 years ago

统一回复,js-xss需要下载源项目再打包,这样引入的包就不会报错了。

恩,这里由于dist目录下的xss.js文件并不是UMD包裹所以导致引用出错,这里得把整个js-xss项目下载下来并使用browerify重新打包。

  browerify lib/index.js > dist/xss.js -s xss

微信小程序小总结#解析html问题

@FantasyWind2016 @vikingsailor