輸入資料的，真的是人：Auto-Input Protection for ASP.NET

  • 發行項
Codeplex 軟體套件（Package）資訊
套件名稱 Auto-Input Protection for ASP.NET
作者 Dave Sexton
目前版本 1.0 RTW
2.0 Beta
URL http://aip.codeplex.com/
使用難易度
  • 低（純使用）
  • 中（撰寫自己的擴充功能）
使用此套件時可用的輔助工具 AIP for ASP.NET 的說明檔（chm 格式），可由 AIP 的網站下載到。
基礎知識
  • 知曉何謂 CAPTCHA。
  • 使用 HTTP Handler 輸出圖片。
  • 設定 Web.config。

論壇或部落格的大敵：機器人軟體

有自己在經營部落格或是論壇的讀者應該會有這樣的經驗，偶爾會有一些廣告或垃圾留言在自己的部落格或留言板中出現，或是自己的論壇中莫名奇妙的被註冊一堆會員，而且那些會員都是有規則性的、無意義的會員帳戶，這些基本上都是像廣告公司或其他組織所開發的機器人軟體（robot-ware）的傑作。這些機器人軟體在各處自動貼上一些指定的訊息（大多數是廣告），或是到處去註冊會員帳戶，在早期並沒有針對這些軟體有所防範，因此經常會聽到一些像「垃圾留言灌爆某某網站」或是「某網站內充斥著廣告文」之類的消息，所以只要是有經營網站的人，無不想在這些容易被機器人攻擊的地方，加上一些門檻來保護。

其實機器人軟體的原理是很簡單的，它們被內植具有一定規則的 POST 字串（例如很熱門的表單欄位名稱）以及其資料值，在某些特定的時間，對某些網站（內建名單）發送 HTTP POST，大多數的網站並不會特別針對 HTTP POST（以 ASP.NET 來說，就是 Request.Form 屬性）的每個欄位做檢查，因此如果系統沒有特別設計一些措施的話，就會被機器人所攻陷，也就是留下一些垃圾資料，或是廣告訊息之類的文字。

只是長久下來，這些機器人在網站或資料庫內留下了大量無意義的垃圾資料，大家想必應該知道 GIGO（Garbage-In, Garbage-Out）這個詞彙吧，無意義的資料多半都只是垃圾而已，網站經營者會使用相當多的手段來防堵這些機器人，例如輸入驗證碼（Validation Code）、註冊確認信（Confirmation Letter）、密碼復原問題（Password Recovery Questions）等等措施，無非只是想確定一件事：『輸入這些資料的，真的是一個活生生的人類』。而現在最常在網站上看到的一個技術，就是 CAPTCHA。

CAPTCHA 技術

CAPTCHA 全名是 Completely Automated Public Test to tell Computers and Humans Apart（全自動區分計算機和人類的測試），為一種可以確保輸入者是人類的技術，最早是在 2002 年由卡內基梅隆大學的 Luis von Ahn、Manuel Blum、Nicholas J.Hopper 以及 IBM 的 John Langford 所提出。它的基本原理是由系統自動產生一組識別碼（通常是 4-8 個字），由大小寫字母以及數字組成，並且以圖片方式輸出，如此可以避免自動偵測的機器人透過文字（HTML 是文字格式）來破解識別碼，以確保輸入驗證碼的是人類。

不過隨著電腦速度加快，以及 OCR（光學字元辨識技術）的演進，在瀏覽器或在機器人中掛上小型 OCR 的技術也不再是難題，而 OCR 可以由圖片中辨認出驗證碼的字元，再轉交給機器人程式來傳送，如此圖形辨識碼等於形同虛設。因此 CAPTCHA 技術會將字元做適當的變化，例如歪斜字體、顏色處理、線條堆積以及字元互疊等特別的處理方式，讓 OCR 辨認成功的機率降到最低（當然人也要看得懂），所以經常會看到這樣的字體：


圖：CAPTCHA　驗證碼示例（來源：維基百科）

 

NOTE

更多的驗證碼示例，可以參考這個網站：http://www.cs.sfu.ca/~mori/research/gimpy/ez/

 

