げんきちの秘密基地

エンジニアリングが世の中の思いを実現してきた歴史に気づき、29歳未経験からWEBエンジニアとして転生！【Danger】綺麗事を割と本気で言ってきます【GitHub】https://github.com/0840kg【Twitter】https://twitter.com/0840kg

図解（？）通信アーキテクチャ入門　その３

ぞす！げんきちです！＼＼\\٩( 'ω' )و //／／

 

「いや、誰だよ」って方は、下記リンクを見てやってください。

  1. はじめまして！げんきちです！ - げんきちの秘密基地

  2. 僕がエンジニアになりたい理由 - げんきちの秘密基地

目次〜

f:id:Genkichi:20190306201919j:plain

 

前回、前々回の続きです！

genkichi.hateblo.jp

genkichi.hateblo.jp

全体像

 

f:id:Genkichi:20190307184818j:plain

HTTPとは

WEBページやページ内で必要なCSS, JavaScript、画像などのファイルをWEBサーバにリクエストするためのフォーマットのこと。

 

HTTPの仕組み

f:id:Genkichi:20190305105230p:plain

ターミナルで、HTTPリクエストを行い、HTTPレスポンスを取得。

curl https://www.google.co.jp/ --verbose

 

結果です。

* Could not resolve host: www.google.co.jp
* Closing connection 0
curl: (6) Could not resolve host: www.google.co.jp
kitamuragenkinoMacBook-Pro:chat-space kitamuragenki$ curl https://www.google.co.jp/ --verbose
*   Trying 172.217.161.227...
* TCP_NODELAY set
* Connected to www.google.co.jp (172.217.161.227) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* Cipher selection: ALL:!EXPORT:!EXPORT40:!EXPORT56:!aNULL:!LOW:!RC4:@STRENGTH
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/cert.pem
  CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Client hello (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-ECDSA-CHACHA20-POLY1305
* ALPN, server accepted to use h2
* Server certificate:
*  subject: C=US; ST=California; L=Mountain View; O=Google LLC; CN=*.google.com
*  start date: Mar  1 09:43:57 2019 GMT
*  expire date: May 24 09:25:00 2019 GMT
*  subjectAltName: host "www.google.co.jp" matched cert's "*.google.co.jp"
*  issuer: C=US; O=Google Trust Services; CN=Google Internet Authority G3
*  SSL certificate verify ok.
* Using HTTP2, server supports multi-use
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
* Using Stream ID: 1 (easy handle 0x7f8a84000000)
> GET / HTTP/2
> Host: www.google.co.jp
> User-Agent: curl/7.54.0
> Accept: */*
> 
* Connection state changed (MAX_CONCURRENT_STREAMS updated)!
< HTTP/2 200 OK
< date: Tue, 05 Mar 2019 01:53:09 GMT
< expires: -1
< cache-control: private, max-age=0
< content-type: text/html; charset=Shift_JIS
< p3p: CP="This is not a P3P policy! See g.co/p3phelp for more info."
< server: gws
< x-xss-protection: 1; mode=block
< x-frame-options: SAMEORIGIN
< set-cookie: 1P_JAR=2019-03-05-01; expires=Thu, 04-Apr-2019 01:53:09 GMT; path=/; domain=.google.co.jp
< set-cookie: NID=178=s0t4B9OjvsVCE72DgV0Ka3r3mjkvp2B2HH-FidEoOnRPMcsibROuY-v6FCC5lZRv0Bl9a9T63HaildNYSD9x5dbMBdd0WIhOMqZGH43W2qYg-WrgZQzS9dk2BP_foYMsDBGxgLoE7fYagpkRVZZtUZgQG3Vafe5jE_dB_DLDKTM; expires=Wed, 04-Sep-2019 01:53:09 GMT; path=/; domain=.google.co.jp; HttpOnly
< alt-svc: quic=":443"; ma=2592000; v="44,43,39"
< accept-ranges: none
< vary: Accept-Encoding
< 
<!doctype html><html itemscope="" itemtype="http://schema.org/WebPage" lang="ja"><head>

#中略

行頭が「*」 =>SSL通信など。

行頭が「>」=>HTTPリクエスト。

行頭が「<」=>HTTPレスポンス。
 

HTTPリクエストの構成

  • リクエスト行
  • リクエスト・ヘッダ
  • ボディ部 

リクエスト行とは

HTTPメソッド 、 URI 、 HTTPバージョン で構成される行。

> GET / HTTP/2

f:id:Genkichi:20190305113855p:plain 

HTTPメソッドとは

サーバ側にやってほしい処理を伝えるもの。

GET　　  URIで指定したリソースを取得する。

POST　   クライアントからサーバに（キーバリューペアの）データを送信する。

PUT　　  データを送信し、URIで指定したサーバ上のリソースと置き換える。

PATCH　  PUTと同様にデータを置き換えるが、差分のみ変更する。

#rails3まではputが広く使われいたが、rails4からはpatchに移行している。

DELETE　URIで指定したサーバ上のリソースを削除する。

 

URIとは

Webサーバ上のリソース（ファイル）の在り処を示したもの。

URLからプロトコル部やホスト部を取り除いたもの。

 

URLとは

f:id:Genkichi:20190306195505j:plain

www.tokumaru.org

 

もう少し細かく分けると...

f:id:Genkichi:20190306195642j:plain

 

HTTPバージョンとは

HTTP（フォーマット）のバージョン。

 

リクエスト・ヘッダとは

> Host: www.google.co.jp
> User-Agent: curl/7.54.0
> Accept: */*

HTTPリクエストを送るときの付加情報が含まれる。

body部で足りない情報がメタ情報として記述される。

ここでいうメタ情報とは、「データに対する補足情報」のこと。

これらの情報は、キーバリューペアで送信される。

HOST情報やUser-Agent、cookieなどが代表的。

 

Host情報とは

URLのホスト部の情報。

 

User-Agentとは

インターネットするときにくっつく名札のようなもの。

ウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のこと。

 

cookieとは

WebサーバがWebブラウザに渡すメモのようなもの。

HPを訪問したユーザーの情報を一時的の保存する仕組み、またはそのデータ。

ID、パスワード、メールアドレス、訪問回数などがユーザー情報として保存される。

 

cookieの役割 

Webサイトが将来必要とするだろうユーザーの情報を、スマホやPC内にあらかじめ置いておくこと。

これによって再訪問したときにユーザーを特定し、情報を入力する手間が省けます。

 

例）

・IDとパスワードを入力して一度ログインしたサイトに、しばらくしてからもう一度アクセスするとIDとパスワードを入力しないでもすんなり入れるようにすること。

 

・買い物をしている途中で、商品をカートに入れたままログアウトしたショッピングサイトに、しばらくしてからもう一度アクセスすると、カートの中の品物が消えずにしっかり残っているようにすること。

 

cookieの保存場所 

Macの場合

Users/ユーザー名/Library/Application Support/Google/Chrome/Default

 

cookieの注意点

まず、cookieはそれをつくったWebサイトだけが読み込める仕組みになっているので、cookieが不正に盗まれて流用されたりする危険は原理的にはない。

 

しかし...

 

注意　：cookieを有効にしていないと、うまくWebサイトが表示されなかったり、買い物ができなかったりという不便が生じる。

解決策：cookieを有効に設定する。

 

注意　：　他人にデバイスを盗まれたら勝手に買い物などをされてしまう。

解決策：デバイスにロックをかける。

 

注意　：漫画喫茶や学校など、共有のPCでIDとパスワードを使ってWebサイトにログインした場合、cookieが残っていると次に使った第三者に不正利用されてしまう。

解決策：PCを使い終わったら、すぐにcookieを削除してしまう。

 

キャッシュとcookieの違い

クッキー：会員証のような役割。次にアクセスしたときに「前はこれをやったね。次はこれ」と表示内容を個人に合わせて変えることができる。

 

キャッシュ：ブラウザなどが、ウェブページの画像やデザイン情報を一時保管⇒次に同じページにアクセスしたときにサクッと表示してくれる仕組み。

 

ボディ部とは

POST/PUT/PATCHを使い、ブラウザからサーバに情報を送信するときには、ボディ部に情報が埋め込まれる。

 

HTTPレスポンスの構成

  • ステータス行
  • レスポンス・ヘッダ
  • ボディ部

 

ステータス行とは

HTTPバージョン 、 ステータスコード 、 説明句 で構成される行。

< HTTP/2 200 OK

 

ステータスコードとは

サーバからのレスポンスの意味を表現する3桁のコードのこと。

 

1xx

Informational 情報

リクエストは受け取られた。処理は継続される。

 

2xx

Success 成功

リクエストは受け取られ、理解され、受理された。

 

3xx

Redirection リダイレクション

リクエスト完了のために、追加的な処理が必要。

 

4xx

Client Error クライアントエラー

クライアントからのリクエストに誤りがあった。

 

5xx

Server Error サーバエラー 

サーバがリクエストの処理に失敗した。

 

説明句とは

ステータスコードの意味を説明する句。

 

200 OK

成功しました。

 

304 Not Modified

更新されていません。

 

404 Not Found
見つかりません。 

 

500 Internal Server Error

サーバーで予期しないエラーが発生しました。

www.tohoho-web.com

レスポンス・ヘッダとは

< date: Tue, 05 Mar 2019 01:53:09 GMT
< expires: -1
< cache-control: private, max-age=0
< content-type: text/html; charset=Shift_JIS
< p3p: CP="This is not a P3P policy! See g.co/p3phelp for more info."
< server: gws
< x-xss-protection: 1; mode=block
< x-frame-options: SAMEORIGIN
< set-cookie: 1P_JAR=2019-03-05-01; expires=Thu, 04-Apr-2019 01:53:09 GMT; path=/; domain=.google.co.jp
< set-cookie: NID=178=s0t4B9OjvsVCE72DgV0Ka3r3mjkvp2B2HH-FidEoOnRPMcsibROuY-v6FCC5lZRv0Bl9a9T63HaildNYSD9x5dbMBdd0WIhOMqZGH43W2qYg-WrgZQzS9dk2BP_foYMsDBGxgLoE7fYagpkRVZZtUZgQG3Vafe5jE_dB_DLDKTM; expires=Wed, 04-Sep-2019 01:53:09 GMT; path=/; domain=.google.co.jp; HttpOnly
< alt-svc: quic=":443"; ma=2592000; v="44,43,39"
< accept-ranges: none
< vary: Accept-Encoding

HTTPレスポンスを送るときの付加情報が含まれる。

body部で足りない情報がメタ情報として記述される。

ここでいうメタ情報とは、「データに対する補足情報」のこと。

これらの情報は、キーバリューペアで送信される。

 

以下、基本事項を抽出しました。

 

Content-Typeとは

ファイルの種類を示す情報を指定する項目。

HTMLに使用している文字コードを示すことで、文字化けや誤動作を回避する。

≒ MIMEタイプ

 

MIME（マイム）タイプとは

ファイルの種類を示す情報。

ファイルの分類/ファイルの種類で構成される。

 

例）text/html

 

P3Pとは

Platform for Privacy Preferencesの略。

サイト運営者が個人情報を保護しながら、ユーザーが自分の情報をどの程度Webサイトに提供するかをコントロールできるようにする技術仕様。

 

P3P導入の背景

例えば、cookieを使うとユーザーのアクセス情報を収集することができる。

米国ではこの情報を使った広告配信に対して訴訟が起こされたこともある。

結果、個人情報のコントロールをユーザー側に戻すことを目的にP3Pが導入された。

 

X-Content-Type-Options: nosniff,X-XSS-Protection: 1; mode=block,X-Frame-Options: SAMEORIGIN,X-XRDS-Location: ,

XXS等によってcookieなどが盗まれることを防ぐためのもの。

 

XXSとは

エンドユーザー側がWebページを制作することのできる動的サイト（例：TwitterなどのSNS、掲示板等）に対して、その脆弱性を利用して悪意のある攻撃者が制作した不正なスクリプトを挿入することによりその発生するサイバー攻撃。

 

cybersecurity-jp.com

Vary: Accept-Encoding,Expires: -1,Pragma: no-cache,Cache-Control:

キャッシュを残すためのもの。

 

weblabo.oscasierra.net

blog.redbox.ne.jp

 

ボディ部とは

<!doctype html><html itemscope="" itemtype="http://schema.org/WebPage" lang="ja"><head>

 

今回はGETリクエストに対して、レスポンス・ボディとしてHTMLが返っている。

 

次回予告

 

インターネットとは

 

・・・

長くなってきたので、続きはまた明日書きます... 🙇‍♂️

 

＜一日一新＞

タオピオミルクティーHOT。85℃ ...っ!??

 

＜学習進捗＞

学習開始からの期間 ：87日
今日までの合計時間：858h
今日までに到達すべき目標時間：793h
目標との解離：65h
「10,000時間」まで、

 

残り・・・「9,142時間！」

 

以上です。

読んでくれた方々、ありがとうございました！((_ _ (´ω｀ )ﾍﾟｺ。

genkichi.hateblo.jp

genkichi.hateblo.jp

 

f:id:www08056561815:20190224095507g:plain

twitter.com