はじめに

最近イラスト図解式この一冊で全部わかるWeb技術の基本を呼んだのですが、現役エンジニアにとってはあたりまえでも、駆け出しの方は見落としてしまいがちな技術用語が網羅されていたのでまとめていきたいと思います。

目次

1.HTTPリクエスト
 2.HTTPレスポンス
 3.HTTPメソッド
 4.HTTPレスポンスステータスコード
 5.SQLインジェクション
 6.CSRF（クロスサイトリクエストフォージェリ）
7.XSS（クロスサイトスクリプティング）

HTTPリクエスト／レスポンス

私たちがPCやスマホでWEBページを閲覧しようとする際にはHTTP通信が行われています。
この通信方式は非常にシンプルで、クライアントであるWEBブラウザが要求を送り、サーバーであるWEBサーバーがその要求に対して応答を返すという単純なやりとりになります。

クラインアントがサーバーに対して行う要求をHTTPリクエスト、サーバーがクライアントの要求に対して返す応答をHTTPレスポンスといいます。
HTTPリクエストとHTTPレスポンスはそれぞれHTTPメッセージというデータ形式でやり取りされています。具体的には下図のような形式になります。

HTTPリクエスト	説明
①リクエスト行	WEBサーバーに対してどのような処理をするのか伝える情報が記述してある
②メッセージヘッダー	WEBブラウザの情報、対応しているデータタイプ、データの圧縮方法、言語等の情報を伝える
②空白行	空白を1行空けることでメッセージヘッダーの終わりを示す
②メッセージボディ	WEBサーバにデータを送るために使われるが、空の場合もある

HTTPレスポンス	説明
①ステータス行	WEBブラウザにWEBサーバー内での処理の結果を伝える
②メッセージヘッダー	WEBサーバーの情報、返信するデータのタイプ、データの圧縮方法等の情報を伝える
②空白行	空白を1行空けることでメッセージヘッダーの終わりを示す
②メッセージボディ	HTMLファイルや画像データを格納する場所

HTTPメソッド

HTTPリクエストを用いてWEBサーバーに具体的な要求の内容を伝えているのが、HTTPリクエストのリクエスト行に含まれるGETやPOST等のメッセージです。これらをHTTPメソッドと呼びます。具体的には以下の9つのメソッドが用意されています。

メソッド名	説明
GET	GETメソッドは、指定したリソースの表現をリクエストします。 GET を使用するリクエストは、データの取り込みに限ります
HEAD	HEADメソッドはGETリクエストと同じレスポンスを求めますが、レスポンス本文はありません
POST	POSTは指定したリソースに実体を送信するために使用するメソッドであり、サーバー上の状態を変更したり、副作用が発生したりすることがよくあります
PUT	PUTメソッドは対象リソースの現在の表現の全体を、リクエストのペイロードで置き換えます
DELETE	DELETEメソッドは、指定したリソースを削除します。
CONNECT	CONNECTメソッドは、対象リソースで識別されるサーバーとの間にトンネルを確立します
OPTIONS	OPTIONSメソッドは、対象リソースの通信オプションを示すために使用します
TRACE	TRACEメソッドは、対象リソースへのパスに沿ってメッセージのループバックテストを実行します
PATHCH	PATCHメソッドは、リソースを部分的に変更するために使用します

引用元： https://developer.mozilla.org/ja/docs/Web/HTTP/Methods

初心者にはいまいちピンと来ないかもしれません。ですが安心してください。特に覚えておきたいメソッドはCRUDの機能を有するGET,POST,PUT,PATCH,DELETEの５つだけで、ざっくりとした説明は以下になります。

機能	メソッド名	説明
Create	POST	データを生成する
Read	GET, POST	データを読み取る
Update	PUT, PATCH	データを更新する
Delete	DELETE	データを削除する

GETとPOSTの違い

GETとPOSTは似たような処理を行うメソッドですが、細かな違いがあります。

**GET:**サーバーに値を渡す方法のひとつで、「値をURLにくっつけて送る」方法。
**POST:**サーバーに値を渡す方法のひとつで、「値を見えないところ（メッセージボディ）にくっつけて送る」方法。

参考： https://wa3.i-3-i.info/diff7method.html

使い分けに関してですが、すみません、調べても明確にはわかりませんでした。ただひとつ言えることはPOSTメソッドは値を見えないところに格納していますが、だからと言って安全というわけではないということです。HTTP通信そのものを暗号化しなければ、メッセージボディは第三者から簡単に読み取られてしまうからです。

詳しくはコチラ：【初心者向け】HTTPとHTTPSの違いって何？

HTTPレスポンスステータスコード

HTTPレスポンスステータスコードは、特定のHTTPリクエストが正常に完了したかどうかを示し、下記5つのクラスに分類されています。

ステータスコード	内容	例
情報レスポンス（100-199）	リクエストは受け取られ、処理は継続される	102-Processing
成功レスポンス（200-299）	リクエストは受け取られ、理解され、処理された	200-OK, 201-Created
リダイレクト（300-399）	リクエストを完了させるために追加的な処理が必要	300-Multiple Choices
クライアントエラー（400-499）	クライアントからのリクエストに誤りがあった	400-Bad Request, 404-Not Found
サーバーエラー（500-599）	サーバーがリクエストの処理に失敗した	500-Internal Server Error, 503-Service Temporarily Unavailable

