公開前のwebサイトに簡易にアクセス制限をかけられる、
Basic認証について解説していきます。
注：この記事は apache を想定して書かれています。nginx に関しては動作しない内容が含まれています。

Basic認証とは

上記のテキストでも記載した通り、
サイトの閲覧に対して、早くそして簡易にアクセス制限をかけるための機能になります。
サイトの制作において、公開前もしくはテスト環境などの見てほしくないページなどに書けることがしばしばあります。
そして、
セキュリティ的な観点で言えば、「脆弱性がある」、「簡単に解除されてしまう」など、
危険とする意見もあったりしますが、
その簡易さと、全てのブラウザが対応している観点から今なお現役の認証方法です。

Basic認証の脆弱性とは

なぜ脆弱性がと言われるのでしょうか。

最近のWebサイトのほとんどは https で表示され、
ブラウザのURLの箇所に鍵マークがつくことほとんどですが、
それは 2014年から2018年にかけて ブラウザ（特にChrome）が強力に SSL (HTTPS)化を押し進めた結果、
広く普及し今に至る結果となりました。

https化する前のhttp通信は暗号化処理をされることがなく、
平文（そのままのテキスト）でサーバー側と通信がされていたため、
通信を覗き見されるスニッフィング（スニファリング）が行われた場合、
通信内容が丸見えになる状態でした。
Basic認証のID, PasswordはChromeの開発者ツールより簡単に確認できます。
しかしながら、httpsが普及し、
サーバーとの通信が暗号化されたことにより、暗号化を解読されない限り盗み見することができなくなりました。
開発者ツール上では暗号化はされていません。

Basic認証のID, Passwordを確認する

Basic認証のかかっているページを開く前に開発者ツールを開いておいてください。
というのも、開発者ツールを開く前の処理内容は表示されないためです。

確認手順

1. 開発者ツールを開く
2. Basic認証のページを開く
3. ID, PWを入力する
4. 認証が解除されページが表示される
5. 開発者ツールのNetwork（ネットワーク）のタブを開く
6. 表形式でType（タイプ）列にdocument（書類）と表示されている箇所を探す
7. 先ほど見つけた行のname（名前）列をクリックする
8. 右側が喧嘩したところで、header（ヘッダ）タブをクリック
9. Request（リクエスト）の Authorization を確認

このときAuthorization: Basic xxxxxxxxxxxxxxxxx と記載されているかと思います。
このとき xxxxxxxxxxxxxxxxx と表示されているところは、
ブラウザ側で変換されているのですが、IDとPWを：で繋いでBase64の形式に変換された文字列になります。
Base64への変換は暗号化ではありません。
Base64についてはこちらを参照してください。
Wikipedia Base64 についてのページ

例）

// IDとPWを : で繋いだ文字列
admin:password

// Base64で変換された文字列
YWRtaW46cGFzc3dvcmQ=

// 変換方法：btoa関数
btoa('admin:password') を行うと　YWRtaW46cGFzc3dvcmQ= に変換される 

これでBasic認証で入力したID, PWが確認できたかと思います。
開発者ツールで確認できた文字列と、
実際入力した文字列をBase64に変換してみると一緒なことが確認できるかと思います。

ここまではブラウザ側で起こっていることを中心に話しました。
今度はサーバー側で起こっていることについて見ていきたいと思います。

Basic認証をかける

Basic認証をページにかけるには、
.htaccess、.htpasswd をサーバー内に設置するところから始まります。
よくある設置場所は、サイトのトップページと同じ階層に置かれることが多く、
トップページと同じ階層におく事によって簡易にサイト全体にかけることができるようになります。

.htaccessへの記述

基本は下記の記述で大丈夫です。

AuthUserFile /path/to/.htpasswd
AuthName "Input ID and Password."
AuthType Basic
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
  deny from all
</Files>

それぞれの説明をしていきます。

AuthUserFile

読み込ませたいID, PWが記述されているファイルのパスを記述してください
パスはサーバーごとに違うので、その都度確認して設定してください。
簡単な確認方法 ）
.htpasswdが設置された階層にphpファイルを作成し、<?php echo dirname(__FILE__); ?> を記述し、
ブラウザで確認し表示されているテキストの末尾に/を追加し /path/to/ と置き換えて設定してください。

AuthName

ブラウザでポップアップが表示された際に表示されるテキストになります。
適切な文章を入れ、入力を促してください。

AuthType

認証方式の指定を行います。basicを設定してBasic認証を起動させてください

require

.htpasswdに設定されているID（ユーザー）を全て許可する場合は valid-user
特定のID（ユーザー）のみを許可したい場合はuser ID, ID, ... というように
.htpasswdに記載されているIDをカンマ区切りできさしてください。

５〜７行目について

.htaccess, .htpasswd へのアクセス（ブラウザへの表示）を許可しないことを明記しています。
こちらの２ファイルが見られた場合、basic認証の機能を失う事と同義になるので記述しておいた方が良いでしょう。
ファイル名指定は正規表現で指定されています。トップページと同階層に置かれた２ファイルが指定されています。

.htpasswdへの記述

.htpasswdへの記述はとても簡単です。
htpasswd用のパスワード生成ツールはとてもこの世に溢れているので、どれを使用しても良いかと思います。
ツールで生成したものをファイルに貼り付けることで完了します。

.htpasswdへの記述への記述例

# ID:ハッシュ化されたパスワード
user1:papAq5PwY/QQM
user2:$2y$10$ORk43K7kIbD/G52nDDmISudmA5i.SDQxmBYNz8rvnnUckucN0lMZy
user3:$apr1$IA01iGsB$.xKrsSzxNyBJxklfnTyYW.
user4:{SHA}5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8

１ID、１ハッシュ化されたパスワードを行で登録していく（１行１USERにする）ことで、
登録ユーザーを増やすことができます。

上記に記載されたハッシュ化されたパスワードは同じパスワードになります。
password というテキストをハッシュする形式（アルゴリズム）を変更して生成しています。
なので、上記をサイトのBasic認証として使用すると、
全てのユーザーが password という文字列でBasic認証を解除することができます。

ハッシュ化に使用されるアルゴリズム

Basic認証のパスワードに使用できるハッシュ化のアルゴリズムは４通り存在します。
上記でハッシュ化されたパスワードのアルゴリズムは上から順に下記のようになっています。

• CRYPT
• bcrypt
• MD5(APR)
• SHA1

上記のハッシュ化の処理については、
ターミナルからhtpasswdコマンドを実行することで取得が可能です。
他にもopensslコマンドを使用することでMD5(APR),CRYPTのハッシュを取得できます。
PHPでも用意されている関数で取得できるものがいくつかあります。

ブラウザ側から得たID,PWはどのように照合されるのか

ブラウザがID, PWを Base64 形式のエンコードをかけていることをサーバー側はわかっているので、
一度受け取った文字列をデコードして入力された文字列に複号します。
その後、コロン（:）で区切った際の2つ目のテキストをハッシュ化し、
.htpasswdに記載されているものと照合します。

照合された結果、
OKの場合: Webページが問題なく表示されます
NGの場合: ずっとID, PW を聞かれ続けた結果、キャンセルを押すと「Unauthorized」と表示されてしまい表示されない
という流れになると思います。

まとめ

Basic認証の基礎の部分を解説していきました。
どのようなものなのか、
どのように認証をかけるのか、
どのような仕組みなのか、
がわかったところで、
この技術を上手く使用してもらえたらと思います。

最後に、
Apacheを対象に書かれています。Nginxでは一般的にはhtaccessを使用できないのでご注意ください。