Webの仕組み全網羅!URL・DNS・サーバーを体系的に解説

安全
この記事は約10分で読めます。

初心者がよく遭遇するWebの仕組み・URL・DNS・サーバーを躓くポイントの解説

護身IT
護身IT

この記事では、下記の悩みを解決します。
・URL・DNS・ブラウザの役割が理解できる
・Webサイトが表示される仕組みがイメージできる
・サーバーの種類と特徴がわかる
・HTTPS・認証方式・Cookie の基礎が理解できる
・Web管理の基本的なセキュリティ対策がわかる
上記を実体験を元に画面を使って分かりやすく解説します。

IT初心者の方でも、この記事を読みながら進めるだけで
“Webの基本構造と安全な使い方” が理解できるように構成しています。

Webの基本構造(URL・DNS・ブラウザ)

Webページが表示されるまでの流れ(初心者向け図解イメージ)

ブラウザに表示されるための実際のプログラムのやり取りなどを私自身が得た知識をノウハウとして記載します。参考にしていただければ幸いです。

Webサイトの仕組み①
Webサイトの仕組み①
Webサイトの仕組み②
Webサイトの仕組み②

①PCよりURLを入力してアクセスする。リクエストする。
例)「http://www.aaa.bbb.co.jp」
②DNSサーバに「このURLの住所(IP)を教えて」と問い合わせる。
③DNSサーバから回答「IPアドレス」が届きます。
④ブラウザがそのIPのWebサーバにアクセスします。
⑤Webサーバから画像や文字が表示されます。
⑥ブラウザが、届いた設計書を基に部品を組み立てる。

Webを構成する3つの技術

  • HTML:骨組み
  • CSS:装飾
  • JavaScript:動き

【参考】サイトの速度

私もサイト作成時など、表示速度の調査で下記サイトを利用していますので、今後サイト作成を始められる方等参考にリンクを貼ります。ご活用ください。

下記のサイトにURLを入力するだけで対象サイトの速度が測定できます。

URLとドメインの基礎

URLの構造

例:https://www.goshin-skill.com/blog/

  • https:通信方式(プロトコル)
  • www:ホスト名
  • goshin-skill.com:ドメイン
  • /blog/:サブディレクトリ

独自ドメイン

ここでは、「ドメイン」とは?及び役割や種類などを、どなたでも理解できるよう、解説しています。
ご参考になれば幸いです。
独自ドメイン:世界中に1つだけの「Web上の住所」。
住所がなければ郵便物(メール)が配送されないように、ドメインがなければWebサイトは表示されません。

参考
レンタルドメイン:新規に有償(1,000円/月)で個人で取得。(6コア程度が推奨されています。)
中古ドメイン:第3者が1度利用したもの。設定はすべて引き継ぎます。