参考：
https://developer.mozilla.org/ja/docs/Web/HTTP/Status
https://tools.ietf.org/html/rfc7231#section-6.5.1

404-Not Foundはよく見たことがあるのではないでしょうか？ページが存在しないにもかかわらず、リクエストするとHTTPレスポンスとしてこのコードが渡されるということになります。

エラー画面はユーザーにストレスを与えてしまうため、かわいい絵やゆるいイラストを表示するサイトも存在します。下図はマイニンテンドーストアのサーバーが混雑し繋がりにくくなったときの画面です。ニンテンドーとは特に関係ない恐竜ですが、かわいくて和みますね。

SQLインジェクション

SQLインジェクションとは、悪意ある第三者がサイトの検索フォーム等に不正なSQLの命令文を入力することで、データベース内の個人情報を盗み出したり、改ざんしたりする攻撃方法のことです。

インジェクションとは注入（inject）という意味で、不正な命令をWEBサイトのフォームに注入する意味合いから名付けられています。

事例

機密情報・個人情報の漏洩　→　米国のPlayStationサイトにSQLインジェクション攻撃
ウェブサイトの改ざん　→　OZmallへの不正アクセスの手口は「SQLインジェクション」

対策

①エスケープ処理
入力された文字列をSQL命令文と認識されないように、引用符やセミコロンをエスケープすることで対処します。

② WAFの導入
WAF（ワフ）とはWeb Application Firewallの略語です。Webサーバーの前面に配置し通信を解析することで、Webアプリケーションの脆弱性を突いた悪意ある命令を遮断するサービスで、これを導入することでWebサイト全体のセキュリティを高めることができます。

③脆弱性診断サービスでチェック
セキュリティマネジメントサービスを提供している会社に依頼し、サイトに潜む脆弱性を発見します。第三者に診断してもらうことで、セキュリティの抜け穴を塞ぎます。

CSRF（クロスサイトリクエストフォージェリ）

CSRFとはWebアプリケーションのセッション管理における脆弱性、もしくはその脆弱性を利用した攻撃方法のことです。

具体例はWikipediaの記事が分かりやすかったので、引用しイラスト化して説明します。

参考：https://ja.wikipedia.org/wiki/クロスサイトリクエストフォージェリ

今あるユーザーALICEが自身の口座からBOBという別のユーザの口座に100ドルをネットバンクから送金したいとします。

ALICEはネットバンクにログインし、送金依頼を行います。その際、
GET http://bank.com/transfer.do?acct=BOB&amount=100 HTTP/1.1
というHTTPリクエストが銀行のWebサイトに向かって送信されるものとします。

このとき悪意ある第三者であるMARIAは
http://bank.com/transfer.do?acct=MARIA&amount=10000 HTTP/1.1
というURLを公開掲示板に張ったり、不特定多数にメールしたりします。

銀行のユーザALICEがこのURLをクリックしてしまうと、ALICEのブラウザから
GET http://bank.com/transfer.do?acct=MARIA&amount=10000 HTTP/1.1
というHTTPリクエストが銀行に向かって送信されてしまいます。

たまたまALICEが銀行にログインしていたら、銀行のサーバはこのリクエストを送金要求だと解釈してしまい、ALICEの口座からMARIAの口座に一万ドルが不正送金されてしまいます。

事例

意図しないコードの実行　→　「ぼくはまちちゃん」騒動
なりすまし　→　パソコン遠隔操作事件
データの漏洩

対策

①暗号論的疑似乱数を用いた情報の照合処理
フォームの送信前のページでワンタイムトークンを発行し、セッションに格納します。HTTPリクエストで送られてきたトークンとセッションに格納されたトークンが一致するかを確認し、本人確認を行う手法です。

②画像化した文字列を入力させるキャプチャ機能を実装
「画像で表示されている文字を入力してください」のやつです。

XSS（クロスサイトスクリプティング）

XSSとはユーザーの情報入力によって動的にページを生成するWebアプリケーションに存在する脆弱性、もしくはその脆弱性を利用した攻撃方法のことです。

攻撃の流れは以下になります。

悪意のあるスクリプトを自動的に書き込んでしまうリンクを表示する
悪意のあるサイトの①のリンクにアクセスする
悪意のあるスクリプトを掲示板に書き込むクライアントサイド・スクリプトが実行される
意図せず悪意のあるスクリプトを書き込んでしまう
ユーザーから送信された書き込み内容をそのまま表示
掲示板に表示された悪意のあるスクリプトがそのまま実行される

事例

意図しないコードの実行　→　Twitterの“XSS騒動”はどのように広まったか
データの改ざん　→　KADOKAWAのWebサイト改ざんが判明
機密情報・個人情報の漏洩

対策

①エスケープ処理
< や > や " などの特殊記号を < > " のようにエスケープすることで攻撃を防ぎます。

②入力値の制限
電話番号などの入力欄で、数字以外は入力できないようにすることで対策することができます。

③WAFの導入
SQLインジェクションの対策と同様です。

おわりに

長々と書いてしまいましたが、わかりにくいところや間違っているところがあればコメントで指摘してくださると幸いですm(_ _)m

参考

全体

イラスト図解式この一冊で全部わかるWeb技術の基本

HTTP

セキュリティ