输入和输出javascript
输入和输出应该说是不少网站的基本功能。用户输入数据,网站输出数据供其余人浏览。php
拿目前流行的Blog为例,这里的输入输出就是做者编辑文章后生成博客文章页面供他人阅读。
这里有一个问题,即用户输入一般是不受控制的,它可能包含不正确的格式亦或者含有有安全隐患的代码;而最终网站输出的内容却必须是正确的HTML代码。这就须要对用户输入的内容进行纠错和过滤。html
永远不要相信用户的输入java
你可能会说:如今处处都是所见即所得的编辑器(WYSIWYG),FCKeditor、TinyMCE...你可能会举出一大堆。是的,它们均可以自动生成标准的XHTML代码,可是做为web开发人员,你确定听过"永远不要相信用户递交的数据"。node
所以对用户输入数据进行纠错和过滤是必需的。web
须要更好的纠错和过滤浏览器
目前为止我还没见过有让我满意的相关实现,能接触到的一般都是效率低下、效果不太理想,有这样那样的明显缺陷。举个比较知名的例子:WordPress是一种使用很是普遍的blog系统,操做简单功能强大且有丰富的插件支持,可是它集成的TinyMCE和后台一堆有些自做聪明的纠错过滤代码却使人至关头痛,对半角字符的强制替换,过于保守的替换规则等等.....致使像贴一段代码让它正确显示这种需求都很难作到。安全
这里顺便抱怨一下,这个blog是用WordPress架的,为了让这几篇文章能正确显示代码,网上搜了不少也试用了一些插件,最终仍是翻了它的代码把一些过滤规则注释掉才勉强能够显示得体面一点 -.-b编辑器
固然,我不想过多的指责它(wordpress),只是想说明它还能够作的更好。wordpress
Tidy是什么,它如何工做?
Tidy reads HTML, XHTML and XML files and writes cleaned up markup. For HTML variants, it detects and corrects many common coding errors and strives to produce visually equivalent markup that is both W3C compliant and works on most browsers. A common use of Tidy is to convert plain HTML to XHTML. For generic XML files, Tidy is limited to correcting basic well-formedness errors and pretty printing.
简单说Tidy是清理HTML代码的,生成干净的符合W3C标准的HTML代码,支持HTML,XHTML,XML。Tidy提供一个库TidyLib,以方便在其余应用中利用Tidy的强大功能。很是幸运,PHP有相应的tidy模块可使用。
老兄,为何又是PHP?
呃,这个问题... 惭愧,由于我只会那么点PHP而已 -.-v
不过还好,我这里讲的都不是纯粹的代码,好歹也有些分析的过程,分享这些东西比贴代码有用多了。
PHP中使用Tidy
要在PHP中使用Tidy须要安装Tidy模块,也就是加载tidy.so这个PHP extension,具体过程就略了,纯粹是体力活。最后能在phpinfo()中看到"Tidy support enabled" 就OK。
在这个模块的支持下,PHP中就可使用Tidy提供的几乎全部的功能。经常使用的HTML清理是异常轻松的事情,甚至能够生成文档的解析树,像在客户端操做DOM那样的操做HTML的各个Node。下面将会有具体的代码说明,也能够看看PHP官方的相关手册。
纠错和过滤的PHP+Tidy实现
上面说了这么多背景素材,彷佛太罗唆了,具体的解决问题的代码才最最直接。
1. 简单的纠错实现
function HtmlFix($html)
{if(!function_exists('tidy_repair_string'))
return $html;
//use tidy to repair html code//repair
$str = tidy_repair_string($html,
array('output-xhtml'=>true),
'utf8');
//parse
$str = tidy_parse_string($str,
array('output-xhtml'=>true),
'utf8');
$s = '';$nodes = @tidy_get_body($str)->child;
if(!is_array($nodes)){
$returnVal = 0;
return $s;
}foreach($nodes as $n){
$s .= $n->value;
}
return $s;
}
上面的代码就是对可能不规范的XHTML代码进行清理纠错,输出标准的XHTML代码(输入输出都是UTF-8编码)。实现代码不是最精简的,由于为了配合下面的过滤功能,我写的尽量细致了一些。
2. 高级实现: 纠错+过滤
功能:
XHTML的纠错,输出标准的XHTML代码。
过滤不安全的代码可是不影响内容展现,只是对style/javascript中不安全代码进行清除。
对超长字符串插入<wbr>标记以实现浏览器兼容的自动换行功能,相关文章可参考网页中超长文字的断行问题。
function HtmlFixSafe($html)
{if(!function_exists('tidy_repair_string'))
return $html;
//use tidy to repair html code// tidy 的参数设定
$conf = array(
'output-xhtml'=>true
,'drop-empty-paras'=>FALSE
,'join-classes'=>TRUE
,'show-body-only'=>TRUE
);//repair
$str = tidy_repair_string($html,$conf,'utf8');
//生成解析树
$str = tidy_parse_string($str,$conf,'utf8');$s ='';
//获得body节点
$body = @tidy_get_body($str);//函数 _dumpnode,检查每一个节点,过滤后输出
function _dumpnode($node,&$s){//查看节点名,若是是<script> 和<style>就直接清除
switch($node->name){
case 'script':
case 'style':
return;
break;
default:
}if($node->type == TIDY_NODETYPE_TEXT){
/*
若是该节点内是文字,作额外的处理:
过长文字的自动换行问题;
超连接的自动识别(未实现)
*/
// insert <wbr>
$s .= HtmlInsertWbrs($node->value,30,'','&?/\');// auto links ??? *** TODO ***
return;
}//不是文字节点,那么处理标签和它的属性
$s .= '<'.$node->name;//检查每一个属性
if($node->attribute){
foreach($node->attribute as $name=>$value){/*
清理一些DOM事件,一般是on开头的,
好比onclick onmouseover等....
或者属性值有javascript:字样的,
好比href="javascript:"的也被清除.
*/
if(strpos($name,'on') === 0
||
stripos(trim($value),'javascript:') ===0
){
continue;
}//保留安全的属性
$s .= ' '.$name.'="'.HtmlEscape($value).'"';}
}//递归检查该节点下的子节点
if($node->child){$s .= '>';
foreach($node->child as $child){
_dumpnode($child,$s);
}//子节点处理完毕,闭合标签
$s .= '</'.$node->name.'>';
}else{/*
已经没有子节点了,将标签闭合
(事实上也能够考虑直接删除掉空的节点)
*/
if($node->type == TIDY_NODETYPE_START)
$s .= '></'.$node->name.'>';
else
/*
对非配对标签,好比<hr/> <br/> <img/>等
直接以 />闭合之
*/
$s .= '/>';
}
}
//函数定义end//经过上面的函数 对 body节点开始过滤。
if($body->child){foreach($body->child as $child)
_dumpnode($child,$s);
}else
return '';return $s;
}
上面代码中注释应该比较详细,工做原理就配合代码看吧。
更严格的过滤也很容易扩展,好比实现文中的连接自动识别。
一点补充网页中超长文字的断行问题,你可能发现上面代码中处理自动换行的函数有所不一样:
若是你看过我以前写的
以前介绍的是HtmlEscapeInsertWbrs(),而上面使用的是HtmlInsertWbrs()。
这里要作一下解释:
HtmlEscapeInsertWbrs()要求输入的字符串未做特殊字符转义的,也就是没有通过htmlspecialchars()对<>&等做<>&处理的。由于函数内部有专门的处理。
而在处理经Tidy处理事后的文字节点的时候,由于Tidy的关系,已经自动把<>&等字符做相应 的<>&转义,所以须要用一个专门的函数避免重复的转义,这个函数就是HtmlInsertWbrs(), 从名字上就知道它只插入<wbr>标记,不作额外工做。
那么你可能有个问题:
若是<wbr>被插入到HTML标签中间,好比在<div>或者>的中间插入了<wbr>,变成<d<wbr>iv>和&<wbr>gt;,那就会影响到原始信息的展现。
没错,的确是个新问题,不过使用一些技巧就能够有效解决:
由于咱们处理的是Tidy获得的文字节点,意味着不可能碰到HTML标签,所以不会碰到在标签中间插入<wbr>的状况。
对于第二种状况,转义后的字符都是&xxxxx;这样的形式,那么只要在1全部&符号前面都插入<wbr>标记就能够了(注意看调用时的第四个参数),由于下一个<wbr>标记将会插在30(以上面代码中实际调用的第二个参数为例)个字符以后,这个已经2远远大于xxxxx的长度。这样由上面一、2两点能够保证不会插到转义字符的中间。
下面给出HtmlInsertWbrs()的PHP实现:
function HtmlInsertWbrs($str, $n=10, $chars_to_break_after='',$chars_to_break_before='') { $out = ''; $strpos = 0; $spc = 0; $len = mb_strlen($str,'UTF-8'); for ($i = 1; $i < $len; ++$i) { $prev_char = mb_substr($str,$i-1,1,'UTF-8'); $next_char = mb_substr($str,$i,1,'UTF-8'); if (_u_IsSpace($next_char)) { $spc = $i; } else { if ($i - $spc == $n || mb_strpos( $chars_to_break_after, $prev_char,0,'UTF-8' ) !== FALSE || mb_strpos( $chars_to_break_before, $next_char,0,'UTF-8') !== FALSE ) { $out .= mb_substr($str,$strpos, $i-$strpos,'UTF-8') . '<wbr>'; $strpos = $i; $spc = $i; } } } $out .= mb_substr($str,$strpos,$len-$strpos,'UTF-8'); return $out; }