Lesson01

WWW の歴史と仕組み WWW の歴史と WWW に必要な要素技術について学ぶ 2009 年 2 月 6 日情報技術研究センター　飯尾　淳

内容リソースの特定、ドメインネームシステム 5 ガイダンス 1 Web コンピューティングとは 2 通信技術の基礎 6 セキュリティ 7 まとめ 8 WWW の歴史 3 ハイパーテキストとは 4

ガイダンス第1日 WWWの歴史と仕組み Webの表現技術 Webコンピューティング演習第2日アプリケーションの記述言語 Webアプリケーションの仕組み Webコンピューティングの具体例 Webコンピューティング演習第3日オープンソースソフトウェア Webとリッチクライアント XML概論 Web2.0の世界

そもそも Web コンピューティングって？

Webコンピューティングとは定義：「Webコンピューティング」 WebアプリやWWW環境を（高度に）利用したコンピュータ活用のこと（参考）　さまざまなコンピューティング環境デスクトップアプリケーションオフィススイート（生産性ソフトウェア）：　ワープロソフト、表計算ソフト、プレゼンテーション、データベースなど専門用途アプリケーション：　CAD/CAM、デザイン、DTP、フォトレタッチ、財務会計などコンシューマ向けアプリケーション：　ビデオ編集、 DTM、ゲーム、住所録管理、年賀状作成などクライアント・サーバシステム基幹システムレガシーシステム組込み機器ウェアラブルコンピューティングユビキタスコンピューティング写真：三菱総合研究所

サーバとクライアントサーバとはネットワーク経由でアクセスし、何がしかのサービスを提供する機器 Webコンピューティングの場合は、Webサーバがクライアント向けインタフェースを提供注意：Webコンピューティングにおけるサーバは、Webサーバ以外のサーバも活躍するクライアントとはユーザが操作サーバに対して「リクエスト」を送信するサーバから結果を受け取ってユーザに表示する Webコンピューティングの場合は、Webブラウザがクライアントになる場合が多い ① リクエストを送信 ② 処理結果としてのサービスを返信クライアントサーバ

Webアプリケーション（ウェブアプリケーション）とは広義には、Webのしくみを利用し、イントラネット/インターネット上で提供されるアプリケーションサービスインテル用語集よりさまざまなWebアプリケーション電子商取引（e-Commerce) 単独のオンラインショップだけでなく、ショッピングモールなどもあるオンラインバンキング、オンライントレードエンドユーザ向けにWebアプリケーションを提供掲示板、SNS (Social Networking Service) 大規模掲示板から専門的なものまで、百花繚乱 CMS (Content Management System) WWWで提供する情報（記事や写真、図表など）をデータベースで一元的に管理するシステム e-Learning オンラインで教育のコースを提供。成績管理、学習進捗管理などの機能を持つ総合的なものもある特徴全てWebブラウザからアクセス可能！

ウェブアプリケーションの例（チケット予約）出典： http://www.jal.co.jp/ 出典： http://www.jnavi.eki-net.com/ 出典： http://www.ana.co.jp/ 出典： http://t.pia.jp/

ウェブアプリケーションの例（電子商取引）出典： http://www.amazon.co.jp/ 出典： http://www.nissen.co.jp/ 出典： http://www.bk1.co.jp/

ウェブアプリケーションの例（オンラインバンキング）出典： http://direct.bk.mufg.jp/ 出典： http://ib.resonabank.co.jp/ 出典： http://www.mizuhobank.co.jp/

ウェブアプリケーションの例（掲示板（BBS)）出典： http://slashdot.jp/ 出典： http://www.2ch.net/newsplus/

ウェブアプリケーションの例（SNS）出典： http://ja-jp.facebook.com/ ( 上）（下）出典： http://mixi.jp/

ウェブアプリケーションの例（CMS）出典： http://www.drupal.org/ 出典： http://www.xoops.org/ 出典： http://plone.org/ 出典： http://www.joomla.org/

ウェブアプリケーションの例（検索等）出典： http://www.google.co.jp/ 出典： http://maps.google.co.jp/ 出典： http://www.yahoo.co.jp/

ウェブアプリケーションの例（その他の便利なサービス）出典： http://navi.ekitan.com/ 出典： http://www.taxisite.com/ 出典： http://www.tokyo-ame.jwa.or.jp/

