インターネット技術特論 CGI 動的文書生成 C:CGI による動的文書生成 (C 言語 ) 山口実靖課題 ( ろ ) 本学 Web サーバに自作 CGI プログラムを公開し, その URL とプログラムをメー

Size: px

Start display at page:

Download "インターネット技術特論 CGI 動的文書生成 C:CGI による動的文書生成 (C 言語 ) 山口実靖課題 ( ろ ) 本学 Web サーバに自作 CGI プログラムを公開し, その URL とプログラムをメー"

ちとらしげい
4 years ago
Views:

1 インターネット技術特論 CGI 動的文書生成 C:CGI による動的文書生成 (C 言語 ) 山口実靖課題 ( ろ ) 本学 Web サーバに自作 CGI プログラムを公開し, その URL とプログラムをメールにて提出. 宛先 "ct13140@ns.kogakuin.ac.jp" メールの件名 (Subject:) は, 必ず " インターネット技術特論課題ろ " とすること. 途中に空白無し. ダブルクォーテーション不要. メール本文に, 学籍番号, 研究科 ( 学部 ), 専攻 ( 学科, コース ), 研究室, 氏名,URL を記述. 作成したプログラムをメールに添付. 提出期限 13 日後の 23 時 59 分質問は早めに ML に! CGI インターネット技術特論 C-3 静的文書と動的文書 Web サーバにおける静的文書と動的文書静的文書事前に保存されている内容を,Web ブラウザに返す. 毎回, 固定的な内容を返す ( 表示 ). 動的文書 ( 生成 ) 要求時にプログラムを起動し, 文書を動的に ( そのときに ) 生成する. 状況に応じて, ブラウザからの入力に応じて, 返す内容 ( 表示内容 ) を変更することが可能. CGI インターネット技術特論 C-4 CGI (Common Gateway Interface) Web サーバ計算機の内部でプログラムを起動し, 応答内容 ( 通常は HTML) を動的に生成し, それ ( 動的生成 HTML) を Web ブラウザに返す仕組み. Web ブラウザ 1 HTTP リクエスト 5 HTTP 応答 Web サーバ 2 プログラム起動データ入力 ( 環境変数 QUERY_STRING または標準入力 ) 4 実行結果出力データ出力 ( 標準出力 ) プログラム 3 実行 CGI でのデータ入力 GET の場合環境変数 QUERY_STRING を読み込む. インターネット技術特論 C-5 POST の場合標準入力を読み込む. データ長は環境変数 CONTENT_LENGTH より取得. とりあえず, 保留 CGI でのデータ出力インターネット技術特論 C-6 冒頭に "[ 改行 ][ 改行 ]" と記述してから, 本文を出力する. もし, 出力データが " テキスト HTML" であるなら. 上記は,HTTP ヘッダであり,Web サーバと Web ブラウザとの間の制御情報のやりとりに使用される. 実際はより多くの機能があり, 上記は必要最低限の出力. 文字コード情報など重要性の高いものもある. 詳細は, 後述 ( したい ) インターネット技術特論 C-7 インターネット技術特論 C-8

