跳到主要內容區塊

ntuccepaper2019

技術論壇

使用者是人類還是電腦?簡易的驗證碼程式
  • 卷期:v0039
  • 出版日期:2016-12-20

作者:陳俊傑 / 臺灣大學計算機及資訊網路中心教學研究組幹事


根據《蘋果日報》於2013年9月12日所刊出「中國程式秒殺台鐵50萬票」的報導,分析網路黃牛的犯罪手法,指出嫌犯是利用所買來的電腦程式在8秒內訂走50萬張車票,而台鐵亦表示會將驗證碼由四碼改為四至六位數浮動碼,以增加程式辯識的困難度,防止有人利用程式大量訂票[1]。或許成效有限,但仍能提供一定的防護能力,因此,本文將介紹如何撰寫簡易的驗證碼程式,讓使用者也能自主學習如何提升網站的安全性。

 

簡介

何謂「驗證碼」?根據維基百科的說明,它是用來區分使用者是電腦或人的驗證程式,由電腦會自動產生問題,然後再讓使用者回答,但必須只有人類才能解答,所以能夠解答的使用者就可以被認為是人類[2]。
因此,本文所撰寫的簡易驗證碼程式,其功能設計如下:
1. 驗證碼的長度必須是浮動而非固定,如6~8字元。
2. 主要由大寫英文、小寫英文、數字所組合,文字或數字可以重複,但每種組合至少須含有2個字元,如AAbb00。
3. 具有干擾光學字元識別(OCR)辨識出圖片文字或數字的能力。
4. 驗證碼的有效時間為60秒。
5. 只要圖片重新載入,驗證碼即須重新產生。
6. 僅接受POST傳遞的資料,且圖片路徑不能有任何提示和改變。

 

驗證碼流程架構

 


圖一 驗證碼流程及模組功能圖

 

作業環境

1. 作業系統:Windows 7 Service Pack 1
2. 網頁伺服器:IIS 7.5
3. 網頁語法:C#、VB.Net
4. 開發工具:Visual Studio 2010 Professional

 

