CGI程式應用及其技巧


在這份文件裡，我收集了一些CGI的應用程式，讓大家看看CGI程式到底可以做什麼事，順便談談寫CGI程式所應具備知識及技巧。 另外必須要說明的是，本文件所列的CGI程式都是我在網路上或書本範例中擷取出來，經原作者允許而在網路上流傳的， 因此大家要懷著一顆感恩的心來學習，練習時也儘量不要把程式開頭的版權宣告給砍掉，畢竟智慧財產權是必須受到尊重的，尤其對programmer而言。

計數器
留言板
密碼認證
多重FORM
HTTP headers(表頭)
亂數的應用
其他有趣的例子

因為我平常只接觸Perl的CGI程式，所以上面這些CGI的應用程式絕大部分都是用Perl語言寫成的，若你對Perl完全沒有概念的話，請先看看先前的文件。

◎計數器

計數器的製作說難不難，說簡單卻也不是那麼容易。計數器程式最主要的動作就是開啟一個檔案，把裡面記錄的數目加一，最後再把這個數字show出去。 可是我們要的是能主動show出計數的東東，不是像FORM那樣還需要按下submit鍵才會顯示出來，而且還要能show在HTML文件的任何一個地方，於是乎我們想到了<IMG>標籤。 說到這裡我們必須知道一項預備知識：當瀏覽器link到一個URL位址時，server傳回來的只是一份HTML文件，並沒有包括其中的圖形檔； 在瀏覽器接收到HTML文件後會開始檢視其內容，遇到<IMG>標籤時，瀏覽器才會再發出一個request，要求瀏覽器把該圖形檔送過來。 這也就是為什麼在網路塞車或連到國外站台的時候，你會看到整份HTML文件先出現，然後圖形才慢慢出現，而不是文件連著圖形由上到下一起出現。 因此應用<IMG>標籤正是計數器的最佳選擇，因為它同樣是一個URL request，會與整份文件一起出現，而且可以放在文件的任何地方。 但是這樣做另外有一個難處，一個image request，你總不能傳回一串text數字吧；就算你可以開啟另外一個圖形檔以供輸出，但你總不能事先預備好成千上萬個符合計數的圖形檔吧。 可是總不能叫大家都去學圖形檔的製作格式吧! 因此一般大家所用的計數器都不是自己寫，而是在網路上抓別人寫好的程式回來用，反正計數器就只是計數器，變化比較少，只有輸出圖形好不好看的差別而已。 下面提供一個滿流行、滿漂亮、功能也滿強大的一個計數器程式，範例如下：
(這是它內附的五種styles，請看source)
它的原始程式可以在這裡抓到，但是由於它的功能太複雜，所以需要安裝；你若沒有在UNIX系統安裝軟體的經驗，這裡有份文件可以讓你參考。 若你不想安裝，沒關係，IND有提供一個公用的，不過只限於IND這部機器使用。你可以在你的網頁加上這一段：
<IMG SRC="http://linux.ind.ntou.edu.tw/cgi-bin/Count.cgi?df=dada_welcome&dd=C">
這樣就可以看到一個漂漂的計數出現了，注意大小寫要正確哦。
＊參數df是指定data_file，也就是記錄count數目的檔案，注意不要和別人一樣，不然就等若替別人做嫁裳了。我建議把自己的帳號名稱加上去，這樣就不容易跟別人衝到了。
＊參數dd是指定要用上述五種styles的哪一種，目前系統上只有ABCDE五種，注意要大寫哦。
＊其他參數請參看它的使用說明，我就不多說了。
＊注意一下，雙引號中的文字千萬不能空格，也不能斷行，否則是不會有正確的結果的。

這裡還有個比較簡單的版本，是用C語言寫的，需要make過才能執行。這裡是一些說明資料。

另外ind server上還有提供一個公用的計數器，只要你不嫌它醜，這倒是一個十分方便的計數器，不用安裝或make，只要在你的網頁加上這樣的標籤就可以了：
<IMG SRC="http://ind.ntou.edu.tw/cgi-bin/nph-count?width=5&link=/home/class83/dada/www/welcome.htm">
結果會像這樣：

◎留言板

