javascript - 对富文本编辑器提交的结果过滤

Question

一般的富文本编辑器比如百度的ueditor，编辑后直接返回一段html代码，为了防止xss,想问问大家如何过滤后入库是比较好的解决方案？（前台读取后直接显示html，比如这个问题本身就是用富文本编辑器提交的）

目前知道可以用：

• 富文本编辑器设置纯文本粘贴（这个可能会造成用户使用不方便，但sf的编辑器好像就是这么做的，超链接倒是保留了）
• 一些类库比如 Kses PHP HTML 过滤类设置要保留的标签和标签属性

大家有什么好的高效的做法吗？

Answer 1

纯文本展贴是用来减少无效html代码数量的，在防范XSS方面没有任何作用。客户端的任何JS代码在攻击者面前都是裸的

如果只需要常见的富文本编辑，不需要直接改动html代码，那么可以考虑UBB code
如果必须直接支持html，可以找wordpress／drupal等开源项目的xss过滤器来用

Answer 2

对@帕奇式 的“拿起就用”方案不敢苟同。
如果目的是防XSS，在前端防是防不住的，一定需要在服务端过滤。
例如曾经人人网的日志编辑框使用的是tinymce，前端带了过滤功能（转义大法），于是他们竟然在服务端就没过滤！前端只要把JS禁了，让tinymce加载失败，露出裸的textarea来，就可以随便注入JS代码了。

所以防这个，不管前端防了多严，服务端一定都要再做一次。

Answer 3

狠一点，就把 "<" 和 ">" 转义掉。
稍微宽松一点，就把script、iframe等标签去掉。

Answer 4

这个问题的解决办法很简单
有多重方式一种是base64编码解码是一种

基本上就是转义，保持了原样输出，
过滤这块需要这样操作，增加一个方法preg_match url的 凡是不是本站的都替换掉

Answer 5

看了看百度的ueditor，只能说很多东西设计得不够自由和弹性。用关键字【过滤规则】也找不到在哪设置，所以还是建议不要用ueditor因为还不够成熟！

那建议你可以：

• KindEditor拿起就用
• wysihtml5自定义样式，因为这是个内核

基于wysihtml5制作富文本编辑器可以参考这里bootstrap-wysihtml5。

以上两个富文本编辑器都有过滤机制，你可以阅读文档了解一下便知道。