原文網址：http://blog.wabow.com/archives/1502
原文標題：jQuery FCKEditor + HTML Purifier
----------------------------------------------------------------------------------------------
原文轉載如下：

今天要介紹的是 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

<!-- head -->
<script src="jquery.js" type="text/javascript"></script>
<script src="fck.js" type="text/javascript"></script>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- body -->
<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 的設定

1
2
3
4
5
6
7
8
9
10

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

樣式如圖:
fck1

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

fck2

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

1
2
3
4
5
6
7
8
9
10
11
12
13

@ Line 37-40
<!-- 註解掉
<option value="anchor" fckLang="DlgLnkTypeAnchor">Anchor in this page</option>
<option value="email" fckLang="DlgLnkTypeEMail">E-Mail</option>
-->
 
@ Line 51-56
<!-- 註解掉
<option value="https://">https://</option>
<option value="ftp://">ftp://</option>
<option value="news://">news://</option>
<option value="" fckLang="DlgLnkProtoOther"><other></option>
-->

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

 
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 4.01 Strict
    * HTML 4.01 Transitional
    * XHTML 1.0 Strict
    * XHTML 1.0 Transitional
    * XHTML 1.1
-->
// 選擇允許的 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 會補
  • 輸入 <img src=""> 會變成 <img src="" alt="" />
  • form, input, script 自動消失 (除非設定 allow)
  • <p onclick="alert();">x</p> 會過濾成 <p>x</p>

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

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

arrow
arrow
    全站熱搜

    yoonow 發表在 痞客邦 留言(3) 人氣()

    E-mail轉寄