URLのhostとhostnameは同じ？ポート番号とoriginを分けて読もう

URLの接続先を見ていたら、hostname、host、originという似た名前が出てきた。どれも同じ文字列だと思うと、ポート番号や通信方式を見落とすことがあるよ。

このページでは、Webページでよく使うhttpsのURLを小さく分解する。ブラウザがあれば準備完了。作例はURLを文字列として読むだけで、そのアドレスへ接続しないよ。

最初にURLの区切りを見る

https://example.invalid:8443/docs?q=1#intro

この例では、httpsが通信方式、example.invalidがホスト名、8443がポート番号、/docsがパス、?q=1が検索パラメーター、#introがページ内の目印に当たる。

ポート番号は、接続先でどのサービスへつなぐかを区別する番号だよ。毎回URLへ書くわけではなく、httpsなら既定の443が使われる場合は省略できる。

JavaScriptで三つを比べる

const url = new URL('https://example.invalid:8443/docs?q=1#intro');
console.log(url.hostname); // example.invalid
console.log(url.host);     // example.invalid:8443
console.log(url.origin);   // https://example.invalid:8443

パスや検索パラメーターを変えても、この例のoriginは変わらない。逆にhttpsからhttpへ変えたり、既定以外のポートを変えたりするとoriginは変わるよ。

:443を付けても表示から消える？

const url = new URL('https://example.invalid:443/docs');
console.log(url.port);   // 空の文字列
console.log(url.host);   // example.invalid
console.log(url.origin); // https://example.invalid

URLの仕組みは、既定ポートを正規化して省略する。このため、入力した文字列の末尾を単純に切り出したものと、URLオブジェクトの各項目は必ずしも同じ見た目にならないんだ。

ページ内で入力を切り替える

作例には、8443付き・443付き・別のパスという三つの固定URLを用意した。選ぶと、hostname、host、port、origin、pathnameが並ぶ。「最初から試す」で8443付きへ戻せるよ。

同じホスト名でも8443と443の接続先は同じサービスとは限らない。一方、パスが違うだけの二つは、この例では同じoriginになることを見てみよう。

ホスト名だけで安全性を決めない

Webの同一オリジンの考え方では、通信方式・ホスト・ポートの組が基本になる。ホスト名だけを比べて、認証情報を渡してよい接続先だと決めつけないでね。アプリ側の許可条件や認証の確認は、別途必要だよ。

今回はhttp・httpsに話を絞っている。fileやdataなど、別の種類のURLには異なる扱いがあるので、この表をすべての形式へそのまま当てはめないようにしよう。

編集部では2026年10月29日にMDNを確認し、三つのURLの解析結果をNodeとブラウザで検証した。例の.invalidは説明用の名前で、通信は行っていないよ。URL・ドメイン・サーバー、末尾スラッシュとパスも合わせて確認しよう。