はじめに
###参考書籍
- [イラスト図解式 この一冊で全部わかるWeb技術の基本]
(https://www.amazon.co.jp/%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E5%9B%B3%E8%A7%A3%E5%BC%8F-%E3%81%93%E3%81%AE%E4%B8%80%E5%86%8A%E3%81%A7%E5%85%A8%E9%83%A8%E3%82%8F%E3%81%8B%E3%82%8BWeb%E6%8A%80%E8%A1%93%E3%81%AE%E5%9F%BA%E6%9C%AC-%E5%B0%8F%E6%9E%97-%E6%81%AD%E5%B9%B3-ebook/dp/B06XNMMC9S/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=web%E6%8A%80%E8%A1%93&qid=1590805063&sr=8-2)
こちらの本を読ませていただいてのアウトプット要約になります。
###背景
現場のエンジニアの方かから、webの教養として読んでおくことで応用に繋がるとアドバイス頂きました。
駆け出しエンジニアの方向けに、
知っているつもりの専門用語の知識補完など役立てれば幸いです。
書籍では図解でわかりやすく説明されていますので読んで見る事をオススメします。
著作権等マナーに反する箇所あればすみません。
すぐに訂正致します。
よろしくお願いします。
##Web技術とは
webの正式名称は World Wide WEB → 世界に広がるクモの巣 → 略してweb
web上の文書はハイパーテキストという言語で構成され、ハイパーリンクで繋がる
1つのwebページを、複数のwebページと関連付けることで、全体で大きな情報の集合とすることができる
インターネットとwebはそれぞれ別の目的で開発
→ PC同士をつなげるインターネット
→ 文書(画像)を公開するweb
- 1つのドメインにある複数のweページの集まりをwebサイトと呼ぶ
- ハイパーテキストを記述するための言語 HTML
(文章の表示やハイパーリンクを「タグ」と呼ばれるマークで表現しマークアップ言語と呼ばれている) - 「タグ」で意味づけされて書いたものを人間が読みやすいように作り変えて表示してくれるのがwebブラウザ
###webサーバー
→ webブラウザからの要求があると必要なコンテンツをブラウザに送信する役割
→ 要求されたコンテンツがない場合、「無いですよ」で返答
→ 別のサーバーに要求するよう案内することも役割の一つ
例) Apacheアパッチ、IIS(Internet Information Service)がよく利用される
###HTTP(Hyper Text Transfer Protocol)
正解共通の仕様として決められたハイパーテキスト(コンテンツ)のやりとりの手順
送信手順だけでなく、要求されたコンテンツを持っていなかった場合の応答方法も含む
webサイトの移転を伝える、必要となる様々な手順を定義
正解共通の基準なので、どの種類のブラウザでもあらゆる種類のサーバーとの間で同じ手順でやりとりができる
###webページ表示の流れ
例) http://www.sample.jp/index.html
このURLからわかること
１，HTTPを使ってアクセス
２，www.sample.jpという名前のwebサービスにアクセス
３，index.htmlという名前のコンテンツを表示
###静的
→毎回同じものが表示される
→製作者が更新しないと変化なし
###動的
→検索した文字列に対し最新の検索結果を表示
→コンテンツが随時追加される
→ユーザーが書き込む度に結果が増える掲示板など
###動的ページの仕組み
CGI common gateway interface
→webサーバーが、ブラウザからの要求に応じてプログラムを起動させるための仕組み
サーバーサイドスクリプト
→CGIから呼び出されるプログラム
→一般的に文字列の扱いに長けたスクリプト言語で記述される
例) perl, Ruby, Python, PHP, javascript
クライアントサイド・スクリプト
HTMLに埋め込まれ、ブラウザで読み込まれる際に起動する
サーバーサイド・スクリプトの対になるもの
例) Javascript
##Webの設計思想
RESTの原則
-
統一インターフェース
あらかじめ定義・共有された方法で情報がやりとりされる
例) HTTPを使います -
アドレス可能性
すべての情報が一意なURL構文で示される
例) index.htmlのファイルをください。遷移先のURLを表示させる。 -
接続性
やりとりされる情報にはリンクを含めることができる
例) リンクをクリックしてその先のページに移動 -
ステートレス性
やりとりは１回ごとに完結し、前のやりとりの結果に影響を受けない
例）さっきの指示をもう一度してください→さっきの情報がわかりません
RESTの原則を守ったシンプルな設計のことを、
RESTfulなシステムと呼ぶ。APIの相互運用が円滑になる。
セマンティックWeb
ティム・バーナーズ＝リーが提唱
webページの情報に意味(セマンティック)を付け加えたもの
XML文書の中にRDF言語で意味を記述。言葉の相互関係などはOWL言語で記述。
情報に関する意味を示す情報を、メタデータと呼ぶ。W3Cで標準化が進められている。
既存のwebページにメタデータ付与の作業を考えると普及はまだまだ先。
例) 住所が"長野",院長の名前が"長野" これを区別する
##"webアプリケーション"と"webシステム"の違いは？
web〇〇という似たような言葉の違いを知っておくことは、web技術を理解する上で大切
-
webページ
web上にある文書のこと -
webサイト
webページの集まり -
webアプリケーション
webを介して人が利用するサービスを提供するもの
例)ショッピングサイト、ネットバンキングなど -
webサービス
プログラムが利用するサービスを提供する
例) プログラムAPI
##webを実現するコンピューターネットワーク
コンピューターネットワーク
PC同士がお互いに接続して情報のやりとりをする仕組み
サーバ
ネットワーク上で情報やサービスを提供する役割を持つコンピューター
クライアント
サーバーから提供された情報やサービスを利用する役割を持つコンピューター
・インターネット接続にはプロバイダーが必要
・プロバイダー同士が接続することで世界中が１つのネットワークとして成立。
###プロバイダーは階層構造
IXインターネットエクスチェンジ
ISP同士を接続する拠点、直接接続する必要がなく回線が少なくすみ、経路制御もしやすい
##インターネットの標準プロトコル
プロトコル
機器同士が通信するときの決められたルールと手順
例) HTTPなど
TCP/IP ( transmisson contorl protocol / internet protocol )
プロトコルの集まりのこと
インターネットに接続可能な機器はすべて対応している。スマホも。
昔は、同一のOS、同一の機種しか無理だった
HTTPだけでは足りない部分をTCP/IP（他のプロトコル）が補完している
###【プロトコルの種類】
HTTP：webブラウザとサーバー
FTP：PC間でのファイルのやりとり
SMTP：電子メール送信用
POP：メール受信用
##IPアドレスとポート番号
IPアドレス
コンピューターを特定、データの行き先管理
IPアドレスは必ず１つ ＝ 住所のようなもの
32ビット、IPv4、１０進数で表記
例) 192. 168. 1. 1
グローバルIP
ネットでの利用、ICANN管理
プライベートIP:LAN内での利用、個人・会社で自由
電話番号でいう、外線と内線のイメージ
ポート番号
PCの何を起動するかを特定する
【捉え方のイメージ】
コンピューター→マンション
IPアドレス→住所
ポート番号→部屋番号
##URLとドメイン
http://example.com:80/test.html
１.スキーム名：プロトコルを指定
２.ホスト名：接続先のドメイン名
３.ポート番号：接続先のサーバーの指定。通常は省略される。決まっているため。
４.パス名：ディレクトリやファイルの指定
###DNS
ドメインをIPアドレスに変換する仕組み
DNSはドメインとIPアドレスが紐付いて管理されている
##HTTPの歴史
1991年に登場し,バージョアップしてきた
現在は1999年に規定されたhttp/1.1が主流
データのやりとりを高速化することを目的に
最新：2015年のHTTP/2が誕生
HTTPの基本動作
ブラウザとサーバーのやり取りをHTTPメッセージで行う
HTTPリクエスト：ブラウザからの要求
HTTPレスポンス：サーバからの応答
HTTPのバージョンはブラウザとサーバーの両方が対応しないといけない
違う場合は下位のバージョンが使われる
##HTTPメソッド
| メソッド | 役割 |
|---|---|
| HEAD | HTTPヘッダーの情報のみを取得。更新日時やデータのサイズを取得など。 |
| GET | HTMLや画像を取得 |
| POST | フォームに入力したパスワードなどのデータを転送する場合。セキュリティが必要な場面で使う |
| PUT | データアップロード、サーバー上のファイルを置き換えることができるため制限されている場合が多い |
| DELETE | 指定したファイルを削除。制限されている場合が多い。 |
| CONNECT | 別のサーバーを中継する場合。悪用した攻撃があるため制限されいる場合が多い。 |
| OPTIONS | 指定したファイルを削除。制限されている場合が多い。 |
| TRACE | ブラウザとサーバーの経路をチェック。悪用した攻撃があるため制限されいる場合が多い |
※GETはURLにユーザー名やパスワードが含まれるため履歴に残ってしまう
※個人情報を扱う場合はPOST
###HTTPリクエストに対しサーバー内での処理結果
ステータスコードの５分類
100:リクエスト継続を通知
200:正常
301:リクエストされたコンテンツは移動しました
302:一時的に移動された
304:コンテンツ未更新、ブラウザに一時保存されたコンテンツが表示
400:リクエストが不正
404:コンテンツ未検出、ページが見つかりません
500:リクエスト処理中にサーバー内部でエラー発生
503:アクセス集中やメンテナンスで処理不可
###HTTPはシンプルなプロトコル
特徴：ステートレス、状態を保持しない
反対：ステートフル、状態を保持
例)ショッピングサイトの買い物かご、データを一時保存
###Cookie クッキー
状態を保持し管理する
ブラウザを閉じると削除→セッションCookie
有効期限も設定できる。セキュリティ注意。
###セッション
商品を選ぶ→かごに入れる→購入の流れをセッションと呼ぶ
Cookieを用いてセッション管理
##様々なデータ形式
###HTML
タグで囲んだものが何を示すかを表すもの
タグの塊を要素
開発当初は文書とリンクを表すためのもの
最新バージョン 2016年 11/1
利用状況の変化に対応して今も発展している
DECOTYPE宣言 → HTMLのバージョン情報を伝えている
###webページで使用される画像形式
JPEG
１６７７万色扱える。データを削れば画質が荒くなってしまう。
※人間の目が感じにくいデータを削る
GIF
ジフ。２５６色まで。データ圧縮による劣化は発生しない。
特定の色を透過色として扱う、パラパラ漫画のようなアニメーションにできる。
PNG
ピング。1677万色使える。画質の劣化なし。しかもGIFよりデータサイズが小さい。半透明も扱える。
###XML
HTMLは文書に特化
XMLは目的に応じて汎用的に使える。タグを自分たちで定義、自由な形式
###XHTML
HTMLをXMLの文法で再定義したもの
現在では普及している。
別のXMLで定義されたものを埋め込むことも可能
MathMLやSVGがある
###CSS
スタイルシートとも呼ばれる
HTMLの体裁を外部に切り出したのがCSS
###動的処理にスクリプト言語が使われる
javascript
ECMAScript
###サーバーサイド・スクリプト
Perl, 自由度高く扱いやすい
Python, 読みやすく完結なプログラムを書くことが目的
PHP, web利用することを想定して作られた
Ruby, オブジェクト指向に向いた言語仕様
###DOM
HTMLを扱うためのAPI
ツリー構造、DOMツリー
枝葉の部分→ノード
根っこ→ルート
###XML
文字列、タグ付け必要、データサイズ大きい
###JSON
文字列＋数値や空も扱える。括弧で囲んで構造を示すためデータサイズ小さい。
タグがないので人間には読みにくい。
データ記述言語の一種
XMLとJSONはどちらもデータの記録に使うフォーマット
###フィード
更新履歴を配信するためのファイル
主にRSSとATOMが利用されている
RSS1.0は複雑だが表現が豊富
RSS2/0は表現を放棄しシンプルに
###フィードリーダー
更新を管理するソフトウェア
###ポッドキャスト
RSSを通して音楽や動画を公開。手軽にできる。
###マイクロフォーマット
webページに意味を埋め込む
例) クラス属性を使うなど class="name"
→それをPCが自律的に情報の意味を理解して処理するセマンティックweｂを実現できる
種類：hAtom, hCalender, hCard, hReview, hResume
###音声・動画配信
データ圧縮をコーデックと呼ぶ
圧縮：エンコード
再生のための伸張：デコード
MP3やAAC,MPEG4,WMVなど
ファイルをダウンロードしながら再生：プログレッシブダウンロード配信
例:Youtubeなど、疑似ストリーミングとも呼ばれる
###メディアタイプ
webページ閲覧に使う機器の種類をHTMLやCSS内で指定する：メディアタイプ
HTML→media属性に記述
CSS→＠mediaルールを使用
###webアプリケーション
ブラウザ上で動作するアプリケーション
負荷分散のため３層構造になっている → 層ごとにサーバーを配置
・プレゼンテーション層
・アプリケーション層
・データ層
###MVCモデル
モデル：データ処理、業務処理
ビュー：画面表示
コントローラー：viewとモデルに指示を出す
３層アーキテクチャはシステム全体の設計方針
MVCはサーバーサイド・スクリプトの設計方針
###フレームワーク
一般的な処理の雛形を準備し開発できるようにしたもの
開発者の力量の差による品質のバラつきも出にくくなるメリットがある
Javaベース
Java EE, Struts, Spring Boot,
PHP
Cake PHP
Ruby
Ruby on rails
###Webサーバー
クライアントに対し窓口の役割を果たす
サーバーが動作しなくなると「現在停止しています」のメッセージすら送れなくなる。
機器を増やし負担を減らすだけでなく、別のサーバーだけでサービスを続けられるようにする、冗長化の構成をとることが一般的。
webサーバー：静的ページのデータ
APサーバー：動的処理。サーバーサイド・プログラム
求められるサーバー性能
・レスポンス
静的：HDDの読み取り速度、それをサポートするメモリの容量
動的：アプリケーションとの連携処理を早くするため、CPUの性能
が求められる。
###Webクライアント
ブラウザのこと
webシステムを利用するためのプログラム
サーバーとの橋渡し
###クライアントプログラム
ブラウザで十分に機能を活かせない場合はクライアントプログラムが用意される
例) スマホ向けFaceBook, twitter, ２ちゃんねる
専用ブラウザとよばれる
###アプリケーションサーバー
３層アーキテクチャにおいては最も多機能なサーバー。
メモリ容量やCPU性能が重視される。
###セッション管理機能
クライアントごとに発行しログイン状況などを把握
ログインからログアウトまでを１セッション
###トランザクション管理機能
セッション中に行われる作業の最小単位
例) 宿泊予約 / それぞれが1トランザクション
・ログイン
・空室確認→１部屋減らす→予約者情報を追加→予約の確定
・ログアウト
##データベース管理システム
###DBMS
データの管理は、データベースの構造が複雑になったり、データ量が多くなると検索負荷が増える。
サーバー機器の性能が重要。データ消去への対策も必要。
###冗長化とデータの同期
保持するデータの保全は非常に重要。基本的に冗長化構成をとる。
(方法)
・ミラーリング：複数のDBに同時に同じ更新を行う。プリンシパル(トップの階級の意味)とミラー。
・レプリケーション：マスタからスレープに更新履歴を送る。スレープは
・シェアードディスク：サーバー(DBMS)と大元のデータストレージ(データベース)を分ける
→データベースは冗長化されないので強い機器を設置する
###キャッシュサーバー
リクエストに対するレスポンスを覚えておくこと
記憶 = キャッシュ
文書や画像→ コンテンツキャッシュ
検索要求の結果→ クエリキャッシュ
キャッシュには有効期限を設定し、新しい情報を記憶し直すようにする必要がある
###CDN
キャッシュサーバーの集合体。世界各地に設置されたコンテンツキャッシュサーバーで構成されるネットワーク。
あらかじめ(定期的に)大容量の画像と動画のキャッシュを取得しておき、CDNが最も近いサーバが対応するようにしレスポンスを早くする
###Ajax エイジャックス
同期通信の欠点を補うために登場
ブラウザ上で、クライアントサイド・スクリプトとして動く、Javaccriptが直接サーバーと通信を行い表示するHTMLを更新する
JavascriptはDOMを使って操作。データ量少なく負担が少ない
ブラウザ上で動くJavascriptが通信を行うため、非同期通信が可能。
例) Google検索のサジェスト機能(検索候補の表示), GoogleMapの地図表示
###Webプログラミング
プログラミング言語を使ってwebアプリケーションを開発すること
・サーバーサイド：効率的な手順、DBとのやり取りにSQL言語の知識が必要
・クライアントサイド：ブラウザごとの動作の違いを吸収する必要がある。スマホアプリ、デスクトップアプリの知識も必要。
###Web API
ユーザーではなくプログラムが直接サービスを利用する窓口
天気予報API、検索API、Twitter投稿APIなど
プログラム同士のやりとり
主流：XML-RPC, SOAP, REST
###マッシュアップ
複数のwebサービスを組み合わせて新たなwebサービスを生み出すこと
例) 位置情報から天気を取得その日に着る服を提案するサービス、位置情報から取得した特情報とレシピ情報から献立を提案する
※元のwebAPIが仕様変更に対応しないといけない、終了の場合は代わりを見つけないといけない
###CGI
リクエストに対し用意されたCGIプログラムが起動、webサーバー上で実行したときの結果を返信
APサーバー不要のため小規模な動的ページ作成に多く用いられる
webシステムのセキュリティ
情報セキュリティの３要素
・機密性：関係ない人は見れない
・安全性：破壊・改ざん・消去されない状態を確保
・可用性：必要なときにアクセスできる状態
頭文字をとって：CIA
何らかの損失が発生する可能性のことを、「リスク」と呼ぶ
リスクを現実化させる要因：脅威
脅威に対する弱み：脆弱性
実際に不正アクセスを受け、損失が現実化すること
→ リスクが顕在化する
###パスワードクラッキング
ユーザーのPWを盗もうとすること
主な手法
・辞職攻撃
・ブルーとフォース攻撃
###DoS攻撃
大量アクセスでサーバーを停止に陥らせる
主な手段
・SYN Flood攻撃
・F5攻撃
対策
不自然なアクセス増加を検知し、送信元のIPからのアクセスを遮断
###セッションハイジャック
cookieやセッションIDを取得しシステムを利用できるようにする
例) ネットワークの盗聴、脆弱性を突く
対策：通信の暗号化、異なるIPアドレスからの接続は強制ログアウトさせる など
###ディレクトリトラバーサル
階層の指定から公開されていないディレクトリにアクセス
webサーバー自体のログインパスワードを取得する方法
###XSS:クロスサイトスクリプティング
→リンクを踏ませ悪意のあるスクリプトを自動的に書き込んでしまうようにする
###CSRF:クロスサイトリクエストフォージェリ
→リンクを踏ませパスワードの変更など意図しない操作を行う。人間の手によるアクセスかどうかを判別し対策する。
###SQLインジェクション
→ DBに正しいと誤解させてログインをする方法
##webシステムの脆弱性
###セキュリティホール
権限を持たないユーザーに実行されてしまう、見えるべきでない情報が第三者に見えてしまう
どのようなシステムにも脆弱性は残ってしまう
脆弱性情報データベースで管理され、一般公開されている。
修正プログラムで被害の拡散を防ぐ。
###ゼロデイ攻撃
修正プログラムが開発される前に攻撃すること
対策：不要なソフトはインストールしないようにする
###ファイアーウォール
送受信されるデータを監視して通信の許可と拒否を行うもの
###パケットフィルタ型ファイアーウォール
送受信されるデータのIPアドレスなどから判断する
不要な通信を防ぐのがセキュリティの第一歩
社内：IPアドレスで制限
不特定多数：ポート番号で制限、手段を限定
###IDSとIPS
通信を監視し不正アクセスや異常通信を検知する装置
IDS：異常があったことをメールなどで通知するだけ
IPS：即座に通信の遮断を行う。誤検知でも遮断されてしまう。
シグネチャ型：不正検知型。既知の登録された攻撃パターンと一致するものを不正アクセスと判断する。
アノマリー型：普段の通信と大きく異なるもの通常発生しないものを不正アクセスとして検知する。アクセス量が急増するF5攻撃も検知できる。
###WAF：やりとりされるパケットの中身を見て悪意のあるデータが含まれていないかをチェック
→セキュリティ効果もが高いが機器自体も高価で運用コストもかかる。必要かどうかをよく検討する。
ブラックリスト型
WAFの開発元が提供するものを利用。新たな攻撃手法は追加されるまで対応できない。自分で編集することは可能。
ホワイトリスト型
正常パターンを登録。正確なホワイトリストの作成に専門性が必要。WAFの運用にコストがかかってしまいがち。
###暗号化とは
平文(データ)を暗号化アルゴリズムで読み取れない暗号文にすること
暗号を平文に戻すことを復号と呼ぶ。
通信経路自体を暗号化しておくことで盗聴が成功したとしても読み取れず被害が出ない。
保存データの暗号化
サーバーへの侵入で簡単に取得できてしまう。
保存の際に暗号化し、使うときに複合する
###ハッシュ化
ハッシュ関数によって固定長の文字列に変換して保存。ハッシュ値の長さは関数の種類によって変わる。
送られてきたパスワードが保存されているハッシュ値と同じかどうかで正しいか判断する。
ハッシュ値からもとの文字列を割り出すことは困難
###公開鍵証明書
アクセスしているwebサイトが本物かどうかを証明するもの
SSL証明書とも言う。SSL通信の公開鍵に使われることが多く、
役割は２つ
・持ち主が誰か
・持ち主が実在するか
認証局という第３者期間が発行。偽造にも強く身分証明書のような役割。
###自己証明書
自分で自分を証明。オレオレ証明書。暗号化通信ができることの証明。
身内で試験的に発行する。
公開鍵証明書を発行するには費用と時間がかかるので。それまでの間。
###認証
ログインなどの本人確認処理
google, facebook, twitter のアカウント情報を使う技術が開発され負担が減った。
個人情報を管理ぜずに会員サイトを運用できる。
認証API：アプリごとに対応が必要。
OpenID：認証処理を標準化したプロトコル。複数の企業が提供する認証サービスを同じ手順で使えるようにしたもの。
###認可
ユーザーごとの権限に従って利用できるサービスの許可を行うこと
###OAuth オーオース
サイトをまたいだ認可を実現するために標準化されたプロトコル
認可のみで認証は行わない
利用したいサービスをリソースと呼ぶ。トークンを発行して利用できるようにする
例)facebookに上げた投稿をtwitterにも流す。
facebookからtwitterにトークンを要求、twitterがトークンを発行、トークンを掲示してTwitterに同様の内容の投稿を行う
この場合、Twitterがリソース。
###OpenID Connect
OAuth2.0をベースに認証機能が追加されたプロトコル
多くのサイトが移行を進めている
###CAPTCHA
webサービスの悪用を防ぐために考案されたもの
コンピューターと人間を区別するためのテストの意味
例)歪んだ文字の読み取り、複数の画像から犬だけを選ぶ、簡単なパズル