Web コンピューティングの進化専用サーバ　　専用クライアント　　 Web サーバ（汎用）　　 Web ブラウザ　　 Web サーバ汎用サーバ汎用リッチクライアント　　リッチクライアントシステム Web システム C/S システム

Internetの歴史(1) 1969 年インターネットの原型といわれる ARPANET が始動 -> UCLA 、スタンフォード研究所 (SRI) が接続 -> 同年中に UC サンタバーバラ、ユタ大学も接続 1983 年 ARPANET のプロトコルが NCP から TCP/IP に切り替わる 1984 年日本で JUNET ができる（東大、慶大、東京工業大が相互接続） 1986 年全米科学財団（ National Science Foundation ）が学術研究用のネットワーク基盤 NSFNet の運用開始インターネットのバックボーンが ARPANET から NSFNet へ移行

Internetの歴史(2) 1988 年アメリカで商用インターネット始動。 NSFNet との接続を開始日本で産学協同研究プロジェクトの WIDE プロジェクト始動 -> IP 接続によるインターネット参加を開始 NTT が日本の主要都市（全都道府県庁所在地）を結んだ光ケーブル網を完成 -> 翌年 1989 年には NSFNet へ接続 1990 年欧州原子核研究機構 CERN において、ティム・バーナーズ = リーが最初の WWW サーバとブラウザを完成 1995 年 NSFNet が民間へ移管インターネット関連機能を盛り込んだ Windows95 が登場 -> 個人ユーザの利用拡大

WWW以前の世界（FTP）あるデータをインターネットで公開したい！⇒ anonymous FTP サービス FTP （ File Transfer Protocol ）ファイルを転送するためのプロトコル FTP サーバと FTP クライアントでファイルをやりとりする不特定多数に公開したい場合ゲストでログインしてファイルを取得可能通常の運用方法 ID: anonymous PW: （利用者のメールアドレス） anonymous FTP サービスの問題点そっけないインタフェースファイル名ベースのやりとり検索等の付帯機能なし性善説に基づく運用

WWW以前の世界（gopher） gopher サーバファイルに見出しを付けて管理ネットワーク横断的に検索可能サーバを渡り歩いてアクセス gopher の歴史 1991 年にミネソタ大で開発 WWW にとって代わられ、次第に利用されなくなった gopher サービスの問題点いぜんとしてそっけないインタフェースやはりファイル名ベースのやりとり付帯機能は弱い

WWWの歴史(1) 1983 年ティム・バーナーズ = リーとロバート・カイリュー、 Web の基本的なアイディアといわれる「 ENQUIRE 」構築 1990 年 11 月ティム・バーナーズ = リー、 World Wide Web をより具体化した提案書 “ WorldWideWeb: Proposal for a HyperText Project” 発表最初のウェブページを Next ワークステーション上にて実装開始世界初のウェブブラウザとウェブサーバを開発 1991 年 8 月ティム・バーナーズ = リー、‘ World Wide Web Summary’ を alt.hypertext ニュースグループに投稿 WWW がインターネット上で利用可能に

WWWの歴史(2) 1992 年イリノイ大学の米国立スーパーコンピュータ応用研究所 (NCSA; National Center for Supercomputing Applications) において、マーク・アンドリーセンらが画像なども扱える革新的なブラウザ’ Mosaic’ を開発ソースコードを無料で公開した＞利用拡大 1993 年 4 月 CERN 、 WWW の無料公開を発表 1994 年 WWW コンソーシアム設立 World Wide Web 上で使用される各種技術の標準化を推進する非営利団体

Mosaic: 初期のWebブラウザ

ブラウザ戦争当初、Netscapeが圧倒的シェアを獲得 Microsoftが、Internet ExplorerでWebブラウザのシェア獲得を仕掛ける OSとの抱き合わせ提供で、シェア逆転ブラウザ戦争がもたらしたものメリット：技術革新デメリット：独自拡張による相互運用性の低下出典：独立行政法人情報処理推進機構「互換性の高い Web コンテンツ作成を支援するツールの仕様検討　調査報告書」最近の Web ブラウザに関するシェアの推移

