フロントエンド技術を学ぼう 2-5.HTTPとネットワークについて学ぶ

<

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

www.mojage.club

第15回はPart II: Learning Front-End Devから、
5項の Learn HTTP/Networksを紹介します。

HTTPとネットワークについて学ぶの説明です。

Sponsored Link

HTTPとネットワークについて学ぶ

HTTP

ハイパーテキスト転送プロトコル(HTTP)は、ハイパーメディア情報システムの為の通信プロトコルです。HTTPはワールドワイドウェブのデータ通信の基盤です。 主にブラウザ - Webサーバ間でWebサイトにアクセスするときに使う通信プロトコルです。

参照元:英語版Wikipedia

URL

Image source:https://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1–net-31177

URL(Uniform Resource Locators)は、インターネット上のリソースを特定するための文字列です。 このURLを介してWeb通信が行われます。

HTTPリクエスト

URLはWebページなどが配置されている特定のホストの場所を示しますが、そのホスト上で実行したい操作がある場合はHTTPリクエストで指定します。

動詞 説明
GET 既存のリソースを取得。
POST 新しいリソースを作成。
PUT 既存のリソースを更新。
DELETE 既存のリソースを削除。
HTTPステータスコード

URLとHTTPリクエストを使用することで、クライアントはサーバへ要求を行うことができます。 要求を受け取ったサーバはステータスコードとメッセージペイロードで応答します。

ステータスコード 内容 説明
1xx 情報 暫定的なステータス。HTTP/1.0では無視される。
2xx 成功 リクエストが正常に処理されたことを通知するコード。一般的なコードは200
3xx リダイレクション リクエストを完了するためには、他のURL等を参照する必要がある。
4xx クライアントエラー クライアント側に問題があるとみなされた場合のコード。一般的な404 Not Foundはサーバ上に存在しないリソースを指定した時に返される。
5xx サーバエラー サーバ側の問題を示すコード。500 Internal Server Errorが一般的。
参照元
HTTPS

HTTPSはHTTPの安全なバージョンで、HTTPとTCPの間にTLS(Transport Layer Security)またはSSL(Secure Sockets Layer)と呼ばれるレイヤーを追加します。 HTTPSは既定でポート443を使用して通信します。 HTTPSを使用するには、動作中のデジタル証明書をサーバーに展開する必要があります。
現在TLS1.2が最新のバージョンですが、既にSSLという名称が広く使われているため、TLSのことも含めてSSLと呼ぶか、SSL/TLSの様に記載されることが多いです。

SSL/TLSの導入で回避できるリスク 内容
なりすまし サイトの運営者や、関係者等相手になりすますこと。 ECサイトなどに成りすますことで、個人情報を取得&悪用される。
盗聴 情報の送信元と送信先以外の第三者により、情報を盗み見られること。 注文情報などを盗聴され、個人情報を取得&悪用される。
改ざん 情報の送信元と送信先以外の第三者により、情報の内容を書き換えられること。 注文情報などを改ざんされ、注文数や配送先を変更される。
否認 自分の行った行為を否定するということ。 ユーザ側が注文内容に間違いがあると主張した場合、当該Webサイト経由で注文されたことが証明できない。
参照元
HTTP/2

昨今のWebサイトはコンテンツの形態も様々で、容量も大きくなっています。 しかし、HTTP/1.1ではプロトコルレベルでの制約が多いため、通信の仕組みを変えて高速化を行う必要が発生しました。 HTTP/2は従来のHTTPと互換性を保ちながら内部的な効率化がされています。

HTTP/2における主要な改善点 内容
シングルコネクション Webサイトを開く際にサーバに1度接続したら、閉じるまでこの状態が継続される。
マルチプレックス 1つの接続で複数のリクエストを同時に送信できる。
サーバープッシュ クライアントからのリクエストがなくても、サーバ側から追加リソースを送信できる。
優先順位づけ 依存関係を元に重みづけをリクエストごとに割り当て、優先順位の高いリソースを先に提供する。
バイナリ テキストデータをバイナリに変換して、サーバがパースを行うのに最適化された状態で処理が出来る。
ヘッダーの圧縮 HPACKという圧縮方式を利用し、オーバーヘッドを減らすことができる。
参照元
HTTP仕様
その他の情報リソース

CORS

CORS(Cross-Origin Resource Sharing)は、Webページ上のリソース(フォントなど)を、別のドメインから要求できるようにする仕組みです。 「HTTP アクセス制御」や「クロスドメインアクセス」とも呼ばれます。

参照元:英語版Wikipedia

XMLHttpRequest

CORSでクロスドメインアクセスを実現する為には、XMLHttpRequestを使用します。 XMLHttpRequestはブラウザ上でサーバーとHTTP通信を行うためのAPIであり、Ajaxの基幹技術です。 XMLに限ったものではなく、HTTPリクエストを投げてテキスト形式DOMノードでレスポンスを受け取る機能を持っています。 しかし、オリジン(スキーム、ドメイン、ポート)すべてが一致するURLとしか通信できません。 この制限により、JSONPより安全にサーバーと通信することができます。

CORS仕様
その他の情報リソース

WebSockets

WebSocketは、単一のTCP接続で全二重通信チャネルを提供するプロトコルです。WebSocketプロトコルは2011年にRFC 6455としてIETFによって標準化され、Web IDLのWebSocket APIはW3Cによって標準化されています。

WebSocketを利用することで、AjaxやCometより効率的にサーバとクライアント間の双方向通信ができるようになります。主な特徴としては、以下になります。

  • サーバとクライアント間の接続が確立すると、明示的に切断しない限りデータのやり取りを行える。
  • サーバとWebSocketで接続を確立しているすべてのクライアントはリアルタイムで同じデータを共有する。

参照元:英語版Wikipedia

その他の情報リソース