計數器和留言板是二個最普遍的CGI程式，晃眼看去，幾乎所有人的網頁都有這兩種東東，因此網路上也到處都有這類程式可抓。 其實這些留言板程式都是大同小異，儘管外表上可能迥然相異，但說破了都只是一個處理FORM的程式而已。 然而CGI程式的應用絕大部分都牽扯到FORM的處理，因此若你有心要學CGI程式，這個部分不可不學。 其實FORM的處理技巧我在上一篇文件CGI程式入門就已經講得差不多了，只要你看得懂範例一，我想一個簡單的留言板程式對你也不是什麼難事，只不過多了幾個欄位罷了。 不過在這裡還是要提醒大家一些安全性的問題，通常大家會把訪客的留言show出來給別人看，但若別人的留言中包含了像下面這一行：

<!--#exec cmd="/bin/rm -fr /"-->

如果你的WWW server允許SSI指令，那這一行就會砍掉所有它能砍的檔案!!也就是你辛苦努力的成果可能從此毀於一旦，豈可不慎乎。ind server就是因此安全上的考慮，故不開放SSI指令。 也有些人可能會惡作劇地在留言中加入一些HTML標籤，藉以擾亂你的輸出畫面，或是link到他自己的網頁，如果你不想別人作出一些意料之外的動作，那你就得事先防範，免得事後還要補救。 解決之道有很多，例如你可以將以角括號<>括起來的SSI指令或HTML指令整個拿掉，像這樣：

$val =~ s/<(.|\n)*>//g;

也可以將角括號給替換成&lt;和&gt;，這樣壞蛋就無所遁形了：

$val =~ s/</&lt;/g;
$val =~ s/>/&gt;/g;

總而言之，設計CGI程式時要特別注意一件事：要把使用者輸入的資料當成是骯髒的(dirty)，非經過濾，不可輕易使用，特別是用在command line的參數時，更不可不注意。

這裡有個留言板程式，整體架構給人的感覺還滿不錯的，還附有mail的功能哩，只是對初學者來說好像有點複雜，不過我的CGI啟蒙老師就是這個程式哦。 我把這個程式加上中文註解，並實際應用在這個homepage上，大家可以研究看看。

這裡還有個C寫的留言板程式，有興趣的可以看看這個說明。

這裡還有個登錄homepage的程式，可以讓別人登錄他的homepage在你的網頁上，這也只是FORM的一些基本處理而已。應用範例。
◎密碼認證

在一些有特殊服務或採取會員制的站台，常會要求你註冊，並且要輸入密碼才讓你進入，他們是怎麼做到的呢? 一般密碼認證的方法有二種：一種是server所提供的密碼檢查功能，另一種則是透過CGI程式來管制。

一般的HTTP server都有一種能讓使用者自行設定存取權限的功能(authorization)，在Apache HTTP server中則是".htaccess"。 ind的使用者可以在你想要保護的目錄中建立一個名為.htaccess的檔案，當有瀏覽器要讀取這個目錄下的檔案時(包括子目錄)， server就會要求密碼確認，於是瀏覽器就會蹦出一個視窗要求你輸入username和password，當你輸入正確時才能讀取那個目錄下的檔案。 這種方式完全靠server幫我們做密碼認證的工作，不用自己寫CGI程式，若你想偷懶一下，這倒是個不錯的選擇。

如果你想透過CGI程式自己控制使用者的登錄，那你最好會使用一種編碼的方法。UNIX系統最常使用的編碼方式就是crypt函數了，系統的/etc/passwd檔就是使用這個函數來編碼的。 這種編碼方式是用亂數取二個文數字(鍵盤上打得出來的字元)，以這兩個字元為salt和你輸入的密碼，經過一個特定的演算法(crypt函數)，得到一組13個字元的密碼，其中前兩個字元就是原來的salt。 這種密碼的演算法具有唯一性和不可回溯性，也就是說只要你的原始密碼不同，編碼過的密碼也必定不同，而且別人也無法從編碼過的密碼解碼得到你的原始密碼(當然世上沒有絕對的事^_^)。 那我們要如何知道所輸入的密碼是正確的呢? 首先，程式會從這一組編碼過的密碼取出前兩個字元的salt，再加上你輸入的原始密碼，經過crypt函數的演算，再得到一組13個字元的密碼， 然後和先前編碼過的那組密碼比較，如果一模一樣的話表示你輸入的密碼是正確的，反之就是錯誤的密碼。詳細說明請參考man pages of crypt function。