2 CGI でのデータ出力 ( 例 0) CGI でのデータ出力 ( 例 1) "<h1>hello</h1>" という本文を出力し,Web ブラウザに渡したかったら, プログラムは " n n <h1>hello</h1>" と出力する必要がある. プログラムが, " n n <h2>helloworld</h2>" と出力した場合, Web ブラウザには, "<h2>helloworld</h2>" と渡される. CGI でのデータ出力 ( 例 2) プログラムが, "<h2>helloworld</h2>" と出力した場合, エラーとなる. インターネット技術特論 C-9 正確には,(HTTP1.1 使用時は ) 上記の HTTP ヘッダも Web ブラウザに渡される. ただし,Web ブラウザは, それを ( ユーザに対して ) 表示しない. CGI プログラムの設置インターネット技術特論 C-10 以下は, 工学院大学の Web サーバのルールファイル名は,"*.cgi" である. 実行権限は "755" にしておく. Web サーバのポリシー ( 工学院大学の例 ) ファイル名が "~.html" であったら, そのファイルを読み込んで,Web ブラウザに返す. ファイル名が "~.cgi" であったら, そのファイルを実行ファイルとして実行し, その出力 ( 標準出力 ) を Web ブラウザに返す. ファイル名が "~.cgi" だが, 実行権限がなかったら, 実行しようとして, 実行できず, エラーインターネット技術特論 C-11 工学院大学の Web サーバの設定インターネット技術特論 C-12 ホストの /etc/httpd/conf/httpd.conf というファイルに記述されている. 最初のプログラム 000.c インターネット技術特論 C-13 CGI プログラムの設置 void main(){ printf(" n n"); printf("hello n"); 実行結果 hello 注意!! 通常,CGI プログラムは C 言語では作りません. C 言語は,Web アプリケーション開発に不向きです. インターネット技術特論 C-15 ct13140@green[101]:pwd /home/ct13140/public_html/cgi/c ct13140@green[102]:gcc 000.c -o 000.cgi ct13140@green[103]:ls -alf 000.cgi -rwxr-xr-x 1 ct13140 user ( 略 ) 000.cgi* ct13140@green[104]:./000.cgi hello ct13140@green[105]: インターネット技術特論 C-16

3 CGI プログラムの設置 001.c ( ソース ) Web ブラウザでアクセス hello と表示される. 成功 void main(){ int i; printf(" n n"); for(i=0; i<10; i++){ printf("%d<br> n", i); 001.c ( サーバ上で実行 ) インターネット技術特論 C cgi の設置インターネット技術特論 C-18 0<br> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 002.c ( ソース ) インターネット技術特論 C-19 Web サーバにて gcc 001.c -o 001.cgi Webブラウザでアクセス 0/cgi/C/001.cgi 成功 Web ブラウザソースを表示 002.c ( サーバ上で実行 ) 0<br> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> インターネット技術特論 C-20 #include <time.h> int main(void) { time_t tim; struct tm *tm_tim; char *dow[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"; 2010/10/12(Tue) 14:40:01 time(&tim); tm_tim = localtime(&tim); printf(" n n"); printf("%d/", tm_tim->tm_year+1900); printf("%d/",tm_tim->tm_mon+1); printf("%d",tm_tim->tm_mday); printf("(%s) ",dow[tm_tim->tm_wday]); printf("%02d:",tm_tim->tm_hour); printf("%02d:",tm_tim->tm_min); printf("%02d n",tm_tim->tm_sec); 002.cgi の設置インターネット技術特論 C c ( ソース ) インターネット技術特論 C-22 Web サーバにて gcc 002.c -o 002.cgi Web ブラウザでアクセス 0/cgi/C/002.cgi int main(void) { printf(" n n"); srand(time(null)); printf("rand=%d n", rand()); 2010/9/8(Tue) 14:40:01 ソースを表示成功 2010/9/8(Tue) 14:40:01 Web ブラウザインターネット技術特論 C-23 インターネット技術特論 C-24

4 004.c ( ソース ) サーバ内のファイルを読み込む CGI プログラム int main(void) { FILE *fp; char txt[1024]; "004.txt" を読み込んで, その内容を出力するプログラム. printf(" n n"); fp = fopen("004.txt","rt");// ファイル "004.txt" を読み込み形式でopen if( fp == NULL ){ // もし,open 失敗なら. printf("<h1>file can not open!</h1> n"); // エラーを表示して exit(0); // 終了 printf("file open ok.<br> n"); // open 成功した事を表示. fread( txt, 1024, 1, fp); // ファイルから1024バイト読み込む txt[1023] = ' 0'; // 配列の最後を終端記号にしておく. printf("file --> [%s]<br> n n", txt); // 読み込み内容を表示. fclose(fp); // ファイルをclose 実行 (A) : サーバ上で実行 ct13140@green[101]:ls -l 004.txt -rw-r--r-- 1 ct13140 user 6 Sep 11 12: txt ct13140@green[102]:cat 004.txt hello ct13140@green[103]:./004.cgi File open ok.<br> file --> [hello ]<br> インターネット技術特論 C-26 実行 (A) : Browser で閲覧 File open ok. file --> [hello ] File open ok.<br> file --> [hello ]<br> ct13140@green[104]: "004.txt" の内容を包含する出力が得られた. "004.txt" の内容を包含する出力が得られた. インターネット技術特論 C-27 実行 (B) : サーバ上で実行 ct13140@green[101]:ls -l 004.txt -rw-r--r-- 1 ct13140 user 15 Sep 11 12: txt ct13140@green[102]:cat 004.txt hello world ct13140@green[103]:./004.cgi File open ok.<br> file --> [hello world ]<br> "004.txt" の内容を変更して再実行すると. インターネット技術特論 C-28 実行 (B) : Browser で閲覧 File open ok. file --> [hello world ] File open ok.<br> file --> [hello world ]<br> "004.txt" の内容を変更して再実行すると. インターネット技術特論 C-29 実行 (C) : サーバ上で実行 ct13140@green[101]:chmod txt ct13140@green[102]:ls -l 004.txt -rw ct13140 user 6 Sep 11 12: txt ct13140@green[103]:cat 004.txt hello ct13140@green[104]:./004.cgi File open ok.<br> file --> [hello ]<br> ct13140@green[105]: "004.txt" のパーミッションが 600. owner read 可 group read 不可 other read 不可自分 (owner) は read 可能なので, "004.txt" の内容は読み込まれた. インターネット技術特論 C-31 インターネット技術特論 C-30 実行 (C) : Browser で閲覧 File can not open! <h1>file can not open!</h1> Web サーバプログラム (apache httpd) は,user apache, group apache の権限で動いている. "004.txt" のパーミッションが 600. owner read 可 group read 不可 other read 不可このルールが適用される Web サーバ (other) が 004.cgi を動かし,004.cgi が 004.txt を読み込もうとするが, 読み込み権限がなく " 読めなかった ". インターネット技術特論 C-32

5 Web サーバ, httpd, apache CGI と静的 HTML 工学院大学には Apache という Web サーバ (httpd) がインストールされている. httpd は,User "apache",group "apache" の権限にて動作する. CGI プログラムがファイルにアクセスするには, other に対するパーミッションが " 許可 " に成っていなくてはならない. CGI( などのサーバサイドプログラムは ) サーバ内でプログラムが動作する結果として毎回出力を変えることができる. 接続相手により出力を変えることができる. サーバ内のファイルの読み書きができる. サーバ内の RDBMS に接続することができる. 特に書き込みが重要. ユーザの情報を残しておける. インターネット技術特論 C c ( ソース ) インターネット技術特論 C-34 アクセスカウンター 1 2 #include <stdlib.h> 3 void main(void) { 4 int cnt; 5 FILE *fp; 6 printf(" n"); 7 printf(" n"); 8 fp = fopen("005.txt", "rt"); 9 if( fp == NULL ){ 10 cnt == 0; 11 printf("file read NG.<br> n"); 12 else { 13 char buf[1024]; 14 fread( buf, 1, 1024, fp); 15 fclose(fp); 16 cnt = atoi(buf); 17 printf("file read OK.<br> n"); printf("<h1>%d</h1> n", cnt); 20 cnt ++; 005.c ( ソース ) 21 fp = fopen("005.txt","wt"); 22 if( fp == NULL ){ 23 printf("file write NG.<br> n"); 24 else { 25 fprintf(fp, "%d", cnt); 26 printf("file write OK.<br> n"); 27 fclose(fp); インターネット技術特論 C-36 データファイルのパーミッション ct13140@green[111]:ls -l 005.txt -rw-rw-rw- 1 ct13140 user 2 Sep 11 12: txt Q. ファイルのパーミッションを rw-rw-rw- にするには? A.chmod txt Q. 赤字の部分 (other) が重要なら,chmod txt で -rw----rw- にしても良いのか? A. 良い. むしろ, その方が好ましい. インターネット技術特論 C-37 実行 (A) : サーバ上で実行インターネット技術特論 C-38 実行 (B) : Browser で閲覧 ct13140@green[334]:./005.cgi file read OK.<br> <h1>28</h1> file write OK.<br> file read OK. 29 file write OK. file read OK.<br> <h1>29</h1> file write OK.<br> インターネット技術特論 C-39 インターネット技術特論 C-40

6 実行 (B ): Browser で閲覧数値を画像で表示するカウンタ file read OK. 30 file write OK. file read OK.<br> <h1>30</h1> file write OK.<br> 再読み込みすると... 簡単なトリック (?) で実現可能. "0.gif", "1.gif", "2.gif",..., "9.gif" を用意しておく. アクセス数が 123 なら, <img src="1.gif"> <img src="2.gif"> <img src="3.gif"> と出力すれば, ブラウザが上記ファイルを表示してくれる. 005_.c インターネット技術特論 C-41 int i; char temp[1024]; sprintf( temp, "%d", cnt); for(i=0; i<strlen(temp); i++){ printf("<img src= "%c.gif ">", temp[i]); "005.c" の 19 行目の printf("<h1>%d</h1> n", cnt); の代わりに上記を書いておけばよい. インターネット技術特論 C-42 実行 (A) : Browser で閲覧 file read OK.<br> <img src="1.gif"><img src="2.gif"><img src="3.gif"><br> file write OK.<br> ファイルのロックインターネット技術特論 C-43 本当は, ファイルをロックすべき複数のユーザが同時に読み込むとデータが壊れる. Unix にはファイルロック機能がある. ただし通常は RDBMS を用いる. ファイルへの書き込みやファイルからの読み込みは行わない. 本講義では当面は放置. CGI プログラム A cnt は 56. Cnt を 1 増やす cnt は 57. インターネット技術特論 C-44 ファイルのロック ( 幸運なとき ) read open data read close write open data write ファイル CGI プログラム A cnt は 56. Cnt を 1 増やす cnt は 57. インターネット技術特論 C-45 ファイルのロック ( 不運なとき ) read open data read close write open ファイル 56 read open CGI プログラム B 環境変数を取得するインターネット技術特論 C-46 data write close 57 data read close write open cnt は 0? Cnt を 1 増やす cnt は 1? data write 1 close インターネット技術特論 C-47

7 環境変数 CGI の環境変数 CGI プログラムは, 各種環境変数の値を調査することにより多くの情報を得ることが可能. 接続クライアント情報, サーバ情報など環境変数は getenv( 環境変数名 ) で取得可能. 例 env = getenv( "REMOTE_ADDR" ); if( env!= NULL ){ printf("remote_addr : %s<br> n", env); RVER_SOFTWARE SERVER_NAME GATEWAY_INTERFACE SERVER_PROTOCOL SERVER_PORT REQUEST_METHOD PATH_INFO PATH_TRANSLATED SCRIPT_NAME QUERY_STRING REMOTE_HOST REMOTE_ADDR AUTH_TYPE REMOTE_USER REMOTE_IDENT CONTENT_TYPE CONTENT_LENGTH HTTP_ACCEPT HTTP_USER_AGENT 詳しくは CGI の仕様書を! c ( ソース ) インターネット技術特論 C-49 インターネット技術特論 C-50 #include <stdlib.h> void main(){ char *env; printf("content-type: text/html n n"); env = getenv( "REMOTE_ADDR" ); if( env!= NULL ){ printf("remote_addr : %s<br> n", env); else { printf("remote_addr : NULL<br> n"); Browser からの入力を処理する接続してきたクライアントの IP アドレス情報 "REMOTE_ADDR" の内容を表示するプログラム. 接続元により表示内容を変えるプログラムも作成可能. Web ブラウザインターネット技術特論 C-51 Browser から CGI プログラムへのデータの流れ 1 GET または POST 5 HTTP 応答 Web サーバ 2 プログラム起動データ入力 ( 環境変数 QUERY_STRING または標準入力 ) 4 実行結果出力データ出力 ( 標準出力 ) データ入力可能な HTML プログラム 3 実行インターネット技術特論 C-53 <form action="007.cgi" method="get"> A:<input type="text" name="aa"><br> B:<input type="text" name="bb"><br> <input type="submit" value="ok"> <input type="reset" value="reset"> </form> 上記の HTML の赤字部の意味. <form> から </form> で受け付けた入力データを, 007.cgi に送信する. 送信方法は "GET" である. ( 送信方法には,GET と POST がある ) データ入力可能な HTML <form action="007.cgi" method="get"> A:<input type="text" name="aa"><br> B:<input type="text" name="bb"><br> <input type="submit" value="ok"> <input type="reset" value="reset"> </form> Browser での表示ユーザがここに入力したデータは, aa の値として, サーバに送信される. ユーザがここに入力したデータは, bb の値として, サーバに送信される. データ入力可能な HTML インターネット技術特論 C-54 <form action="007.cgi" method="get"> A:<input type="text" name="aa"><br> B:<input type="text" name="bb"><br> <input type="submit" value="ok"> <input type="reset" value="reset"> </form> 上記の HTML の色文字の意味. text 形式の入力をユーザから受け付ける. その入力データは aa と名がついてサーバに送られる. text 形式の入力をユーザから受け付ける. その入力データは bb と名がついてサーバに送られる. インターネット技術特論 C-55 インターネット技術特論 C-56

8 データ入力可能な HTML データ送信手法 GET, POST <form action="007.cgi" method="get"> A:<input type="text" name="aa"><br> B:<input type="text" name="bb"><br> <input type="submit" value="ok"> <input type="reset" value="reset"> </form> 上記の HTML の色文字の意味. OK の文字が記された送信ボタンが表示される. 送信ボタンとは, そのボタンを押したら入力データがサーバに送られるボタンのこと. Reset の文字が記された Reset ボタンが表示される. Reset ボタンとは, そのボタンを押したら入力データがクリアさせるボタンのこと. Browser からの入力を受け取る CGI プログラムインターネット技術特論 C-57 環境変数 REQUEST_METHOD に送信手法が "GET" または "POST" として格納される. データ送信手法が GET の場合環境変数 QUERY_STRING に ( すべての ) 情報が格納されているので, それを読み込み解析する. データ送信手法が POST の場合標準入力より転送データを読み込むことが可能. データ長 ( バイト数 ) は環境変数 CONTENT_LENGTH に格納されている. 送信方法は GET と POST の 2 種類がある. どちらを用いても, 実現できることはほぼ同一. サイズの大きなデータの送信には POST の方が適している. 表示したくないデータ ( パスワードなど ) の転送に GET は不適切.( ただし,POST が安全という訳ではない ) 詳細は後述. 余談インターネット技術特論 C-58 バッファーオーバーフローに気をつけましょう. 例 int x[100]; と確保した場合は, x[0]~x[99] しか使用してはなりません. 当然なら x[-1] や x[100] や x[120] は NG. 特に Stack 上に確保した配列は危険. 配列のすぐ近くに return address があります. return address を悪意あるユーザに操作されてしまうと,PC を任意の場所にとばされてしまいます. Browser からの入力を受け取る CGI プログラム #define BUFSIZE 1024 #include <stdlib.h> #include <string.h> int main(void) { char *env, buf[bufsize]; printf(" n"); printf(" n"); printf("<a href= "007.html ">back</a><br> n"); インターネット技術特論 C-59 env = getenv( "REQUEST_METHOD" ); if( env == NULL ){ printf("(?_?) %s:%d n", FILE, LINE ); exit(1); GET による送信例インターネット技術特論 C-61 Browser からの入力を受け取る CGI プログラムインターネット技術特論 C-60 if(! strcmp(env,"post") ){ int len; printf("post<br> n"); len = fread(buf, 1, BUFSIZE-1, stdin); buf[len] = ' 0'; printf("[%s]<br> n", buf); else { printf("get<br> n"); env = getenv( "QUERY_STRING" ); if( env!= NULL){ printf("[%s]<br> n", env); else { printf("query_string is NULL.<br> n"); GET による送信例インターネット技術特論 C-62 A: Hoge B: Fuga ユーザが左の様に入力し, OK(submit) を押すと, cgi/c/007.cgi?aa=hoge&bb=piyo URL 欄に上の様に入力し, 接続すると GET [aa=hoge&bb=fuga] cgi/c/007.cgi?aa=hoge&bb=fuga インターネット技術特論 C-63 GET [aa=hoge&bb=piyo] ~ct13140/cgi/c/ 007.cgi?aa=Bar&bb=Foo GET [aa=bar&bb=foo] インターネット技術特論 C-64

9 データ受信に関する仕様 (GET) データ受信の方法 (GET) GET の場合. 環境変数 REQUEST_METHOD に "GET" が格納されている. 環境変数 QUERY_STRING に "namea=valuea&nameb=valueb&namec=val uec " のフォーマットでデータ名とデータが格納さている. ただし," データ名 " は HTML のフォームの name で指定したデータ名 GET の場合. 環境変数 REQUEST_METHOD を調査. もし,"GET" であったら, 以下を行う. "POST" であった場合は後述. (1) 環境変数 QUERY_STRING に格納されている文字列を読み込む. (2) 文字列を "&" で分割する. (3) それぞれを "=" で分割して, 入力されたデータを取得する. データ受信の方法 (GET) インターネット技術特論 C-65 POST による送信例インターネット技術特論 C-66 (1) QUERY_STRING を読み込む. "aa=hoge&bb=piyo" であった. (2) 文字列を "&" で分割. "aa=hoge" と "bb=piyo" (3) それぞれを "=" で分割 "aa"="hoge" "bb"="piyo" A: Hoge B: Fuga POST [aa=hoge&bb=fuga] ユーザが左の様に入力し, OK(submit) を押すと, 後ろに何も付いていないインターネット技術特論 C-67 データ受信に関する仕様 (POST) POST の場合. 環境変数 REQUEST_METHOD に "POST" が格納されている. データは標準入力より読込可能. データのバイト数は環境変数 CONTENT_LENGTH に設定されている. "namea=valuea&nameb=valueb&namec=val uec " のフォーマットでデータ名とデータが格納さている. これは "GET" と同様である. データ受信の方法 (POST) POST の場合. インターネット技術特論 C-68 環境変数 REQUEST_METHOD を調査. もし,"POST" であったら, 以下を行う. (1) 標準入力より CONTENT_LENGTH バイト読み込む. ただし, サンプルは読込量はバッファサイズにしている. (2) 文字列を "&" で分割する. (3) それぞれを "=" で分割して, 入力されたデータを取得する. インターネット技術特論 C-69 特殊記号, 日本語のデータの処理 A: さね B: やす GET [aa=%82%b3%82%cb&bb=%82%e2%82%b7] ユーザが上の様に入力し, OK(submit) を押すと, インターネット技術特論 C-70 aa=%82%b3%82%cb&bb=%82%e2%82%b7 文字コード 82 B3 " さ " 文字コード 82 CB " ね " 文字コード 82 E2 " や " 文字コード 82 B7 " す " 2 バイト文字は, そのまま転送されず "% 文字コード " の形式で転送される. ただし, 文字コードは 16 進数表記 cgi/c/007.cgi?aa=%82%b3%82%cb&bb=%82%e2%82%b7 インターネット技術特論 C-71 バイナリエディタ Bz インターネット技術特論 C-72

10 特殊記号, 日本語のデータの処理特殊記号, 日本語のデータの処理 A: abc#d?e f<g&h=i+j B: ユーザが上の様に入力し, OK(submit) を押すと, " 半角スペース " は "+" に変換される特殊文字, 文字コード 31 以下の文字, 文字コード 128 以上の文字は,"% 文字コード " に変換される. 日本語文字の処理方法は, 当面保留. GET [aa=abc%23d%3fe+f%3cg%26h%3di%2bj&bb=] cgi/c/007.cgi?aa=abc%23d%3fe+f<g%26h%3di&bb= インターネット技術特論 C-73 インターネット技術特論 C-74

Ｗｅｂデザイン論

Ｗｅｂデザイン論 2008 年度松山大学経営学部開講科目情報コース特殊講義 Web デザイン論檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 出席確認受講管理システム AMUSE を使って本日の出席登録をせよ学籍番号とパスワードを入力するだけでよい : http://davinci.cc.matsuyama-u.ac.jp/~dan/amuse/

インターネット技術特論 CGI 動的文書生成 C:CGI による動的文書生成 (C 言語 ) 山口実靖 課題 ( ろ ) 本学 Web サーバに自作 CGI プログラムを公開し, その URL とプログラムをメー

インターネット技術特論 CGI 動的文書生成 C:CGI による動的文書生成 (C 言語 ) 山口実靖課題 ( ろ ) 本学 Web サーバに自作 CGI プログラムを公開し, その URL とプログラムをメー