様々なWebブラウザ Internet Explorer Google Chrome Firefox Safari ( 番外） w3m

ブラウザの相互運用性（インターオペラビリティ）様々な理由から、表現の違いや動作の不具合が生じる ⇒ 詳しくは後ほど相互運用性が欠如している例（右図） Mac OS X および（仮想） Windows 上で、様々なブラウザ（ Internet Explorer 、 Firefox 、 Safari 等）のレンダリング結果を比較

ハイパーテキストとは

定義：ハイパーテキストふだん使い慣れている WWW の仕組みを見直してみよう「ハイパーテキスト」 = コンピュータを利用した文書セット特徴：文書中、任意の場所に「ハイパーリンク」が埋め込まれているハイパーリンク：他の文書に関する位置情報ハイパーリンクを辿っていくことで、複数の文書を自由に渡り歩きながら文書の森を探求できる「ハイパーリンク」だということが分かることもデザイン上の重要な要素 HTML ファイルは単なるテキストファイル。イメージデータもある種のハイパーリンクで埋め込まれていることに注意

ハイパーテキストのリンク構造ここをクリックここをクリックここをクリックハイパーリンクハイパーリンクハイパーリンクハイパーリンクは文書の先頭のみを指すわけではないことに注意

ハイパーテキストの歴史(1) 1965 年テッド・ネルソン、ブラウン大学において、・ヴァネヴァー・ブッシュの Memex 構想を具体化・ハイパーテキストの概念、 Xanadu Model を提示 1968 年ダグラス・エンゲルバート、スタンフォード研究所で NLS （ oNLine System ）の研究をすすめ、革新的といわれるハイパーテキストインタフェースのデモを実施 1980 年・カーネギーメロン大学において、アレン・ニューウェル指導のもと、　 ZOG を開発・「フレーム」、「カード」型システムの原型・ DEC の Vax 版から Pascal ベースの Three Rivers PERQ ワーク　ステーションに移植・この年アメリカ海軍の航空母艦、カール・ヴィンソン（ CVN-70 ）に配備・ティム・バーナーズ＝リー等、 ENQUIRE を開発

ハイパーテキストの歴史(2) 1982 年ケント大学のピーター・ J ・ブラウンが、初の PC 用ハイパーテキストシステム’ GUIDE’ を開発・ Three River PERQ ワークステーション向けに開発されたものを　 MS-DOS に移植 1987 年アップルコンピュータ社が HyperCard を発表 1993 年イリノイ大学 NCSA において Mosaic を発表・ X Window System 版に加え、後に PC 版、 Mac 版が発表され、　 WWW 利用が増加

Webページの描くグラフ構造サーバ A サーバ B サーバ C 循環グラフを成す場合がある

WWWとハイパーテキスト WWWでの活用は、ハイパーテキストというよりも「ハイパーメディア」テキストの連携に留まらないマルチメディアが活用されている ⇒ まさにWWW普及に関する原動力のひとつメディアの利用については「Webとリッチコンテンツ」にて解説

リソースの特定とドメインネームシステム

ネット上のリソース（資源）リソースとは情報の参照先例 WWWのページ、ビデオデータ、音楽データデータベースに格納されているデータ ISBN、ISSN　（本や雑誌の番号）リモートに存在するCPU　（計算資源）

ノードの特定ノードとはネットワーク上に存在するコンピュータ（クライアントおよびサーバの両者を対象）基本的なアドレスの特定 IP(Internet Protocol) アドレス注意：ノードで特定されないリソースも存在する物理的なハードウェアで特定できないもの（負荷分散サーバによるサービス、等）物理的にコンピュータではないもの（ ISBN 、 ISSN ） 128 ビットの数値として特定されるアドレスを、 16 ビット単位で区切り ( 「 : 」で区切る） 16 進数により表現する。例： 3ae3:90a0:bd05:01d2:288a:1fc0:0001:10ee IPv6 (IP アドレス Ver.6) 32 ビットの数値として特定されるアドレスを、「 . 」で区切られた、４つの 10 進数 (0 から 255 まで ) の組で表す。例： 133.148.20.32 IPv4 (IP アドレス Ver.4)

IPアドレスの課題 IP アドレス（ v4, v6 ともに）は覚えにくい「人間が簡単に暗記できる数値は７桁まで」？シンボルで表記例東京農工大学のウェブサーバ www.tuat.ac.jp = 　 165.93.11.108 三菱総合研究所（情報技術研究センター）のウェブサーバ it-center.mri.co.jp = 133.148.32.17 FQDN (Fully Qualified Domain Name) ドメイン名、サブドメイン名、マシン名まで全て指定した形式 www.tuat.ac.jp マシン名（実際には仮想マシンや複数マシンによる負荷分散環境の場合があり得る）ドメイン名

DNS (Domain Name System) ドメイン名とIPアドレスの変換を行うサーバが、DNSサーバ tuat.ac.jp 以下を管理 ac.jp 以下を管理 jp 以下を管理 co.jp 以下を管理 mri.co.jp 以下を管理 it-center.mri.co.jp = 133.148.32.17 u-tokyo.ac.jp 以下を管理 www.u-tokyo.ac.jp = 133.11.128.254 go.jp 以下を管理 it-center.mri.co.jp の IP アドレスは？

nslookup による IP アドレス検索やってみよう Windows の場合コマンドプロンプト (command.com) を起動 nslookup ( 調べたいドメイン名 ) [RET] IP アドレスが表示される（右図） Linux の場合ターミナル（ gnome-terminal など）を起動 Linux で利用できるコマンド nslookup host dig 操作方法は Windows の場合と同様

URI、URL、URN URI (Uniform Resource Identifier) インターネット上のリソースを特定する仕組みの総称、RFC1630において定義 DNSやIPアドレスよりもさらに抽象化された概念 URL (Uniform Resource Locator) DNSなどのアクセス手段によってインターネット上のリソースを示す表現方法プロトコルの例 https:// ftp:// mailto: news: URN (Uniform Resource Name) リソースに付けられた名前。URNは場所が移動しても一意に定められなければならない http://www.tuat.ac.jp:8080/abc/ プロトコルドメイン名ポート番号ファイル名

Web コンピューティングで利用する通信技術の基礎

複数サービスの提供 IPアドレスでサーバを区別ではひとつのサーバで数多くのサービスを提供する場合は？メールサーバウェブサーバファイルサーバターミナルサーバ xxx.yyy.co.jp

ポート番号ポート番号でサービスを区別サービスの特定＝ IP アドレス + ポート番号注意：クライアント側のポート番号は自動的に割り振られる Well known port （特定サービスのために予約された番号） /etc/services （ UNIX の場合）に列挙されている作成：三菱総合研究所 443 SSL (Secure Socket Layer: (https) セキュアな HTTP) 109 / 110 POP2 / POP3 （ Post Office Protocol: メール受信） 80 WWW 25 SMTP （ Simple Mail Transfer Protocol: メール送信） 22 SSH （セキュアシェル） 20 ( データ ) 、 21 FTP （ファイル転送）番号サービス

HTTP HTTP (Hyper-Text Transfer Protocol) Web サーバとクライアント（ Web ブラウザ）間の通信方式を定めるプロトコル RFC2616 で規定されている HTTP1.0 による通信の例 GET / HTTP1.0 　　　　←リクエストサーバからのレスポンス HTTP/1.0 200 OK Cache-Control: private Content-Type: text/html Date: Tue, 10 Nov 2008 12:45:02 GMT Connection: Close <html><head> … （以下略）現在は、 HTTP1.1 による通信が主流物理層データリンク層ネットワーク層トランスポート層セッション層プレゼンテーション層アプリケーション層 HTTP TCP

HTTPレスポンスコード (HTTP1.1) HTTP Version not Supported 505 Payment Required 402 Bad Gateway 502 Use Proxy 305 Server Unavailable 503 Bad Request 400 Gateway Time-out 504 Unauthorized 401 Not Implemented 501 Not Modified 304 Forbidden 403 Internal Server Error 500 See Other 303 Unsupported Media Type 415 Moved Temporarily 302 Request-URI Too Large 414 Moved Permanently 301 Request Entity Too Large 413 Multiple Choices 300 Precondition Failed 412 Partial Content 206 Length Required 411 Reset Content 205 Gone 410 No Content 204 Conflict 409 Non-Authoritative Information 203 Request Time-out 408 Accepted 202 Proxy Authentication Required 407 Created 201 Not Acceptable 406 Ok 200 Method Not Allowed 405 Switching Protocols 101 Not Found 404 Continue 100

なぜセキュリティを考えなければならないのか昔は牧歌的な時代だった性善説ベースの運用、研究者間の信頼に基づくネットワークインターネットの商用化とWebコンピューティングの一般化社会生活に与える影響＜大＞便利になった反面、リスクも増大社会的脅威の例オンラインバンキングに対する不正アクセスによる窃盗なりすまし、不正なサーバへの導入等による詐欺行為その他、掲示板への犯行予告など、様々な社会的脅威がある Webコンピューティングにおけるセキュリティ認証暗号化（SSL)通信

Webコンピューティングにおける認証技術パスワード（パスフレーズ） IDとパスワードを組み合わせる認証方式メリット：簡単、使いやすい、古くからなじみがあるデメリット：安易なパスワードは推察されやすい、スケールしないワンタイムパスワード時刻等の情報を利用して生成したその場限りのパスワードを用いる認証方式メリット：その場限りのパスワードなので、不正アクセスされにくいデメリット：トークン生成機など特殊な装置を必要とするマトリクス認証マトリクス形式で示されるパスワードを入力する認証方式メリット：比較的安全　/ デメリット：マトリクスを持ち歩く必要がある SSO (Single Sign-On) パスワード方式と同様だが、システムが連携しており一度認証するだけでよいメリット：いちどシステムにログインするだけでよいデメリット：いちどパスワードが破られたら、全てが不正攻撃の対象となる、社会的なシステム連携の実現は難しい

不正な情報収集に対する対策データ収集ロボットによる不正な情報収集代表的な例： spambot によるメールアドレス収集 spambot ： spam の送付先収集を目的としたネットロボット上記への対策法単純なパターンマッチに適合しないよう、表記を修正例：　 sample@tat.ac.jp ⇒ sample at tat dot ac dot jp テキストをイメージファイルにしてしまうことも CAPTCHA 掲示板への荒らしや不正なメッセージの自動記入、アカウントや会員登録等の自動登録による不正を防ぐための仕組み崩した文字にノイズを加えた画像を提示　⇒ 人間が判定できるかで判断いずれにしても、いたちごっこパターンマッチは改良される、 CAPTCHA 対策は日々進化する… 「 CAPTCHA はもう無意味」という指摘すらなされている CAPTCHA 画像の例 HTKEHS と読める

XSS （クロスサイト・スクリプティング）ユーザからの不正な入力をそのまま表示してしまう脆弱性を突いた不正攻撃本来は、「 < 」⇒「 < 」、「 > 」⇒「 > 」などの HTML 要素無効化を行わなければならないこの処理を「サニタイジング」という

Webコンピューティングに対するその他の攻撃手法 SQLインジェクション XSSと同様、ユーザからの入力にSQLコマンドを紛れ込ませることでDBを不正に操作対策：SQLコマンドに対するサニタイジング OSコマンドインジェクション OSのコマンドを紛れ込ませることでサーバ全体を不正に操作対策：OSコマンドに対するサニタイジングセッションハイジャックサーバとクライアントが複数回やりとりをするセッションを途中で乗っ取る操作対策：セッション管理に用いるキーを複雑にしたり、有効期限を短くする

本講義のまとめ Web コンピューティングとは Web アプリや WWW 環境によるコンピュータ活用である電子商取引、オンラインバンキング・トレード、掲示板、SNS、CMS、e-Learningなど様々 1969 年インターネットの誕生に始まり、現在、爆発的に利用が進んでいる WWW以前はFTPやgopherという仕組みが利用されていた 90 年代初頭にティム・バーナーズ = リーが WWW を発明したその後ブラウザ戦争が起こり、現在は第2次ブラウザ戦争ともいえる状況にあるハイパーテキストとは、ハイパーリンクで結ばれた文書セットのことであるハイパーリンクにより文書集合を探索可能。WWWは世界的なハイパーテキストといえるインターネット上のリソースは URI で特定できる URIを支える技術は、ドメイン名やIPアドレスの技術である Web サーバと Web ブラウザ間は HTTP という通信プロトコルでデータを通信する HTTPはさらにTCP/IPで支えられている。各種サービスはポート番号で区別できる Web コンピューティングにセキュリティの配慮は不可欠もはや社会的インフラとなっているため

Lesson01

More Related Content

What's hot (20)

Similar to Lesson01 (20)

Lesson01