现在几乎所有的网站开发都必须面对一个问题，用户怎么输入带格式的文本呢？最基本的功能包括链接、图片、文字加粗、字体大小颜色等。不同的网站有不同的考虑，有不同的实现。实现得越简单，给用户的门槛就越高。我就尝试从简到繁列一下一些常见的实现方式。
1. textarea里写HTML代码
适用于非常简单的文本，如链接、图片。
当然了，大部分这样的网站都不会要求你换行都用”<br />”来实现的，文本显示的时候，换行符会被自动转换成HTML的换行。有的网站还会给一些辅助，比如豆瓣的日记编辑器上方有几个按钮，可以帮助生成链接等HTML代码。WordPress的quick tag editor也是这样。
对于开发者来说，几乎没有工作量，只需一个html textarea元素即可解决问题。
然而对于用户的要求就比较高了，他们要想插入链接、图片就必须学一些简单的HTML语法。不过用户及时一点HTML都不懂也没关系，他仍然可以发布内容，只是没有链接、图片而已。像Flickr这样流行的服务，有无数的人为它开发帮助用户输入的浏览器扩展、Greasemonkey脚本等，更降低了输入HTML代码的难度。
2. textarea里写自定义语法
例子：Wikipedia，Google Code，大部分论坛
比较常见的语法有wiki markup，Markdown，以及各种论坛系统常用的BBCode等等。当然了，wiki markup语法的目的不仅仅是为了方便用户输入带格式的文本，它还方便了页面之间的互相链接，但是这里也把它归在这一类。在文本要在浏览器中显示的时候，系统将它翻译成HTML.
用户不需要学习HTML了，但这些语法也需要学习，虽然看起来稍微简单点。和第一种方式一样，许多网站也提供辅助按钮。自定义语法的最大优点在于其安全性，稍后讨论。
Flickr的评论里实际上除了支持一些基本的HTML代码，其实也有自定义输入链接的方式。
3. WYSIWYG编辑器
用户门槛很低，可以实现的效果很复杂。
这是国内最常见的方式。国内网站大部分认为用户非常低端，而实际上的确如此。就拿已经够直观的FCKeditor来说，有些用户还是弄不明白插入图片时的一大堆属性都是什么东西，这是可以理解的，你自己使用以下就知道了。所以即使拿来现成的可视化编辑器，你还得好好简化简化。比如插入图片，就输入一个图片地址就够了。不过还真有用户连图片地址是什么都不知道的，那……实在不行就让他上传吧。
使用这些编辑器的缺点是客户端需要启用JavaScript才可以正常使用。另外前两个编辑器非常庞大笨重，二位的目标是打败微软的Word产品，所以我们要考虑好用牛刀来杀鸡是不是合适。
安全性考虑
SQL注入的话题这里就不讨论了。
允许用户提交HTML代码，就带来了潜在的危险。一方面是网站数据的安全，另一方面是页面显示的安全。前几天feelinglucky就披露了yupoo的一个漏洞，尽管这不是由于输入带格式文本造成的，但这是允许HTML代码提交的常见漏洞，危害到网站数据的安全。
如果对用户提交的数据不加处理，还可能会造成显示错乱，比如数据中大量没有关门的标签。如果用户想恶作剧，还可以增加一个元素让它占据整个网页，隐藏所有内容。
千万不要试图仅仅在客户端过滤代码，这就好像敌人要来进攻，你去人家门口堵着一样，敌人很容易绕过这道防线，从后门出来就可以了。服务器端的过滤是绝对必要的。
自定义语法大都不使用尖括号，这给安全性带来了帮助。在服务器端，所有的尖括号均转换成HTML entity表示，然后做语法翻译，这是最简单的方式。
上述一、三方式都是提交HTML代码，服务器端就必须至少过滤JavaScript代码，不能让它在客户端执行。另外还要分析代码的标签是否完整，某些标签是否允许，等等。
Leave a Reply