駆け出しエンジニアでも絶対に知っておきたい技術用語7選

#はじめに
最近[イラスト図解式 この一冊で全部わかるWeb技術の基本](https://www.amazon.co.jp/イラスト図解式-この一冊で全部わかるWeb技術の基本-小林-恭平/dp/4797388811)を呼んだのですが、現役エンジニアにとってはあたりまえでも、駆け出しの方は見落としてしまいがちな技術用語が網羅されていたのでまとめていきたいと思います。

#目次
[1.HTTPリクエスト](#httpリクエストレスポンス)
[2.HTTPレスポンス](#httpリクエストレスポンス)
[3.HTTPメソッド](#httpメソッド)
[4.HTTPレスポンスステータスコード](#httpレスポンスステータスコード)
[5.SQLインジェクション](#sqlインジェクション)
[6.CSRF（クロスサイトリクエストフォージェリ）](#csrfクロスサイトリクエストフォージェリ)
[7.XSS（クロスサイトスクリプティング）](#xssクロスサイトスクリプティング)

#HTTPリクエスト／レスポンス
私たちがPCやスマホでWEBページを閲覧しようとする際にはHTTP通信が行われています。
この通信方式は非常にシンプルで、クライアントであるWEBブラウザが要求を送り、サーバーであるWEBサーバーがその要求に対して応答を返すという単純なやりとりになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/ef236412-ea74-6607-293c-a37022ea66da.png)
クラインアントがサーバーに対して行う要求を**HTTPリクエスト**、サーバーがクライアントの要求に対して返す応答を**HTTPレスポンス**といいます。
HTTPリクエストとHTTPレスポンスはそれぞれ**HTTPメッセージ**というデータ形式でやり取りされています。具体的には下図のような形式になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/fdcb76cd-5e46-69d9-b365-0aec2e55266b.png)

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

HTTPレスポンス|　説明
---|---
①ステータス行|WEBブラウザにWEBサーバー内での処理の結果を伝える
②メッセージヘッダー|WEBサーバーの情報、返信するデータのタイプ、データの圧縮方法等の情報を伝える
②空白行|空白を1行空けることでメッセージヘッダーの終わりを示す
②メッセージボディ|HTMLファイルや画像データを格納する場所
#HTTPメソッド
HTTPリクエストを用いてWEBサーバーに具体的な要求の内容を伝えているのが、HTTPリクエストのリクエスト行に含まれる`GET`や`POST`等のメッセージです。これらを**HTTPメソッド**と呼びます。具体的には以下の9つのメソッドが用意されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/8ff71f9f-4393-40a9-d826-167389f287c5.png)

メソッド名|説明
---|---
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の違いって何？](https://qiita.com/cryptobox/items/235a0c5fc872d5757423)

#HTTPレスポンスステータスコード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/6dbfafb6-9d20-f6ce-37d9-c6cc968ca880.png)
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レスポンスとしてこのコードが渡されるということになります。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/95a619c3-7da6-36d5-563a-3e705d0ca8b6.png)

#SQLインジェクション
SQLインジェクションとは、悪意ある第三者がサイトの検索フォーム等に不正なSQLの命令文を入力することで、データベース内の個人情報を盗み出したり、改ざんしたりする攻撃方法のことです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/3436673e-36e4-86e0-3e93-29a98485edab.png)
インジェクションとは`注入（inject）`という意味で、不正な命令をWEBサイトのフォームに注入する意味合いから名付けられています。
##事例

* 機密情報・個人情報の漏洩　→　[米国のPlayStationサイトにSQLインジェクション攻撃](https://xtech.nikkei.com/it/article/NEWS/20080703/310047/)
* ウェブサイトの改ざん　→　[OZmallへの不正アクセスの手口は「SQLインジェクション」](https://xtech.nikkei.com/it/free/ITPro/NEWS/20050531/161856/)

##対策

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

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

**③脆弱性診断サービスでチェック**
セキュリティマネジメントサービスを提供している会社に依頼し、サイトに潜む脆弱性を発見します。第三者に診断してもらうことで、セキュリティの抜け穴を塞ぎます。
 
#CSRF（クロスサイトリクエストフォージェリ）
CSRFとはWebアプリケーションのセッション管理における脆弱性、もしくはその脆弱性を利用した攻撃方法のことです。

具体例はWikipediaの記事が分かりやすかったので、引用しイラスト化して説明します。
>参考：https://ja.wikipedia.org/wiki/クロスサイトリクエストフォージェリ

今あるユーザーALICEが自身の口座からBOBという別のユーザの口座に100ドルをネットバンクから送金したいとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/86c402af-c610-7186-13d2-660dc75506e7.png)
ALICEはネットバンクにログインし、送金依頼を行います。その際、
GET http\://bank.com/transfer.do?acct=<font color="Red">BOB</font>&amount=<font color="Red">100</font> HTTP/1.1
というHTTPリクエストが銀行のWebサイトに向かって送信されるものとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/d5bb0960-6f04-dca6-894e-14f5bab3eb0e.png)
このとき悪意ある第三者であるMARIAは
http\://bank.com/transfer.do?acct=<font color="Red">MARIA</font>&amount=<font color="Red">10000</font> HTTP/1.1
というURLを公開掲示板に張ったり、不特定多数にメールしたりします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/894e0ab0-8311-ce36-5a4e-c63365927f2c.png)
銀行のユーザALICEがこのURLをクリックしてしまうと、ALICEのブラウザから
GET http\://bank.com/transfer.do?acct=<font color="Red">MARIA</font>&amount=<font color="Red">10000</font> HTTP/1.1
というHTTPリクエストが銀行に向かって送信されてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/c2bcae13-9a95-1158-339e-40dc23b08161.png)
たまたまALICEが銀行にログインしていたら、銀行のサーバはこのリクエストを送金要求だと解釈してしまい、ALICEの口座からMARIAの口座に一万ドルが不正送金されてしまいます。

##事例
* 意図しないコードの実行　→　 [「ぼくはまちちゃん」 騒動](https://www.itmedia.co.jp/enterprise/articles/0504/23/news005.html)
* なりすまし　→　[パソコン遠隔操作事件](https://ja.wikipedia.org/wiki/パソコン遠隔操作事件)
* データの漏洩

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

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

#XSS（クロスサイトスクリプティング）
XSSとはユーザーの情報入力によって動的にページを生成するWebアプリケーションに存在する脆弱性、もしくはその脆弱性を利用した攻撃方法のことです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612354/40514fb4-28dc-8738-0288-caa47f739509.png)
攻撃の流れは以下になります。

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


##事例
* 意図しないコードの実行　→　[Twitterの“XSS騒動”はどのように広まったか](https://www.itmedia.co.jp/news/articles/1009/24/news023.html)
* データの改ざん　→　[KADOKAWAのWebサイト改ざんが判明](https://xtech.nikkei.com/it/article/NEWS/20140117/530515/)
* 機密情報・個人情報の漏洩

##対策
**①エスケープ処理**
< や > や " などの特殊記号を `&lt;` `&gt;` `&quot;` のようにエスケープすることで攻撃を防ぎます。

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

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

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

#参考
全体

* [イラスト図解式 この一冊で全部わかるWeb技術の基本](https://www.amazon.co.jp/イラスト図解式-この一冊で全部わかるWeb技術の基本-小林-恭平/dp/4797388811)

HTTP

* [HTTP リクエストメソッド](https://developer.mozilla.org/ja/docs/Web/HTTP/Methods)
* [HTTP レスポンスステータスコード](https://developer.mozilla.org/ja/docs/Web/HTTP/Status)
* [RFC 7231](https://tools.ietf.org/html/rfc7231#section-6.5.1)

セキュリティ

* [駆け出しエンジニアの皆さんに知ってほしい脆弱性のこと。](https://zenn.dev/ad5/articles/5e4e67c9663e4e0d0cb0)
* [3分でわかるXSSとCSRFの違い](https://qiita.com/wanko5296/items/142b5b82485b0196a2da)
* [【初心者向け】SQLインジェクションの概要と対策方法](https://www.kagoya.jp/howto/network/sql-injection/)
* [SQLインジェクション](https://ja.wikipedia.org/wiki/SQLインジェクション)
* [CSRF（クロスサイトリクエストフォージェリ）の意味とその対策](https://www.shadan-kun.com/blog/measure/2640/)
* [クロスサイトリクエストフォージェリ](https://ja.wikipedia.org/wiki/クロスサイトリクエストフォージェリ)
*  [クロスサイトスクリプティング](https://ja.wikipedia.org/wiki/クロスサイトスクリプティング)