MIS.W 公式ブログ

早稲田大学公認、情報系創作サークル「早稲田大学経営情報学会」(MIS.W)の公式ブログです!

ブラウザでWebページが開かれるまで【新歓ブログリレー2020 14日目】

MIS.W 新歓ブログリレー

はじめに

新入生の皆さん、ご入学おめでとうございます。 MIS.W53代の プログラミング研究会会長の ミノエル(@minoeru_138) とSysAd係兼Web班班長のTsuzu(@Wp120_3238)です。

突然ですが皆さんは人生でリンクをクリックしてWebサイトに飛んだ事がありますか?例えばこのリンクをクリックすることでMIS.Wの公式ホームページを見る事が出来ます。ですがこのクリックしてから実際に表示されるまでに眼で見えないところで何が起きているかを考えたことはあるでしょうか?

このあたりの内容は大学で情報系の分野に進むと習う内容ではあるのですが、Webサーバを自分で開発するなどの際にも知っておくと良い知識だと思うので紹介したいと思います。 簡単のため一部説明を省略などしています。その他間違いなどあればコメントでご指摘ください。

基礎知識

便利な仕組みを知る前に一つ覚えておいたほうが良いことがあります。それは、通信機器の通信機能をいくつかのレイヤに分けたモデルです。このようなモデルは国際標準化機構(ISO)により策定されたOSI(Open System Interconnection)参照モデルや、TCP/IPと呼ばれるインターネット・プロトコル・スイートが存在します。それぞれの画像を以下に示します。

image of osi ref and tcp/ip

簡単に説明すると、人間とコンピュータが対話するアプリケーション層(L7-5)、データ転送の信頼性などを決めるトランスポート層(L4)、コンピュータやルータ間での通信を行うインターネット層(L3)、直接接続された機器間での通信を行うネットワークインターフェイス層(L2-1)に分かれています。

導入

インターネットに接続される際よく使われるのは大きく分けて4Gや5Gなどのモバイルデータ通信と、自宅のWi-Fiで利用する光回線ADSLの2つだと思いますが、今回は後者をメインで説明します。

今回はこのようなネットワーク構成で考えていきたいと思います。 ネットワークの構成図

皆さんが今お使いのブラウザは世界のどこかにあるWeb Serverから情報を得てWebページを表示しています。ですが、あなたのスマートフォンやPCはこれらのサーバには直接繋がっていません。あるリンクをクリックしたとき、実は多くのルータを経由してデータは転送されています。

このルータという装置は皆さんの家にもあると思います。多くの一般家庭ではWi-FiルータWi-Fiのアクセスポイントとルータを兼ねています。

自宅のネットワークでスマホやPCからインターネットに接続する際、まずルータにデータが転送されます。ネットワークにおけるデータの1単位をパケットと呼びます。

IPアドレスDNS

例えばこのブログを開くときおそらく、ブラウザの上のバーには blog.misw.jp と書かれているでしょう。これはドメインと呼びます。 しかし、実際のコンピュータ同士が直接このドメインを認識して通信することはできません。代わりに、IPアドレスを利用して通信相手を指定する必要があります。そのため、ドメインからIPアドレスを探す仕組みが必要です。それがDNS(Domain Name System)です。

DNSの説明の前にIPアドレスの説明をします。IPアドレスには大きく分けてIPv4IPv6の2種類あります。IPv6はv4に比べて新しく、使用可能なアドレス数が圧倒的に多いのですが、あまり普及していないと言う問題があります。とはいえ、最近ではv6対応のサービスも増えてきたため気づかぬうちに、特にモバイルデータ通信ではv6を使っていると言う可能性はあります。IPv6が登場した背景にはIPv4のアドレスが枯渇がありました。IPv4は 約$2^{32}$個に対し、IPv6では約$2^{128}$個利用可能です。IPv6については今回は省略させてください。

IPv4にはプライベートアドレスとパブリックアドレスの2種類があります。前者は家や社内のネットワークで利用するためのもので、後者はインターネットに接続したり他社からの接続を受けるために利用するものです。スマホやPCのネットワーク設定で表示されているのがプライベートIPアドレス(ex. 192.168.1.10)、 blog.misw.jp に関してDNSに問い合わせて得るのはパブリックIPアドレスです。先ほど紹介したルータはこのプライベートIPアドレスとパブリックIPアドレスの変換も行っています。そのため、端末自体にはパブリックIPアドレスがなくてもインターネットに接続できます。

DNSの話に戻りましょう。あるWebページに接続するのに接続先のパブリックIPアドレスを取得してくる必要があること、それを取得する仕組みがDNSであることはわかりました。ではDNSで問い合わせるサーバ(以下DNSサーバ)のIPアドレスはどのように取得するのでしょうか? 予めコンピュータに設定しておくか、あるいはルータからDHCPを利用して取得してきます。DHCPは主にWi-Fiなどで端末をネットワークに接続した時にそのネットワーク内のプライベートIPを取得するために用いますが、一緒にルータに登録されているDNSの設定も取得することができます。

PCはDNSの問合せを行う際、接続されているルータに対して、変換するドメインをデータ部分に、DNS ServerのIPアドレスを宛先部分に格納したDNS問い合わせ用のパケットを送ります。

DNS Server(フルサービスリゾルバー)のお仕事

