輸入和輸出
輸入和輸出應該說是很多網(wǎng)站的基本功能。用戶輸入數(shù)據(jù)，網(wǎng)站輸出數(shù)據(jù)供其他人瀏覽。

拿目前流行的Blog為例，這里的輸入輸出就是作者編輯文章后生成博客文章頁面供他人閱讀。
這里有一個問題，即用戶輸入通常是不受控制的，它可能包含不正確的格式亦或者含有有安全隱患的代碼；而最終網(wǎng)站輸出的內(nèi)容卻必須是正確的HTML代碼。這就需要對用戶輸入的內(nèi)容進行糾錯和過濾。

永遠不要相信用戶的輸入
你可能會說：現(xiàn)在到處都是所見即所得的編輯器(WYSIWYG)，F(xiàn)CKeditor、TinyMCE...你可能會舉出一大堆。是的，它們都可以自動生成標準的XHTML代碼，但是作為web開發(fā)人員，你肯定聽過"永遠不要相信用戶遞交的數(shù)據(jù)"。

因此對用戶輸入數(shù)據(jù)進行糾錯和過濾是必需的。

需要更好的糾錯和過濾
目前為止我還沒見過有讓我滿意的相關(guān)實現(xiàn)，能接觸到的通常都是效率低下、效果不太理想，有這樣那樣的明顯缺陷。舉個比較知名的例子：WordPress是一種使用非常廣泛的blog系統(tǒng)，操作簡單功能強大且有豐富的插件支持，但是它集成的TinyMCE和后臺一堆有些自作聰明的糾錯過濾代碼卻令人相當頭痛，對半角字符的強制替換，過于保守的替換規(guī)則等等.....導致像貼一段代碼讓它正確顯示這種需求都很難做到。

這里順便抱怨一下，這個blog是用WordPress架的，為了讓這幾篇文章能正確顯示代碼，網(wǎng)上搜了很多也試用了一些插件，最終還是翻了它的代碼把一些過濾規(guī)則注釋掉才勉強可以顯示得體面一點?-.-b?

當然，我不想過多的指責它(wordpress)，只是想說明它還可以做的更好。

Tidy是什么，它如何工作？
摘自Tidy?ManPage的說明這樣描述:

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官方的相關(guān)手冊。

糾錯和過濾的PHP+Tidy實現(xiàn)
上面說了這么多背景素材，似乎太羅唆了，具體的解決問題的代碼才最最直接。

1.?簡單的糾錯實現(xiàn)

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;
}
上面的代碼就是對可能不規(guī)范的XHTML代碼進行清理糾錯，輸出標準的XHTML代碼（輸入輸出都是UTF-8編碼）。實現(xiàn)代碼不是最精簡的，因為為了配合下面的過濾功能，我寫的盡可能細致了一些。

2.?高級實現(xiàn):?糾錯+過濾

功能：?

