对于web网站, 客户端全局考虑用户UGC的处理

对于UGC这块儿一直想要总结出一套比较舒服的做法, 可是随着需求的不断改变,之前觉得行得通的做法现在感觉也变得越来越复杂,啰嗦. 若现在如果需要实现新浪微博, QQ空间说说等一些做的比较好的网站来看. 我来谈谈对于这一整套流程的做法, 这里包括WEB, IOS,Android来考虑. 结合自己的网站来随便说说:

         用户输入一段文本, 网站需要有的功能:

1.       @用户, 在浏览时候, @用户需要加上链接, 并且以 @用户 形式展示;

2.       IOS用户, 输入法软件输入的emoji表情, 也能够正常显示. 这里我是用的替换,既在存入数据库的时候, 就将替换成[神马]->

3.       用户在贴一个URL地址的时候, 如果http://www.google.com.hk 纯文本的时候, 页面也能够点击 http://www.google.com.hk

4.       大多数情况下, 原则是用户输入什么, 显示什么?

例如: <a href=”http://www.google.com.hk”> http://www.google.com.hk</a>,  最后用户展示的时候, 还是应该以原文本的形式展示出来, 而不是 http://www.google.com.hk , 但是如果你输入[神马]这种特殊的还是会显示图出来;

         大概的功能就是这些, 所以我需要将input->DB->output这个流程, 每一步干什么,总结一下:

1.       用户在提交数据的时候, 在action中我们对于emoji表情做替换, 替换成[XXX], 过滤掉网站中不允许的标签(看情况而定), 就这样子存入到数据库中, 这里不需要将特殊标签做转义. 例如: “<” -> “&lt;”. 这样子的好处就是存储了用户比较原始的数据.

2.       从浏览页面上来看, 最终的代码应该都是未转义的, 因为emoji要在WEB显示, 其实还是显示一个图片<img>, 也就是说<img>标签需要执行. 但是如果我们输入<a href=”http://www.google.com.hk”> http://www.google.com.hk</a> 还是要显示纯文本,  所以,就会遇到一个问题, 同一段文本中, 一部分代码是希望它能执行的, 一部分是不执行的.  那就是先将标签转义掉例如: “<” -> “&lt;”, 再替换emoji标签, <img>让其执行.

3.       @用户, 在存储的时候还是存纯文本, 只是在查询的时候, 在服务端代码里面根据一定的规则(我用正则)为其添加上<a>标签. 贴链接跟@用户做法类似;

4.       如果是这样子, 在JS中就会存在一定的问题, 就是当你从action中拿数据的时候, 因为是从DB直接读取, 而DB的数据是未转义的, 在JS中如果直接拿到数据append到一个DOM节点的时候, 他是会执行的. 这会造成JS注入安全问题. 所以就要JS调用者明确知道, 在调用之前需要转义.

 

这就是我对于处理用户UGC的处理方法, 不知道是否走了弯路. 特别是JS取action中数据的时候, 每次都需要转义, 这个比较繁琐.  

转载于:https://my.oschina.net/vernon/blog/203695