DNSの問合せパケットを受け取ったDNS Serverは、受け取ったドメインから該当するIPアドレスを調べます。調べる方法は、DNSの構造を理解するとわかりやすいです。DNSは階層構造を取っており、ドメイン情報を検索する際はまずルートサーバに問い合わせを行います。ルートサーバはipやcom、org等のトップレベルドメイン(ドメインの一番右の部分)を管理しているため、問い合わせを受けたドメインに適したサーバのアドレスを返します。例として www.misw.jp について考えると、まずルートサーバに www.misw.jp のアドレスを尋ねます。そうすると、ルートサーバはjpを管理するTLD(トップレベルドメイン)サーバのアドレスを返します。次にjp DNSサーバに www.misw.jp について尋ねます。そうすると、jp DNSサーバは misw.jp DNSサーバのアドレスを返します。最後に misw.jp DNSサーバに www.misw.jp について尋ねます。そうすると、 misw.jp DNSサーバは自身の管理する対応表の中から問い合わせを受けた内容に適したIPアドレスを返します。このようにして、ドメインからIPアドレスを調べます。再帰的問い合わせの画像を以下に示します. DNSの仕組み

IPアドレスを取得したDNS Serverは、その内容をパケットに詰めてPCに返信します。

いざWeb Serverと接続! 〜HTTP〜

Web ServerのIPアドレスが分かったため、次は実際にHTTP通信を行っていきましょう。弊サークルのサイトは他の多くの団体と異なりSSL/TLS通信を行っておりますが、まずはHTTPのみで説明していきます。そもそもよく聞くHTTPとはHyperText Transfer Protocolの略であり、PCのWeb browserと外部のWeb serverがデータの送受信をするために使用するプロトコルの事です。OSI参照モデルにおいてアプリケーション層に位置するとてもユーザに近いプロトコルです。

実はHTTP、特に未だによく使われているHTTP/1.1はかなりわかりやすいので実際に中身を見てみましょう。例えば blog.misw.jp に対するリクエストは以下のようなものです。実際には他にも色々な情報が付属していますが以下でも正しいHTTPリクエストです。

GET / HTTP/1.1
Host: blog.misw.jp
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36

これに対してWeb Serverは以下のようなレスポンスを返します。

HTTP/1.1 200 OK
Server: nginx
Date: Mon, 13 Apr 2020 13:22:20 GMT
Content-Type: text/html; charset=utf-8

<html>
...(略)
</html>

省略している部分にはWebサーバが返したいデータを入れます。HTMLやJavaScriptCSSなどのWebページの見た目と動作を表すファイルに加え、画像、音楽などのファイルも入ります。

HTTP/2以降では人が読みにくくなっていたりもするのですが、HTTP/1.1はかなりシンプルでわかりやすいと思います。

最近ではHTTP/3も標準化が進んでいます。このHTTP/3もかなり面白く、L7より下まで内包した規格だったりするのですが話すと長いので割愛します。気になる人は調べてみてください。

おまけ程度に先ほど飛ばしたSSL/TLSの説明をすると、SSLはSecure Sockets Layer、TLSはTransport Security Layerの略です。今使われているのは基本TLSです。これらはインターネットを安全に利用するための仕組みです。今やセキュリティは極めて重大な問題であり、全てのインターネットを介した通信は暗号化した状態で行うことが望ましいです。Webページを閲覧する際にはHTTPS(HTTP over SSL/TLS)と言うHTTPのデータをさらにSSLTLSで暗号化して送受信するための仕組みが利用されています。

TCPUDP

UDP

DNSのパケットの上位プロトコルにはUDP(User Datagram Protocol)が用いられます。TCPの説明はHTTP関係で行うため、今はUDPについて説明します。UDPは高速性やリアルタイム性のある通信を行うためのコネクションレス型のプロトコルです。今回の通信では、DNS要求が行われる際、その前にUDP接続が行われます。TCPで行われる3-way handshake等(後述)が行われないため信頼性が損なわれるが、余計な事を行わないため速度が出るなどの利点があります。また、TCPUDPでは通信相手のアプリケーションを特定するためにポート番号を指定しますが、DNSの場合は主に53番を用いることが勧められています。

TCP

HTTPやHTTPSにおいてはパケットの上位プロトコルにはTCP(Transmission Control Protocol)が用いられます。TCPとは、信頼性の高い通信を行うためのコネクション型のプロトコルです。今回の通信では、HTTP要求が行われる際、その前にTCP接続が行われます。このTCP接続の際に通信相手と3-way handshakeを行います。3-way handshakeとは、

  • 通信を開始する側が接続要求を行うためSYN flagをonにしたパケットを通信相手に送る
  • 上記のパケットを受け取った側は接続要求に応答するためのACKフラグと、接続要求用のSYNフラグをonにしたパケットを返信する
  • 最初にパケットを送った側は接続要求に応答するためのACKフラグをonにしたパケットを通信相手に返信する。

の3工程で信頼性を確保する仕組みの事です。簡単な図を以下に示します。 3-way handshakeの様子

また、ポート番号はHTTPの場合は主に80番、HTTPSの場合は主に443番を使用します。

おわりに

ブラウザで任意のWebサイトを見る流れを書きましたがいかがでしたでしょうか?今回はあまり細かい話について触れなかった点も多かったので詳しく知りたい方はぜひ調べてみてください。また、このような内容について知りたい人向けにオススメのサイトなどを載せるので良ければ読んでみてください

MIS.Wではサークル内向けのWebサービスを開発したり、外部のネットワークなどに関するコンテストに参加するなどしており、一緒に協力してくれる人を募集しています! 興味を持ってくれた方はぜひMIS.Wへお越しください!

サイト