這樣的驗證碼方式雖然更強，但是一般開發人員上沒有受過影像處理的訓練的話，很難將它程式化，尤其是又要做到各種變形的特效，對一般的開發人員來說難度更高，因此 CAPTCHA 的發展單位卡內基梅隆大學另外開發了一個 reCAPTCHA 服務，供許多的網站套用，以免去開發 CAPTCHA 系統的負擔，不過似乎實務上較少人使用它，其原因除了它不是內建在系統中的服務，同時為了要存取它，還要多加幾次的網路來回（round-trip），效益上似乎無法平衡。因此也有不少軟體開發商開發具 CAPTCHA 能力的元件，免費的當然也有，就是本文要介紹的 AIP for ASP.NET。

Auto-Input Protection for ASP.NET

AIP for ASP.NET 是由 Dave Sexton 所開發，具備 CAPTCHA 能力的 ASP.NET 元件，可以用在許多需要驗證輸入者為人類的表單中，它包含了一個 AutoInputProtectionControl 控制項，用來顯示以及取得輸入的驗證字串，在伺服端可以只要使用一個指令就得知輸入的字串是正確與否：

[C#]

protected void cmdValidate_Click(object sender, EventArgs e)
{
    if (this.AutoInputProtectionControl1.IsValid)
        Response.Write("驗證已過。");
    else
        Response.Write("驗證碼錯誤。");
}

這個控制項的畫面是：

雖然現在看到它的文字是英文，不過讀者不需要緊張，因為它是有屬性可以設定的，只要把文字改成中文即可：

變更文字以後再看一次，就可以看到中文的文字了：

使用方式

請先到 AIP for ASP.NET 的網站下載 2.0 Beta 的 MSI 安裝檔安裝後，可以在 %PROGRAM_FILES%\Dave Sexton\AIP\bin 中找到 DaveSexton.AutoInputProtection.dll 檔案，這個檔案包含了必要的控制項以及 HTTP Handler 等物件。

 

NOTE

本文使用 AIP for ASP.NET 2.0 Beta 來介紹，1.0 RTW 和 2.0 Beta 間有些許不同，可參考 AIP for ASP.NET 網站中的 Release Notes 的說明。

 

NOTE

AIP for ASP.NET 支援 Visual Studio 2008 以及 Visual Studio 2005，不過本文是使用 Visual Studio 2008 作主要開發環境。

 

首先，開啟 Visual Studio 2008，並新增（或開啟）ASP.NET Web 應用程式專案，待 Default.aspx 設計模式載入完成後，到工具箱新增 AutoInputProtectionControl。方法是在工具箱上按右鍵，選擇『選擇項目』，並瀏覽到前述的安裝目錄，選擇 DaveSexton.AutoInputProtection.dll 檔案：

按『開啟舊檔』，就可以看到 AutoInputProtectionControl 元件被加入清單中：

再按『確定』，工具箱上即會出現此控制項：

先不要急著將控制項拖放到頁面中，請先打開這個專案的 Web.config 檔，並且在 <httpHandlers> 區段中加入下列指令：

[XML]

<add verb="GET" path="AIP.ashx" type="DaveSexton.Web.Controls.AutoInputProtectionRequestHandler, DaveSexton.AutoInputProtection"/>

如果執行的伺服器是 IIS 7.0 的話，還要到 <system.webServer> 區段的 <handlers> 中加入下列指令：

[XML]

<add name="AIPHandler" verb="GET" path="AIP.ashx" type="DaveSexton.Web.Controls.AutoInputProtectionRequestHandler, DaveSexton.AutoInputProtection"/>

現在就可以回到網頁的設計模式去盡情使用這個控制項了。

進一步設定 CAPTCHA：干擾因素（Filters）

AIP for ASP.NET 預設的驗證碼模式只有針對文字部份做特殊處理，如果要再進一步的處理它的背景色，或是要撰寫自己的文字產生規則的話，就需要針對 AIP for ASP.NET 這個元件做一些設定。例如在許多網站上常見的驗證碼，可能除了文字以外，還會在背景色上加上一些不同的顏色，或者是如同雜訊般的燥點（noise dot），這些都可以干擾 OCR，降低它的辨識成功率。

而這些能力在 AIP for ASP.NET 中稱為 Filter，它內建兩種 Filter：

類型 說明 圖示範例
TranslucentBarsOverlayAutoInputProtectionFilterProvider 在驗證碼圖片背景加上不同顏色與粗細的長條區塊。
CrosshatchAutoInputProtectionFilterProvider 在驗證碼圖片背景中加上雜訊或是不規則線條。

 

若要在驗證碼中套用 Filter，首先，請在 Web.config 中的 <configSection> 區段中，加入這個設定，以加入 AIP for ASP.NET 設定的支援：

[XML]

<section name="autoInputProtection"             type="DaveSexton.Web.Controls.Configuration.AutoInputProtectionSection, DaveSexton.AutoInputProtection" />

接著，在 <configSection> 區段的下方，加入 AIP for ASP.NET 的設定區段：

[XML]

<autoInputProtection>
  <filters>
    <add name="horizontal bars"         type="DaveSexton.Web.Controls.TranslucentBarsOverlayAutoInputProtectionFilterProvider, DaveSexton.AutoInputProtection"
         colors="Orange,Yellow,Fuchsia" />
    <add name="cross hatch"         type="DaveSexton.Web.Controls.CrossHatchAutoInputProtectionFilterProvider, DaveSexton.AutoInputProtection"
         colors="Red,Black" />
  </filters>
</autoInputProtection>

接著，重新建置專案並瀏覽有驗證碼控制項存在的網頁，可以看到如下的結果：

可以發現驗證碼被加上了背景色，包含長條區以及燥點等，若要設定使用不同的顏色，只要改變它的 colors 設定即可。

[XML]

<add name="horizontal bars" type="..." colors="Orange,Yellow,Fuchsia" />
<add name="cross hatch" type="..." colors="Red,Black" />

不論使用哪些顏色，在 AIP for ASP.NET 元件中，還是會隨機取用其他顏色，並且和目前已設定的顏色做混合，以產生色階不同的圖片背景。

 

NOTE

目前 AIP for ASP.NET 在顏色的設定上可以接受具名顏色（Known Colors）以及使用 CSS 的顏色格式（#RRGGBB），開發人員可以依照自己的喜好設定它。colors 屬性如果要套用多個顏色，請使用逗號來區隔。

 

進一步設定 CAPTCHA：提供者（Providers）

在前面的說明中，也許讀者有發現到，在 AIP 中的客制元件（custom component）是使用 Provider Pattern，因此只要開發人員想要自己發展自己的邏輯，只要開發自己的 Provider，再掛上系統中即可。在 AIP for ASP.NET 中，開發人員可以自訂三種 Provider，分別是文字（Text Provider）、圖像（Image Provider）以及干擾因素（Filter Provider）。

在預設的情況下，AIP for ASP.NET 使用的是預設的文字提供者以及預設的影像提供者：

[XML]

<autoInputProtection defaultTextProvider="random text" defaultImageProvider="resource">
  <textProviders>
    <add name="random text"
         type="DaveSexton.Web.Controls.RandomCharactersAutoInputProtectionTextProvider, DaveSexton.AutoInputProtection"
         colors="Red,Green,Blue,Brown" fonts="Times New Roman,Arial"
         minimumFontSize="20" maximumFontSize="35" />
  </textProviders>
  <imageProviders>
    <add name="resource"
         type="DaveSexton.Web.Controls.ResourceAutoInputProtectionImageProvider, DaveSexton.AutoInputProtection"
         minimumCharacterRotation="-15" maximumCharacterRotation="15" />
  </imageProviders>
</autoInputProtection>

以預設的文字提供者來說，它可以支援設定使用的文字字型、最小與最大的字元大小，以及可用顏色等，而影像提供者則是會使用預設的背景圖（可以在安裝目錄中的 Source\DaveSexton.AutoInputProtection\Images 目錄中找到背景圖）設定字元的旋轉幅度，由 -15 到 +15 之間，以產生文字的歪斜效果。

 

NOTE

據筆者的實驗，若 textProvider 和 imageProvider 同時使用時，imageProvider 會優先被套用，接著才是 textProvider。而且二個 Provider 只會套用一種，因此讀者可以在這二種類型中取其一即可。這兩種 Provider 所產生的圖片，都可以和 filter 混合。

 

若想要開發自己的 Provider，則請依下列方式繼承必要的基底類別：

  • 文字提供者，請由 AutoInputProtectionTextProvider 繼承。
  • 影像提供者，請由 AutoInputProtectionImageProvider 繼承。
  • 干擾因素提供者，請由 AutoInputProtectionFilterProvider 繼承。

結語

AIP for ASP.NET 不但可以幫助開發人員在自己的網站中產生具有一定強度的驗證碼，同時它也能夠由開發人員去自行開發自己的提供者以擴充它的功能，筆者覺得它已經是一個成熟的工具，因此引介給讀者，讓讀者能夠輕鬆使用它來加強自己的網站的輸入驗證，不再受到機器人的干擾。