ドメインの種類

  • 独自ドメイン:自分専用(例:goshin-skill.com)
  • サブドメイン(共有ドメイン)blog.goshin-skill.com のように用途ごとに分ける。(無料ブログで提供:サブドメインの部分は赤色
  • サブディレクトリgoshin-skill.com/blog/ のように階層で分ける。ドメイン(住所)の中の部屋。(サブディレクトリ部分は赤色
  • マルチドメイン:1台のサーバで複数ドメインを運用
護身IT
護身IT

独自ドメインは、住所かぁ。じゃあ、URLの後ろについている .com とか .jp って何が違うの? どれを選んでも同じ?

Webさん
Webさん

いいえ、実はそれぞれに意味や『信頼性の違い』があるんですよ。例えば、以下のような特徴があります。」

  • .com / .net: 誰でも取得できる世界で最もポピュラーなドメイン。
  • .jp: 日本国内に住所がある人・組織しか取得できない、信頼性の高いドメイン。
  • .co.jp: 日本国内で登記している「企業(会社)」しか取得できない、最も信用度が高いドメイン。
護身IT
護身IT

へぇー! .co.jp って会社しか使えないんだ。じゃあ、怪しい詐欺サイトが .co.jp を使っていることは基本的にはないんだね?

Webさん
Webさん

その通りです! 企業の審査が必要なので、詐欺師が取得するのはほぼ不可能です。逆に、誰でも匿名で安く(時には数十円で)取得できる怪しいドメイン(例:.xyz や .top など)は、フィッシング詐欺サイトによく悪用される傾向があります。

護身IT
護身IT

なるほど! URLの『ドメインの末尾』を見るだけで、そのサイトが信頼できるかどうかの簡易的なチェックができるんだね。

Webさん
Webさん

素晴らしいです。ネットサーフィンをしていて『このサイト、本物かな?』と怪しく思った時は、URLのドメイン部分をしっかり確認する癖をつけると、詐欺被害に遭うリスクをグッと減らすことができますよ。

DNS(Domain Name System)サーバ

ここでは、サイトの仕組みで欠かせない、DNSサーバの役割など一言で解説しています。
ご参考に見ていただけるとありがたいです。

DNSはインターネットの電話帳です。

ドメイン名(文字)とIPアドレスを関連付けして管理しているサーバ。(10進数のIPアドレスと文字列を関連付けしたもの。)

護身IT
護身IT

もしこのDNSサーバが故障したり、トラブルが起きたりするとどうなっちゃうの?

DNSさん
DNSさん

DNSサーバが止まると、『インターネット回線は正常に繋がっているのに、なぜかどのホームページも開けない』という状態になります。

護身IT
護身IT

えっ、ネットは繋がっているのに画面が見られないの?

DNSさん
DNSさん

はい。スマホやPCの画面には『サーバのDNSアドレスが見つかりませんでした』といったエラーが出ます。これは、電話帳が開けないせいで、かけたい相手の電話番号(IPアドレス)が分からず、通信が迷子になっている状態なんです。ちなみに、このトラブルが起きたときは、ルーターを再起動するか、端末のネットワーク設定で『パブリックDNS(Googleが提供する 8.8.8.8 など)』に一時的に切り替えることで解決できる場合がありますよ。

護身IT
護身IT

なるほど、裏でそんなに重要な働きをしていたんだね。……ん? 待って。もし悪いハッカーがこの『電話帳』を書き換えたらどうなるの?

DNSさん
DNSさん

ゾッとする話ですが、それがまさに『DNSスプーフィング(DNSキャッシュポイズニング)』と呼ばれる恐ろしいサイバー攻撃です。正しいドメイン(例:自分のネットバンキングのURL)を入力したはずなのに、書き換えられた電話帳のせいで、ハッカーが用意した『見た目が全く同じ偽物のフィッシングサイト』に強制的に案内されてしまうんです。

護身IT
護身IT

URLが正しいのに偽サイトに飛ばされるなんて、見た目じゃ絶対に気づけないよ! どうやって身を守ればいいの?

DNSさん
DNSさん

まずは、サイトが開いたときにブラウザのURL欄に『鍵マーク(SSL/TLS暗号化)』がついているか、証明書にエラーが出ていないかを確認することです。また、公共のフリーWi-Fiの中には、悪意のあるDNSサーバに強制接続させる罠が仕掛けられていることもあるので、怪しいWi-Fiには繋がない、重要な決済はVPNを使うといった『護身の意識』が大切になります。

インターネットの仕組み(サーバー)

サーバー(コンテンツを提供する側)

ここでは、私も初期のころイメージがわきませんでしたので参考に記載します。

サーバとは何?
サーバーにはどのような種類があるの?
の悩みのお役に立てれば幸いです。

サーバー:一戸建て住宅に例えると、土地のようなもの。
レンタルサーバ:土地をレンタル(借用)する。

サーバーの種類と特徴

レンタルサーバー
・月額で契約し複数人が1台のサーバーを利用する。(シェハウスのイメージ)
 共有サーバー
 ・複数のユーザーが1台のサーバーを共有するサービス。
 ・小規模なウェブサイトや個人ブログなどに向いている。
 専用サーバー
 ・1つの契約につき、1台のサーバーを独占して利用できるサービス。
 ・自分でサーバ構築しOS、ソフトなどを設置しているため自由度が高いが専門知識が必要。
 ・アクセスが多い大規模なウェブサイトに向いている。
 VPS(仮想専用サーバー)
 ・1つのサーバーを、複数の仮想サーバーに分けて利用できるサービス。
 ・中規模サイトや、マルチプレイ用のゲームサーバーなどに向いている。
 クラウドサーバー
 ・必要なサーバーのリソースを設定して利用できるサービス。
 ・ウェブサイトやデータの共有、サービスの開発やテスト環境など、さまざまな用途に利用できる。

セキュリティの基礎(認証方式・HTTPS・Cookie)

認証方式(一般的なWebサイトの認証方式)

ここでは、一般的なWebサイトでの認証を初心者にわかりやすく解説しています。参考になると幸いです。
Basic認証:Basic認証が設定されたページにアクセスすると、ID・パスワードを要求するダイアログボックスが開く。Basic64形式でエンコードされサーバに送信される。受け取った情報を事前に設定しておいたユーザ情報と照合する。ID/パスワードは暗号化されない。

Digest認証:Basic認証に比べ送信形式がハッシュ関数になる。セキュリティ面で少しBasic認証より高い。

Form認証:設計者が独自で作成した認証。セッションの概念が利用されサーバ側でのIDの比較が適用されます。SSL/TLS通信。

HTTPSとHTTPの違い

暗号化された通信プロトコルと非暗号化通信プロトコルの違いです。
https:暗号化済み。(推奨)
http:非暗号化。

Cookie

ここではCookieとキャッシュが、間違いやすいため初心者でも理解が深まるよう解説しました。ご参考にしていただければ幸いです。
キャッシュとは、別物です。
・Cookieとは、Webサイト側が将来必要であろうと思われる情報をあなたのPC端末等に書き込む。(ログイン情報を一時保存)
・キャッシュとは、再読み込み速度を早くするための一時保存です。

Web管理のセキュリティ(初心者向け)

自身のサイトがセキュリティ上気になると思います。参考に下記に外部サイトのURLを記載しますので
検索したいURLで試してください。

使い方:URL入力でセキュリティをチェックする。

VirusTotal
VirusTotal
(参考:外部サイトへ)

無料でチェックできます。
お試しください。


左図の赤枠内の数字が小さいほど良い状態です。

ファイアウオールの代表的な機能

ファイアウォールの機能で代表的なものに「パケットフィルタリング」や「アプリケーションゲートウェイ」などがある。

ファイアウォール
【補足】インターネット:通信網
サーバー:ネットワークでつながっている機器

パケットフィルタリング

パケットをあらかじめ指定されたルールにのとって通過させるか否かを判断する機能。
どのサービスは(プロトコルとポート番号で区別される)、通過させるかを判断することになる。

アプリケーションゲートウェイ(プロキシサーバ:代理サーバ)

外からはプロキシサーバしか見れないので、不正アクセスの標的になる事を防ぐ。

WAF(Web Application Firewall)

Webアプリケーションに対する外部からのアクセスを監視する。(脆弱性を悪用した攻撃からWebサーバを保護する。)
WAFには通信を暗号化したり復号化する機能はありません。よってWebサーバの前でSSLアクセレータ(暗号化/復号化を行う。)の後に設置する。

まとめ:Webの仕組みは「住所・土地・家」のイメージで理解できる

URL(住所):例)http://www.goshin-skill.com/
DNS(住所録):ドメイン(文字)⇔IPアドレス(数字)
サーバー(土地):占有サーバー、レンタルサーバー、仮想サーバー、クラウドサーバー
ブラウザ(建築職人):WebサイトをPCで見るソフトです。
HTML/CSS/JS(設計図と部品):Webサイトを構築・作成するためのプログラム言語です。

この流れを理解すると、Webの仕組みが一気にクリアになります。

最後まで閲覧くださりありがとうございました。私も最初個々の役割などイメージできなくまた操作に苦慮した点など記載しました。少しでもお役に立てれば幸いです。
下記に関連記事のリンクを貼りますので併せてお読みください。

全体の流れを詳しく知りたい方は、まず「【図解】IT初心者向けネットワークとDHCPの基礎を簡単解説」からご覧ください。

タイトルとURLをコピーしました