輸入和輸出
輸入和輸出應該說是很多網站的基本功能。用戶輸入數據，網站輸出數據供其他人浏覽。
拿目前流行的Blog為例，這裡的輸入輸出就是作者編輯文章後生成博客文章頁面供他人閱讀。
這裡有一個問題，即用戶輸入通常是不受控制的，它可能包含不正確的格式亦或者含有有安全隱患的代碼；而最終網站輸出的內容卻必須是正確的HTML代碼。這就需要對用戶輸入的內容進行糾錯和過濾。
永遠不要相信用戶的輸入
你可能會說：現在到處都是所見即所得的編輯器(WYSIWYG)，FCKeditor、TinyMCE...你可能會舉出一大堆。是的，它們都可以自動生成標准的XHTML代碼，但是作為web開發人員，你肯定聽過"永遠不要相信用戶遞交的數據"。
因此對用戶輸入數據進行糾錯和過濾是必需的。
需要更好的糾錯和過濾
目前為止我還沒見過有讓我滿意的相關實現，能接觸到的通常都是效率低下、效果不太理想，有這樣那樣的明顯缺陷。舉個比較知名的例子：WordPress是一種使用非常廣泛的blog系統，操作簡單功能強大且有豐富的插件支持，但是它集成的TinyMCE和後台一堆有些自作聰明的糾錯過濾代碼卻令人相當頭痛，對半角字符的強制替換，過於保守的替換規則等等.....導致像貼一段代碼讓它正確顯示這種需求都很難做到。
這裡順便抱怨一下，這個blog是用WordPress架的，為了讓這幾篇文章能正確顯示代碼，網上搜了很多也試用了一些插件，最終還是翻了它的代碼把一些過濾規則注釋掉才勉強可以顯示得體面一點 -.-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官方的相關手冊。
糾錯和過濾的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的長度。這樣由上面1、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;
}
...
Ok,先寫這麼多，相關的資料在文中都有鏈接。
下次想到再補充。
