輸入和輸出
輸入和輸出應(yīng)該說是很多網(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ī)則等等.....導(dǎo)致像貼一段代碼讓它正確顯示這種需求都很難做到。

這里順便抱怨一下，這個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,以方便在其他應(yīng)用中利用Tidy的強大功能。非常幸運，PHP有相應(yīng)的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中不安全代碼進行清除。 
對超長字符串插入<wbr>標記以實現(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>就直接清除
    switch($node->name){
    case 'script':
    case 'style':
      return;
      break;
    default:
    }

    if($node->type == TIDY_NODETYPE_TEXT){
      /*
       如果該節(jié)點內(nèi)是文字，做額外的處理：
       過長文字的自動換行問題;
       超鏈接的自動識別(未實現(xiàn))
      */
      // insert <wbr>
      $s .= HtmlInsertWbrs($node->value,30,'','&?/\');

      // auto links ??? *** TODO ***
      return;
    }

   //不是文字節(jié)點，那么處理標簽和它的屬性
    $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).'"';

      }
    }

   //遞歸檢查該節(jié)點下的子節(jié)點
    if($node->child){

      $s .= '>';

      foreach($node->child as $child){
        _dumpnode($child,$s);
      }

      //子節(jié)點處理完畢，閉合標簽
      $s .= '</'.$node->name.'>';
    }else{

      /*
       已經(jīng)沒有子節(jié)點了，將標簽閉合
      (事實上也可以考慮直接刪除掉空的節(jié)點)
      */
      if($node->type == TIDY_NODETYPE_START)
        $s .= '></'.$node->name.'>';
      else
        /*
          對非配對標簽，比如<hr/> <br/> <img/>等
          直接以 />閉合之
          */
        $s .= '/>';
    }
  }
   //函數(shù)定義end

  //通過上面的函數(shù) 對 body節(jié)點開始過濾。
  if($body->child){

    foreach($body->child as $child)
      _dumpnode($child,$s);
  }else
    return '';

  return $s;
}
上面代碼中注釋應(yīng)該比較詳細，工作原理就配合代碼看吧。
更嚴格的過濾也很容易擴展，比如實現(xiàn)文中的鏈接自動識別。


一點補充

如果你看過我之前寫的網(wǎng)頁中超長文字的斷行問題，你可能發(fā)現(xiàn)上面代碼中處理自動換行的函數(shù)有所不同：

之前介紹的是HtmlEscapeInsertWbrs()，而上面使用的是HtmlInsertWbrs()。 

這里要做一下解釋：
HtmlEscapeInsertWbrs()要求輸入的字符串未作特殊字符轉(zhuǎn)義的，也就是沒有經(jīng)過htmlspecialchars()對<>&等作&lt;&gt;&amp;處理的。因為函數(shù)內(nèi)部有專門的處理。
而在處理經(jīng)Tidy處理過后的文字節(jié)點的時候，因為Tidy的關(guān)系，已經(jīng)自動把<>&等字符作相應(yīng)的&lt;&gt;&amp;轉(zhuǎn)義，因此需要用一個專門的函數(shù)避免重復(fù)的轉(zhuǎn)義，這個函數(shù)就是HtmlInsertWbrs()，從名字上就知道它只插入<wbr>標記，不做額外工作。

那么你可能有個問題：
如果<wbr>被插入到HTML標簽中間，比如在<div>或者&gt;的中間插入了<wbr>，變成<d<wbr>iv>和&<wbr>gt;，那就會影響到原始信息的展示。

沒錯，的確是個新問題，不過使用一些技巧就可以有效解決：

因為我們處理的是Tidy得到的文字節(jié)點，意味著不可能碰到HTML標簽，因此不會碰到在標簽中間插入<wbr>的情況。 
對于第二種情況，轉(zhuǎn)義后的字符都是&xxxxx;這樣的形式，那么只要在1所有&符號前面都插入<wbr>標記就可以了（注意看調(diào)用時的第四個參數(shù)），因為下一個<wbr>標記將會插在30(以上面代碼中實際調(diào)用的第二個參數(shù)為例)個字符之后，這個已經(jīng)2遠遠大于xxxxx的長度。這樣由上面1、2兩點可以保證不會插到轉(zhuǎn)義字符的中間。 
下面給出HtmlInsertWbrs()的PHP實現(xiàn)：

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,先寫這么多，相關(guān)的資料在文中都有鏈接。
下次想到再補充。