XHTML的糾錯，輸出標準的XHTML代碼。?
過濾不安全的代碼但是不影響內(nèi)容展示，只是對style/javascript中不安全代碼進行清除。?
對超長字符串插入標記以實現(xiàn)瀏覽器兼容的自動換行功能，相關(guān)文章可參考網(wǎng)頁中超長文字的斷行問題。?
function?HtmlFixSafe($html)
{

??if(!function_exists('tidy_repair_string'))
????return?$html;
??//use?tidy?to?repair?html?code

??//?tidy?的參數(shù)設(shè)定
??$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節(jié)點
??$body?=?@tidy_get_body($str);

??//函數(shù)?_dumpnode，檢查每個節(jié)點，過濾后輸出
??function?_dumpnode($node,&$s){

???//查看節(jié)點名，如果是<script> 和<style>就直接清除 <BR> switch($node->name){ <BR> case 'script': <BR> case 'style': <BR> return; <BR> break; <BR> default: <BR> } <br><br> if($node->type == TIDY_NODETYPE_TEXT){ <BR> /* <BR> 如果該節(jié)點內(nèi)是文字，做額外的處理： <BR> 過長文字的自動換行問題; <BR> 超鏈接的自動識別(未實現(xiàn)) <BR> */ <BR> // insert <wbr> <BR> $s .= HtmlInsertWbrs($node->value,30,'','&?/\'); <br><br> // auto links ??? *** TODO *** <BR> return; <BR> } <br><br> //不是文字節(jié)點，那么處理標簽和它的屬性 <BR> $s .= '<'.$node->name; <br><br> //檢查每個屬性 <BR> if($node->attribute){ <BR> foreach($node->attribute as $name=>$value){ <br><br> /* <BR> 清理一些DOM事件，通常是on開頭的， <BR> 比如onclick onmouseover等.... <BR> 或者屬性值有javascript:字樣的， <BR> 比如href="javascript:"的也被清除. <BR> */ <BR> if(strpos($name,'on') === 0 <br><br> stripos(trim($value),'javascript:') ===0 <BR> ){ <BR> continue; <BR> } <br><br> //保留安全的屬性 <BR> $s .= ' '.$name.'="'.HtmlEscape($value).'"'; <br><br> } <BR> } <br><br> //遞歸檢查該節(jié)點下的子節(jié)點 <BR> if($node->child){ <br><br> $s .= '>'; <br><br> foreach($node->child as $child){ <BR> _dumpnode($child,$s); <BR> } <br><br> //子節(jié)點處理完畢，閉合標簽 <BR> $s .= '</'.$node->name.'>'; <BR> }else{ <br><br> /* <BR> 已經(jīng)沒有子節(jié)點了，將標簽閉合 <BR> (事實上也可以考慮直接刪除掉空的節(jié)點) <BR> */ <BR> if($node->type == TIDY_NODETYPE_START) <BR> $s .= '></'.$node->name.'>'; <BR> else <BR> /* <BR> 對非配對標簽，比如<hr/> <br/> <img / alt="PHP+Tidy－完美的XHTML糾錯+過濾" >等 <BR> 直接以 />閉合之 <BR> */ <BR> $s .= '/>'; <BR> } <BR> } <BR> //函數(shù)定義end <br><br> //通過上面的函數(shù) 對 body節(jié)點開始過濾。 <BR> if($body->child){ <br><br> foreach($body->child as $child) <BR> _dumpnode($child,$s); <BR> }else <BR> return ''; <br><br> return $s; <BR>} <BR>上面代碼中注釋應該比較詳細，工作原理就配合代碼看吧。 <BR>更嚴格的過濾也很容易擴展，比如實現(xiàn)文中的鏈接自動識別。 <br><br><BR>一點補充 <br><br>如果你看過我之前寫的網(wǎng)頁中超長文字的斷行問題，你可能發(fā)現(xiàn)上面代碼中處理自動換行的函數(shù)有所不同： <br><br>之前介紹的是HtmlEscapeInsertWbrs()，而上面使用的是HtmlInsertWbrs()。 <br><br>這里要做一下解釋： <BR>HtmlEscapeInsertWbrs()要求輸入的字符串未作特殊字符轉(zhuǎn)義的，也就是沒有經(jīng)過htmlspecialchars()對<>&等作<>&處理的。因為函數(shù)內(nèi)部有專門的處理。 <BR>而在處理經(jīng)Tidy處理過后的文字節(jié)點的時候，因為Tidy的關(guān)系，已經(jīng)自動把<>&等字符作相應的<>&轉(zhuǎn)義，因此需要用一個專門的函數(shù)避免重復的轉(zhuǎn)義，這個函數(shù)就是HtmlInsertWbrs()，從名字上就知道它只插入<wbr>標記，不做額外工作。 <br><br>那么你可能有個問題： <BR>如果<wbr>被插入到HTML標簽中間，比如在<div>或者>的中間插入了<wbr>，變成<d<wbr>iv>和&<wbr>gt;，那就會影響到原始信息的展示。 <br><br>沒錯，的確是個新問題，不過使用一些技巧就可以有效解決： <br><br>因為我們處理的是Tidy得到的文字節(jié)點，意味著不可能碰到HTML標簽，因此不會碰到在標簽中間插入<wbr>的情況。 <BR>對于第二種情況，轉(zhuǎn)義后的字符都是&xxxxx;這樣的形式，那么只要在1所有&符號前面都插入<wbr>標記就可以了（注意看調(diào)用時的第四個參數(shù)），因為下一個<wbr>標記將會插在30(以上面代碼中實際調(diào)用的第二個參數(shù)為例)個字符之后，這個已經(jīng)2遠遠大于xxxxx的長度。這樣由上面1、2兩點可以保證不會插到轉(zhuǎn)義字符的中間。 <BR>下面給出HtmlInsertWbrs()的PHP實現(xiàn)： <br><br>function HtmlInsertWbrs($str, $n=10, <BR> $chars_to_break_after='',$chars_to_break_before='') <BR>{ <BR> $out = ''; <BR> $strpos = 0; <BR> $spc = 0; <BR> $len = mb_strlen($str,'UTF-8'); <BR> for ($i = 1; $i < $len; ++$i) { <BR> $prev_char = mb_substr($str,$i-1,1,'UTF-8'); <BR> $next_char = mb_substr($str,$i,1,'UTF-8'); <BR> if (_u_IsSpace($next_char)) { <BR> $spc = $i; <BR> } else { <BR> if ($i - $spc == $n <br><br> mb_strpos( $chars_to_break_after, <BR> $prev_char,0,'UTF-8' ) <BR> !== FALSE <br><br> mb_strpos( $chars_to_break_before, <BR> $next_char,0,'UTF-8') <BR> !== FALSE <BR> ) { <BR> $out .= mb_substr($str,$strpos, <BR> $i-$strpos,'UTF-8') <BR> . '<wbr>'; <BR> $strpos = $i; <BR> $spc = $i; <BR> } <BR> } <BR> } <BR> $out .= mb_substr($str,$strpos,$len-$strpos,'UTF-8'); <BR> return $out; <BR>} <BR>... <BR>Ok,先寫這么多，相關(guān)的資料在文中都有鏈接。 <BR>下次想到再補充。 <BR> </script>