对于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中数据的时候, 每次都须要转义, 这个比较繁琐.