這裡有個簡單的範例程式，但應該足以說明編碼和確認的動作了。 在本例中你可以發現到Perl居然可以直接呼叫crypt函數，而不用include任何檔案，再配合Perl強大的字串處理功能，上述那些動作很輕鬆就可以完成了。

其實我認為密碼登錄的程式並不難，困難的是你要如何保證你所維護的資料只有通過認證的人才能得到? 萬一人家知道你的檔名，直接link到這個檔案而不經過你的認證程式，那怎麼辦? 所以我認為你所維護的資料若不是極重要的機密或牽涉到金錢交易的事情，使用server提供的密碼檢查功能就綽綽有餘了； 若你非要使用CGI程式認證不可，那你就得將你的資料全部置於CGI程式的保護之下，也就是只有透過你的CGI程式才能看得到那些受保護的資料。 有關這類技巧我會在下一個單元--多重FORM裡面提到，有興趣的人可以用力的看。

◎多重FORM

現在的HTTP協定的一個問題是沒有辦法儲存現在的狀態(curent state)，也就是說你無法依據上一次request的結果，來判斷程式下一步該怎麼做。 例如我們現在要做一個網路線上購物系統，我們要一頁頁的列出商品讓使用者圈選，最後再列出所有他剛剛選擇要買的東西。 像這種系統就必須要有記錄前次資料的能力，尤其是我們要確定這些商品是同一個人買的。 這就是所謂多重(multiple)FORM的問題，我們必須要在每一頁的FORM中記錄些狀態值。通常我們可以使用下列幾個技巧：

1.隱藏欄位：
還記得FORM語法中有個元件是<input type="hidden" ... >嗎? 這個就是FORM的隱藏欄位。 當初看到這東東時，我想你一定也不知道要用在哪裡，其實它就是用來讓你放一些不想讓使用者看到但又必須存在的東西，例如上述的使用者資料。 但是隱藏欄位有個最大的缺點，那就是如果使用者用瀏覽器的View Source功能來看，那隱藏欄位還是一覽無遺。 所以隱藏欄位並不是一個十分安全的方法，不過用在一般不涉及金錢交易的多重FORM也是綽綽有餘了。 若你不放心的話還可以先將資料編碼後再放到隱藏欄位，這樣一來就算使用者看到了source也比較難動手腳。 2.CGI side includes(CSI)：
CSI很類似SSI(Server Side Includes)，是一種對隱藏欄位的改良方法。 試想：如果FORM很多，而且資料量又很大，說不定還要常常更新，把這樣的文件統統塞進CGI程式裡是很沒有效率的，尤其是你總不希望三五天就要改一次程式吧。 CSI就是針對這方面的缺陷而設計的，它的做法是在HTML文件中加入特殊的標籤，再經由CGI程式過濾一遍，把裡面的特殊關鍵字替換成正確的資料，然後再show出去。 由於我們採用的語法很像SSI語法，所以把它命名為CSI，不過隱藏欄位的安全問題還是存在的。 3.Netscape Persistent Cookies：
Netscape公司一向是WWW界的老大，它在Netscape瀏覽器上設計了一個可以在client端儲存資料的方法。 只要CGI程式送出Set-Cookie這個header，cookie資料就會被存放在瀏覽器上，並隨著HTTP_COOKIE環境變數傳回CGI程式。 這樣一來，使用者就看不到cookie裡面的資料，就算看到了也沒有辦法改變它。 不過這個方法有幾個缺點：第一、只有Netscape的瀏覽器能夠使用，若使用者不是用Netscape，那就沒輒了； 第二、cookie的大小和數目很有限，每個cookie不能超過4KB，每個使用者只能同時存有300個cookie，而且一個網域中不能超過20個cookie。 所以這個方法並不是很多人用，而且它的安全性也有待考慮。 由於一般使用者並不會使用到多重的FORM，所以我也不打算列出範例詳加解釋，有興趣的人請自行參考『CGI程式設計--松格資訊』一書。

◎HTTP headers(表頭)