編輯Views / Shared版面配置頁(C#、VB.Net)

1. 新增「_LayoutCaptcha」檔案,如圖二、圖三:

 


圖二 C#版本

 


圖三 VB版本

 

2. head標籤內容,如圖四:

 


圖四 

 

3. body標籤內容,如圖五:

 


圖五 

 

補充:使用Url.Action語法的效果,如圖六:

 


圖六 從Chrome的檢視原始碼

 

編輯Models模組(C#、VB.Net)

1. 新增CaptchaHelper(Class類別)檔案,如圖七、圖八:

 


圖七 C#版本

 


圖八 VB.Net版本

 

2. 匯入指定的命令空間和類型,讓程式可直接參考,如圖九、圖十:

 


圖九 C#版本

 


圖十 VB.Net版本

 

補充:因本範例需要「判斷字串是否為日期格式」,僅C#版本需要自行建立判斷功能,其內容如圖十一:

 


圖十一 

 

3. 建立「判斷驗證結果」功能,如圖十二、圖十三:

 


圖十二 C#版本

 


圖十三 VB版本

 

4. 建立「產生驗證碼小幫手」功能,將原始碼各分二個部分解說,如圖十四~圖十七:

 


圖十四 C#版本(第一部分)

 


圖十五 C#版本(第二部分)

 


圖十六 VB.Net版本(第一部分)

 


圖十七 VB.Net版本(第二部分)

 

5. 建立「將驗證碼轉成圖片小幫手」功能,將原始碼各分三個部分解說,如圖十八~圖二十三:

 


圖十八 C#版本(第一部分)

 


圖十九 C#版本(第二部分)

 


圖二十 C#版本(第三部分)

 


圖二十一 VB.Net版本(第一部分)

 


圖二十二 VB.Net版本(第二部分)

 


圖二十三 VB.Net版本(第三部分)

 

編輯Controller控制器(C#、VB.Net)

1. 新增Captcha(Controller控制器)檔案,如圖二十四、圖二十五:

 


圖二十四 C#版本

 


圖二十五 VB.Net版本

 

2. 編輯Captcha(Controller控制器)檔案內容,如圖二十六、圖二十七:

 


圖二十六 C#版本

 


圖二十七 VB.Net版本

 

補充:僅C#版本需要自行設定匯入Models模組所設定的空間命名及其類型,其內容如圖二十八:

 


圖二十八 C#版本

 

編輯Views / Captcha檢視頁面(C#、VB.Net)

1. 新增Index(首頁)及Result(驗證結果)的檢視,如圖二十九、圖三十:

 


圖二十九 C#版本

 


圖三十 VB.Net版本

 

2. 加入Index(首頁)檢視時的設定,如圖三十一、圖三十二:

 


圖三十一 C#版本

 


圖三十二 VB.Net版本

 

3. 編輯Index(首頁)檢視的內容,如圖三十三、圖三十四:

 


圖三十三 C#版本

 


圖三十四 VB.Net版本

 

4. 加入Result(驗證結果頁)檢視時的設定,如圖三十五、圖三十六:

 


圖三十五 C#版本

 


圖三十六 VB.Net版本

 

5. 編輯Result(驗證結果頁)檢視的內容,如圖三十七、圖三十八:

 


圖三十七 C#版本

 


圖三十八 VB.Net版本

 

預覽結果

1. 在Chrome瀏覽器上的預覽,如圖三十九、圖四十:

 


圖三十九 C#版本

 


圖四十 VB.Net版本

 

測試是否具有干擾OCR功能

1. 產生未加入干擾OCR功能的圖片(圖四十一),及加入干擾OCR功能的圖片(如圖四十二):

 


圖四十一 「未加入」干擾OCR功能

 


圖四十二 「加入」干擾OCR功能

 

2. 以「Copyfish Fresh OCR Software」套件作測試[3],其比較結果如圖四十三、圖四十四:

 


圖四十三 「未加入」干擾OCR功能

 


圖四十四 「加入」干擾OCR功能

 

3. 以「Google Drive」作測試[4],其比較結果如圖四十五~圖四十七:

 


圖四十五 

 


圖四十六 「未加入」干擾OCR功能

 


圖四十七 「加入」干擾OCR功能

 

結論

經實驗確認,本範例確能干擾OCR功能,而無法正確取得圖片中的文字,但仍僅適合作為提高網站被破解的困難度,或是作為學習撰寫驗證碼程式入門參考,建議勿作為唯一的網站保護工具。
因此,根據《PanSci泛科學》的文章,雖然驗證碼的發展已有一定時間,但實際上亦發現許多破解的方法。像是Google就所研發的圖像識別演算法,就能辨認網站的驗證碼,而且準確率高達96%,並表示若只靠驗證碼來保護網站是不夠的[5]。

 

參考資料

[1] 林志青、李姿慧(2013年09月12日)。中國程式 秒殺台鐵50萬票。蘋果日報。線上檢索日期:2016年11月02日。網址:
http://www.appledaily.com.tw/appledaily/article/headline/20130912/35289113/中國程式秒殺台鐵50萬票
[2] 驗證碼。維基百科。檢上檢索日期:2016年11月02日。網址:
https://zh.wikipedia.org/wiki/%E9%AA%8C%E8%AF%81%E7%A0%81
[3] esor huang(異塵行者)(2015年10月22日)。 Copyfish 驚奇 Chrome 套件複製圖片影片內中文字!電腦玩物。檢上檢索日期:2016年11月07日。網址:
http://www.playpcesor.com/2015/10/copyfish-chrome.html
[4] esor huang(異塵行者)(2015年05月08日)。 Google Drive 超工作術:16招雲端硬碟變最強辦公桌。電腦玩物。檢上檢索日期:2016年11月07日。網址:
http://www.playpcesor.com/2015/05/google-drive-16.html
[5] afore(2015年07月10日)。要證明自己是人類很不容易 ── Google意外破解驗證碼檢核機制。PanSci泛科學。線上檢索日期:2016年11月07日。網址:
http://pansci.asia/archives/81040