Zenn
🐕

URLをブラウザに入れると表示される仕組み

2021/06/29に公開
DNS
http
idea

簡単な説明

  1. クライアントのPCからドメインに紐づいたIPアドレスを持つWebブラウザにHTTPリクエストが送信される
  2. Webサーバーはクライアントに対してHTTPレスポンスを返す
  3. 返ってきたレスポンスボディのHTMLがブラウザに描写される

詳細な説明

DNSサーバーとの通信

https://sample.com

httpsは通信のプロトコルを表しており,sample.comの部分はドメインと呼ばれる。インターネットではIPアドレスを用いて通信が行われるため、クライアントとDNSサーバーのリゾルバーが通信を行いIPアドレスを特定する。（名前解決）

HTTPリクエスト

GET /sample.html HTTP/1.1 
Host: localhost:8080
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36Chrome/54.0.2840.98 Safari/537.36
Accept: */*
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: ja,en-US;q=0.8,en;q=0.6

リクエストライン

一行目のリクエストラインではHTTPのメソッドやHTTPのバージョン、メソッドが記述される。

リクエストヘッダ

二行目以降のリクエストヘッダでは、自信のブラウザの情報などが記述される。

リクエストボディ

POSTメソッドの場合はリクエストボディに送信するデータが格納されるがGETメソッドの場合はクエリストリングという形でヘッダーのURL部分にデータが格納されるためリクエストボディは存在しない。（例:http://example.com/hoge=hoge ）


クエリストリングはブラウザのキャッシュだけではなく、サーバー側のアクセスログにも残ってしまうため機密情報を扱うべきではない。

HTTPレスポンス

HTTP/1.1 200 OK
Accept-Ranges: bytes
Content-Length: 538
Content-Type: text/html
Date: Tue, 29 Jun 2021 12:02:30 GMT
ETag: "21a-59f8969af8600"
Last-Modified: Thu, 27 Feb 2020 07:10:16 GMT
Server: Apache

<!DOCTYPE html>
...

ステータスライン

一行目のステータスラインではHTTPのバージョンやステータスコードが記述される。

レスポンスヘッダー

二行目から空行までのレスポンスヘッダーではWebサーバーの種類やMIMEタイプ（ブラウザとWebサーバー間でやりとりされるデータの形式）などの情報が含まれる。

レスポンスボディ

htmlや画像が含まれる。これがブラウザで描写されることでwebサイトを見ることができる。

Discussion