HTTP通訊協定是一種很簡單的client-server通訊協定，client和server之間的溝通由兩部分所組成，一是HTTP headers，另一就是文件或資料本身了，中間則以一個空白行隔開。 我們先來看看下面這個例子：
這是一個由Netscape Navigator 3.0版所發出的request(Location : http://ind.ntou.edu.tw/)：

GET / HTTP/1.0
Connection: Keep-Alive
User-Agent: Mozilla/3.0 (WinNT; I)
Host: ind.ntou.edu.tw
Accept: image/gif, image/x-xbitmap, image/jpeg, */*

而ind的apache HTTP server的回應則是：

HTTP/1.1 200 OK
Date: Sat, 06 Sep 1997 03:32:12 GMT
Server: Apache/1.2b11
Last-Modified: Mon, 16 Jun 1997 14:03:10 GMT
ETag: "b5496-ab0-33a5479e"
Content-Length: 2736
Accept-Ranges: bytes
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html

<html>
<body bgcolor="#ffffff">
<title>Welcome to NTOU CC Email/WWW Server</title>
......
</body>
</html>

由於瀏覽器和HTTP server都有很多不同的版本，所使用的HTTP headers也各不相同，常用的HTTP headers有下列幾種：

Header範例與說明
Status傳回的狀態碼，若沒有錯誤就會出現200 OK
例：HTTP/1.1 200 OK
Content-type輸出字串的MIME格式。
例：Content-Type: text/html
Content-length輸出字串的長度，通常以byte計算。
例：Content-Length: 2736
LocationServer重新導向，也就是叫瀏覽器再連到另外的這個位址。
例：Location: http://www.ntou.edu.tw/
Pragma關掉瀏覽器的cache，也就是不要把這份文件存在cache中。
例：Pragma: no-cache

為什麼上面有一堆HTTP headers，而我們寫CGI程式時只送出Content-type這個header呢? 其實大部分的HTTP server都會自動幫你加上一些它認為有需要的headers，例如狀態碼、現在的日期時間、server的版本等等， 我們為了簡化程式起見，通常只送出partial HTTP headers，而交由server來幫我們完成headers。 事實上我們也可以使用complete HTTP headers，也就是CGI程式的輸出結果會直接傳到瀏覽器，server不會再額外添加其他headers。 這樣或許可以加快程式執行速度，但你也要特別小心自己產生的headers，因為server並不會幫你避開錯誤。 而complete HTTP headers至少要包括HTTP版本、狀態碼、server name/version、MIME content type等，否則將會發生不可預期的錯誤。 另外我們寫CGI程式時還要注意到一點：依照規定"Content-type:"後面一定要空一格，也就是像"Content-Type: text/html"這樣， 而headers結束後一定要空一行，也就是"\n\n"。這兩個細節聽說打死很多初學者，大家寫程式時要小心點，不要連怎麼死的都不知道。

◎亂數的應用

亂數的應用一直是程式設計裡一個非常有趣的單元，對WWW也是一樣，適當的應用亂數可以做到許多令人驚喜的效果。 例如，我看過一個網站，一進去就是一張圖片，令人驚奇的是每次進去(reload)的圖片都不一樣，讓人每次都有耳目一新的感覺，這就是應用亂數的效果。 其實亂數應用最多的地方就是遊戲了，像最簡單的猜拳遊戲也是需要應用亂數。亂數的用法並不難，要如何應用全看你的機智巧思了。 Perl取亂數的方法和C語言一樣，一開始要先設random seed，不然每次取的亂數都一樣，那就很無趣了。在Perl中我們通常是以時間和PID做or運算後做為random seed，也就是srand(time|$$);。 然後用rand函數取亂數，例如rand(9)，它會傳回一個0-9之間的數字。接下來該怎麼應用這個亂數，請自行翻閱各程式語言的書，我就不再多說了。 或許以後我有空會寫個野球拳的CGI程式給各位當範例。

◎其他有趣的例子

接下來這些例子都是『CGI程式設計--松格資訊』這本書上的範例，我只是撿幾個比較有趣的跟大家分享，詳細的說明還是請大家去看書吧。 這本書沒有附磁片，裡面的程式還要跑到國外抓，我費盡千辛萬苦，拔涉千山萬水，終於把這本書所有的範例程式全抓回來了，有興趣的就來這裡抓吧。