Basic認証のURL埋め込みとは？ユーザー名とパスワードをURLに入れてアクセスする方法
Basic認証（ベーシック認証）がかかったページは、開くたびにユーザー名とパスワードの入力を求められます。URLの中にユーザー名とパスワードを埋め込めば、入力の手間を省いてそのままアクセスできます。
この記事では、Basic認証のURL埋め込みの書き方と使い方、記号を含むパスワードのエンコード、使えないケースやセキュリティ上の注意点、代わりに使える方法までを解説します。
Basic認証のURL埋め込みとは
URLのドメイン名の前に「ユーザー名:パスワード@」を付けると、ユーザー名とパスワードを指定してページを開けます。
https://ユーザー名:パスワード@ドメイン名/パスたとえば、ユーザー名が「admin」、パスワードが「Pass1234」で、https://example.com/staging/ を開く場合は次のようになります。
https://admin:Pass1234@example.com/staging/ブラウザやツールは、URLから取り出したユーザー名とパスワードを「Authorization」ヘッダーに入れてサーバーへ送ります。サーバー側の設定を変える必要はありません。
Basic認証そのものの仕組みや設定方法は「.htpasswd を使ったベーシック認証の完全ガイド」で解説しています。
URL埋め込みの使い方
ブラウザで開く
埋め込んだURLをアドレスバーに入力して開くと、入力画面を出さずにページが表示されます。ChromeやEdgeでは、開いた後のアドレスバーからユーザー名とパスワードの部分が自動で消えます。
Firefoxでは、なりすましサイトへの誘導を防ぐため、「ユーザー名 ○○ でサイトにログインしようとしています」といった確認画面が表示されることがあります。ブラウザやバージョンによって動きが異なる点に注意してください。
curlで使う
コマンドラインツールのcurlでも、埋め込んだURLをそのまま使えます。
curl https://admin:Pass1234@example.com/staging/curlには、ユーザー名とパスワードを指定する専用の -u オプションもあります。URLと分けて書けるので、こちらのほうが読みやすく、記号のエンコードも不要です。
curl -u admin:Pass1234 https://example.com/staging/-u admin のようにパスワードを省略すると、実行時にパスワードの入力を求められます。コマンドの履歴にパスワードを残したくない場合に便利です。
wgetで使う
wget --user=admin --password=Pass1234 https://example.com/staging/wgetでも埋め込んだURLは使えますが、--user と --password で指定するのが一般的です。
記号を含むパスワードはエンコードする
ユーザー名やパスワードに「@」「:」「/」「#」などの記号が含まれていると、URLの区切りと区別できず、正しく認証できません。たとえばパスワードが「p@ss:w/rd#1」の場合、そのまま埋め込むと、どこまでがパスワードなのか判別できなくなります。
このような記号は、「%」と16進数の組み合わせに置き換える（パーセントエンコードする）必要があります。
| 記号 | エンコード後 | 記号 | エンコード後 |
|---|---|---|---|
| @ | %40 | ? | %3F |
| : | %3A | % | %25 |
| / | %2F | & | %26 |
| # | %23 | スペース | %20 |
パスワードが「p@ss:w/rd#1」の場合は、次のように書きます。
https://admin:p%40ss%3Aw%2Frd%231@example.com/staging/JavaScriptの encodeURIComponent() を使うと、エンコードした文字列を簡単に作れます。ブラウザの開発者ツールのコンソールで実行してみてください。
encodeURIComponent('p@ss:w/rd#1');
// → "p%40ss%3Aw%2Frd%231"そもそもURLに埋め込む予定がある場合は、パスワード生成ツールで「記号なし」を選んで作成しておくと、エンコードの手間がかかりません。
URL埋め込みが使えないケース
ページ内の画像・iframe・CSSなどの読み込み
ChromeやEdgeでは、アドレスバーから開く場合は使えますが、ページの中で読み込む画像・iframe・CSS・JavaScriptなどのURLに認証情報を埋め込むと、読み込みがブロックされます。セキュリティ上の理由から、2017年のChrome 59以降この動きになっています。
<!-- 画像は表示されない -->
<img src="https://admin:Pass1234@example.com/staging/image.jpg" alt="">JavaScriptのfetch
fetchに認証情報を埋め込んだURLを渡すと、リクエストを送る前にエラーになります。
fetch('https://admin:Pass1234@example.com/staging/');
// TypeError: Failed to execute 'fetch' on 'Window':
// Request cannot be constructed from a URL that includes credentialsJavaScriptから認証が必要なURLにアクセスする場合は、後述の「Authorizationヘッダーを送る」方法を使います。
記号をエンコードしていない
「@」や「#」がそのまま入っていると、URLとして正しく解釈されず、接続できなかったり別のサーバーにアクセスしてしまったりします。前の章の表を参考にエンコードしてください。
URL埋め込みを使うときの注意点
- URLを共有するとパスワードも伝わる：チャットやメールに貼ったURL、ブックマーク、ブラウザの履歴、画面共有などから、パスワードが第三者に知られるおそれがあります。
- 仕様上は非推奨：URLの仕様（RFC 3986）では、「ユーザー名:パスワード」の形式でパスワードをURLに入れることは非推奨とされています。
- 必ずHTTPSで使う：Basic認証のユーザー名とパスワードは暗号化されずに送られます。HTTPのサイトでは通信を盗み見られる危険があります。
- 使い終わったらパスワードを変える：一時的に共有した場合は、作業が終わったらパスワードを変更しておくと安心です。
URL埋め込みは、自分だけが使う確認用や、閉じた環境での一時的な利用にとどめるのがおすすめです。
URL埋め込みの代わりに使える方法
Authorizationヘッダーを送る
Basic認証では、「ユーザー名:パスワード」をBase64という形式に変換した文字列を、Authorizationヘッダーに入れて送ります。プログラムやツールから使う場合は、このヘッダーを直接指定するのが確実です。
fetch('https://example.com/staging/', {
headers: {
Authorization: 'Basic ' + btoa('admin:Pass1234')
}
});btoa() は文字列をBase64に変換する関数です。curlでヘッダーを指定する場合は次のようになります。
curl -H "Authorization: Basic YWRtaW46UGFzczEyMzQ=" https://example.com/staging/「YWRtaW46UGFzczEyMzQ=」は「admin:Pass1234」をBase64に変換した文字列です。Base64は暗号ではなく誰でも元に戻せるので、このヘッダーの値もパスワードと同じように扱ってください。
ツールやサービスの認証設定を使う
死活監視サービスや、Playwright・Puppeteerなどの自動テストツールの多くには、Basic認証のユーザー名とパスワードを入力する専用の設定があります。URLに埋め込むより安全で、記号のエンコードも不要です。
特定のアクセス元だけ認証を外す
決まったサーバーや社内ネットワークからのアクセスであれば、そのIPアドレスだけ認証なしで通す方法もあります。設定方法は「.htaccessで2段階のアクセス制限をかける方法」、特定のディレクトリだけ認証を外す方法は「Basic認証を特定のディレクトリだけにかける方法」で解説しています。
まとめ
- 「https://ユーザー名:パスワード@ドメイン名/」の形式で、Basic認証の情報をURLに埋め込める
- 記号を含むユーザー名・パスワードは、パーセントエンコードが必要
- ページ内の画像などの読み込みや、JavaScriptのfetchでは使えない
- URLからパスワードが漏れやすいため、共有には向かない
- プログラムやツールからは、Authorizationヘッダーや専用の認証設定を使うのが確実
Basic認証用の.htpasswdは、.htpasswdファイル作成ツールで簡単に作成できます。
