jQuery FCKEditor + HTML Purifier

suzy — Tue, 23 Jun 2009 10:47:49 +0000

今天要介紹的是 wysiwyg + filter = wysiwyfter(?)

得知客戶需要一套輕量型的所見即所得(wysiwyg)編輯器. 要求是可以快速地載入編輯器, 進行 HTML 編輯, 但也需要嚴格防止駭客輸入不當的程式碼.

因此我們挑選了 jQuery FCKEditor (註1) 以及 HTML Purifier.

HTML Purifier 是用來濾掉可疑的 XSS 程式碼, 且內容仍符合 W3C 的標準 (Standards Compliant).

註1: 曾試著裝 jWYSIWYG, 但發現許多小問題, 所以還是用回 FCKEditor

安裝與設定

1. 下載 jQuery FCKEditor 以及 HTML Purifier
2. 安裝 jQuery FCKEditor

1
2
3


<script src="jquery.js" type="text/javascript"></script>
<script src="fck.js" type="text/javascript"></script>


<form method="post">
    <textarea id="myEditor" name="content"></textarea>  
    <div>
    <input type="submit" value="送出" />
    <div>
</form>
 
<script>
$(function () {
    $('#myEditor').fck({
        path: 'http://localhost/test/fckeditor/', // fckeditor 資料夾的位置
        config: {
            ToolbarSet: 'MyToolbarSet', // 在 fckconfig.js 中自定 ToolbarSet
            EditorAreaCSS: 'layout.css' // css 設定檔
        },
        width:  650,
        height: 200
    });
});
</script>

3. 將下列設定新增在 /fckeditor/fckconfig.js 最下方(編輯器會顯示:粗體, 斜體, 底線, 連結, 及文字大小)

1
2
3

FCKConfig.ToolbarSets["MyToolbarSet"] = [
	['Bold','Italic','Underline','Link','Unlink','FontSize']
] ;

4. 其他 fckconfig.js 的設定

FCKConfig.DefaultFontSizeLabel = '小' ;
FCKConfig.DefaultLinkTarget = '_blank' ;
 
FCKConfig.FontSizes		= '12/小;15/中;18/大' ;
 
FCKConfig.LinkDlgHideTarget		= true ;
FCKConfig.LinkDlgHideAdvanced	= true ;
 
FCKConfig.LinkBrowser		= false ;
FCKConfig.LinkUpload		= false ;

樣式如圖:

5. 在連結的區域, 我們也不需要多餘的 "超連結類型" 跟 "通訊協定".

修改檔案: /fckeditor/editor/dialog/fck_link.html

@ Line 37-40

 
@ Line 51-56

到這裡 FCKEditor 的部份就算完成了.

如果有需要更動到文字敘述可以修改語言檔: /fckeditor/editor/lang/zh.js

6. 再來就是安裝 HTML Purifier. 解壓縮後找到一個叫 library 的資料夾, 把它 copy 出來, 我將它重新命名為 HTMLPurifier

 
require('HTMLPurifier/HTMLPurifier.auto.php');
 
// 最快的安裝方式:
$purifier = new HTMLPurifier();
$cleanContent = $purifier->purify($_POST['content']);
 
// -------------------------------------------------------------
// 如果要更改預設值, 可以照以下步驟設定:
$config = HTMLPurifier_Config::createDefault();
 
// 設定編碼, 預設是 UTF-8
$config->set('Core', 'Encoding', 'ISO-8859-1');
 
// 設定 Doctype, 預設是 XHTML Transitional
$config->set('HTML', 'Doctype', 'HTML 4.01 Transitional');

// 選擇允許的 HTML Tags, 除了 以下的 Tags[Attributes], 其他的一律都會被過濾掉
$config->set('HTML', 'Allowed', 'p,br,strong,em,u,span[style],a[href|target]');
$config->set('Attr', 'AllowedFrameTargets', '_blank, _self');
 
// 將 $config 帶入 object 
$purifier = new HTMLPurifier($config);
$cleanContent = $purifier->purify($_POST['content']);

到這裡就大功告成啦

使用報告

這裡有 HTMLPurifier 的 xssAttack List, 代表它已通過這些xss測試.

HTML Purifier 還有以下功能:

缺 closing tag 會補
輸入會變成
form, input, script 自動消失 (除非設定 allow)
x
會過濾成
x

其他的大家可以來這裡跟這裡試玩..

HTML Purifier 滿強大的, 應該可以再多加運用

哇寶部落格 » xss

jQuery FCKEditor + HTML Purifier

安裝與設定

使用報告