Basic認証とは？仕組みを学んでセキュリティ設定してみよう！

「Basic認証」って聞いたことありますか？

Web制作に携わる以上、確実に知っておきたいセキュリティの知識なんですが、意外と知らない初学者の方も多いようです。

何だか難しそうな印象を受けて不安な方もいるかもしれませんが、当記事では初学者の方でもわかるように、基礎的な知識から実際の設定方法まで解説します！

Webデザインやコーディングの実務をするうえでは必須の知識なので、確実に理解しておきましょう！

Basic認証とは

Basic認証とは、Webサイトの通信で用いられるApache HTTP Serverの機能にあるアクセス制限方法のことです。

Basic認証を設定したWebサイトにアクセスしようとすると、画像のような入力画面が求められ、正しい情報を入力しなければアクセスできないようになります。

Basic認証はどんなときに使う？

まずはBasic認証の設定が必要となるケースを把握しておきましょう。

①本番公開前のチェック時

コーディング案件を受託し、制作途中でチェックを依頼する際に、テストサーバーにアップロードすることがあるかと思います。

一時的なものとはいえ、不特定多数からアクセスされてはいけない状態のため、鍵をかけておく必要があります。

②ポートフォリオなどに掲載するテストサイト

制作スキルを証明するため、自分のポートフォリオに課題でコーディングしたデータをアップする方もいるかと思います。このとき未対策で一般公開していると、Googleなどの検索プラットフォームに引っかかるようになってしまいます。

本来はユーザーが求めている実際のコンテンツが表示されるべきで、課題のページがヒットしてしまうのは良くありません。

PENGINでもコーディング課題を配布していますが、課題でコーディングしたデータを掲載したい方は、Basic認証を設定しておきましょう。

③公開範囲を制限したいサイト

本番に公開されているサイトであっても、UIや機能などの改修があるとき、該当のディレクトリ配下のページにアクセスさせたくないというケースがあるかもしれません。

そんな時、簡易的なセキュリティではありますが、一時的な制限としてBasic認証を設定することはあります。

Basic認証の特徴

Google検索にヒットさせないために、metaタグのnoindex設定をすることがありますが、Basic認証を設定すると自動でnoindexの効果が生じる点は覚えておきましょう。

また、Basic認証でログインした後、ブラウザを閉じてない限り、2度目以降のアクセス時はID・パスの入力不要でアクセスできてしまう点には注意が必要です。

Basic認証は幅広いWebサーバーに対応しているため、一般的な認証方法として使われますが、あくまで簡易対策であることは理解しておきましょう。

Basic認証の設定・作成方法の流れ

Basic認証は上記の手順で行います。

（STEP1）制限範囲を決めてフルパスを特定する

Basic認証を設定するためには、「.htaccess」と「.htpasswd」2つのファイルが必要で、これらのファイルを制限したいディレクトリに設置します。

.htaccessファイル内にルートからのフルパスを記述する必要があるのですが、まずはこのパスを確認しましょう。

すでにわかっている場合は不要ですが、今回はPHPファイルをアップロードして確認する方法をご紹介します。

<?php
echo __FILE__;
?>

適当な名前でPHPファイルを作成し、上記のコードを記述してください。このコードはアクセスしたパスが表示されるPHPのマジカル定数（マジック定数）です。

作成したPHPファイルを、FTPソフトなどでBasic認証をかけたいディレクトリにアップロードします。（エックスサーバーの場合は、public.htmlの配下にトップのhtmlが格納されています）

アップロードしたら、URLをブラウザに入力し、その後ろにアップロードしたPHPファイル名を追記して検索してみてください。

上の場合「◯◯◯.com」以下の階層にBasic認証を設定するため、「◯◯◯.com/△△△.php」と入力しています。

記述内容とアップロード場所が正しければ、画面上にフルパスが表示されます。

PHPファイル名より前までがフルパスなので控えておいてください。

PHPファイルは確認できたら削除しておきましょう。

（STEP2）.htaccessと.htpasswdの作成

次に .htaccess と .htpasswdファイルを作成します。

VScodeで作成した画像です。

ドット（ . ）から始まるファイルは隠しファイルとなってしまうため、そのままだとFinderやエクスプローラーでは作成できているか確認ができません。

隠しファイルを表示させるには、Macの場合、command + shift + .（ドット）のショートカットで確認できます。

Windowsの場合は、フォルダ上部メニューの「表示」から「隠しファイル」にチェックを入れると確認できるので表示させておきましょう。

.htaccessファイルを確認

FTPでサーバーの中を確認した際、アップロードしたディレクトリに元から.htaccessファイルが入っている場合があります。

重要な設定内容が記載されている可能性もあるため、一度ローカルに移動させ、中身を確認しておきましょう。

何も記述されていなければ、新規作成して上書きしてもよいですが、WordPressの場合は確実に記載されているため、新規ファイルで上書きしないよう注意が必要です。

（STEP3）.htaccessに認証内容を記述

htaccessはBasic認証の設定内容を記述するファイルです。

AuthType Basic
AuthUserFile /Basic認証を設定したいディレクトリのフルパス/.htpasswd
AuthName "Input your ID and Password"
require valid-user

設定に最低限必要な記述は4行だけです。

作成（もしくはサーバーからダウンロード）した.htaccessに上記内容を記述してください。

AuthTyp

認証方式の宣言なので「Basic」と記載します。

AuthUserFile

.htaccessと.htpasswdを置くフルパス。さきほどPHPで確認したパスを記述します（フルパスの後ろに / で区切り .htpasswd を忘れないように）。

AuthName

認証領域の指定で、記載した文字列がダイアログボックスに表示されます（Chromeなどブラウザによっては表示されなないです）。

半角英数字で設定してください。日本語だと文字化けする可能性があります。ダブルクォーテーション（” “）で囲んで指定しましょう。

require

「valid-user」とすることで、すべてのユーザを認証する指定となります。

[ 注意 ] WordPressサイトの場合

AuthType Basic
AuthUserFile /Basic認証を設定したいディレクトリのフルパス/.htpasswd
AuthName "Input your ID and Password"
require valid-user

# "BEGIN WordPress"
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

WordPressの場合、wp-adminのフォルダと同じ階層（public_htmlの下層にあることが多い）に、設定が記述されている.htaccessファイルがすでに設置されています。

ローカルに落としてこの中に追記しますが、ここで記載されている#BEGIN WordPress と #END WordPress の間は編集してはいけません。

BEGIN WordPressの上に追記してください。

もし記述に誤りがあるとエラーでサイトが表示されなくなるため、事前にバックアップをとるようにしましょう。

（STEP4）.htpasswdにパスワード記述

.htpasswdには、ID：暗号化したパスワードで記載します。

test:暗号化されたパスワード

暗号化するサイトはいくつかありますか、今回は以下のサイトを使用してみます。

認証のダイアログに入力してもらうIDとPasswordを決めて、生成ボタンを押してください。

下に暗号化された内容が生成されているので、そのまま.htpasswdに記述します。

ここまでで .htaccess と .htpasswd が完成しました。

.htpasswdパスワード生成サイト紹介

上で紹介したサイトのほか、さまざまなパスワード生成サイトがあります。

使いやすいサイトをブックマークしておくといいでしょう。

（STEP5）サーバーに認証用ファイルをアップロード

作成した.htaccess と .htpasswdをフルパスを設定しているディレクトリにアップロードしてください。

WordPressの場合は、wp-adminフォルダがある階層に設置し直してください。

（STEP6）認証されているかチェック

ここまで出来たら、認証をかけたWebサイトのURLからアクセスしてみましょう。

Basic認証のダイアログが表示されるかと、ID・パスワードを入力してログインできればOKです。

Basic認証のダイアログが表示されない

何度か設定とログインを繰り返していると、ブラウザが認証情報を保有したままになっていることから、Basic認証画面が表示されない場合があります。

そんな時はシークレットモードでブラウザを立ち上げ、再確認してみてください。

401エラー画面が表示される

401画面になるのは、入力したID・パスワードが誤っているときです。

入力に誤りがない場合、設定自体に誤っている可能性があるので、再度設定し直した.htaccess と .htpasswdをアップロードしてもよいでしょう。

認証範囲の変更方法

Basic認証はディレクトリ単位で指定できるアクセス制限なので、影響範囲を細かく設定できます。

.htaccessと.htpasswdを制限

<Files ~ "^\.(htaccess|htpasswd)$">
  Deny from all
</Files>

<Files></Files>で囲むとアクセス範囲を指定でき、<Files ~ “^.(htaccess|htpasswd)$”>と書くと.htpasswd と .htaccess を指すことになります。

deny from allはすべてのアクセスを拒否する、という指定になるため、ブラウザからふたつのファイルにはアクセスできないようになります。

WordPressのログイン画面に設定する

<Files wp-login.php>
AuthType Basic
AuthUserFile /Basic認証を設定したいディレクトリのフルパス/.htpasswd
AuthName "Input your ID and Password"
require valid-user
</Files>


# "BEGIN WordPress"
<IfModule mod_rewrite.c>
....

WordPressのログイン画面に設定する場合、.htaccess を<Files wp-login.php-></Files>で囲めばBasic認証の設定ができます。

ログイン画面にアクセスした際に「500」が表示された場合、.htaccessのフルパスが誤っている可能性もあるのでチェックしてみましょう。（命令文とパスの間にある半角スペース有無などでもエラーになります！）

特定のIPアドレスのみ許可する

AuthType Basic
AuthUserFile /Basic認証を設定したいディレクトリのフルパス/.htpasswd
AuthName "Input your ID and Password"
require valid-user

Order Deny,Allow
Deny from all
Allow from 00.00.00.00

Order Deny,Allowは制限する順番を宣言するもので、ディレクトリに許可対象がなければ拒否、それ以外は許可するという指示になります。（Order Allow,Denyだとその逆）

上の場合、Allow fromで指定したIPのみ許可し、それ以外すべてのアクセスは拒否（Deny from all）することになります。

IPは行を分けて複数指定できます。

特定の階層を除外してアクセス拒否する

はじめから存在しているディレクトリであれば、直接該当の階層に.htaccessを設置すればいいですが、WordPressなどで動的に生成されるディレクトリを指定したい場合、条件文で指示する必要があります。

Satisfy Any

AuthType Basic
AuthUserFile /Basic認証を設定したいディレクトリのフルパス/.htpasswd
AuthName "Input your ID and Password"
require valid-user

SetEnvIf Request_URI "test.html" secure_dir
Order Allow,Deny
Allow from all
Deny from env=secure_dir

Satisfy Anyは条件がマッチすればBasic認証をかける、という命令文です（デフォルトがSatisfy all）。

8行目からが特定階層の制限を指示する命令です。

SetEnvIfは「指定した条件にマッチした場合」という条件文で、REQUEST_URIがディレクトリの指定、“test.html” secure_dirは test.html のURLを意味します。

Deny from env=restricted_urlで、指定したURLを拒否させます。

特定のURLのみBasic認証をかける

Satisfy Any

## /test/で始まるURLへのアクセスを禁止
SetEnvIf REQUEST_URI "^/test/" restricted_url
Order allow,deny
Allow from all
Deny from env=restricted_url

## /test/以下でもBasic認証を設定
AuthUserFile "/path/to/.htpasswd"
AuthGroupFile /dev/null
AuthName "Restricted Files"
AuthType Basic
require valid-user

特定のURLのみBasic認証を除外する

Satisfy Any

## /test/で始まるURLへのアクセスは許可
SetEnvIf REQUEST_URI "^/test/" allowed_url
Order deny,allow
Deny from all
Allow from env=allowed_url

## 上記以外のURLにBasic認証を設定
AuthUserFile "/path/to/.htpasswd"
AuthGroupFile /dev/null
AuthName "Restricted Files"
AuthType Basic
require valid-user

レンタルサーバーのBasic認証について

レンタルサーバーの場合、サーバーの管理画面から簡単にアクセス制限できる機能が備わっています。

エックスサーバー

>> アクセス制限（BASIC認証） | レンタルサーバーならエックスサーバー

ロリポップ！

>> アクセス制限の設定 / ロリポップ！レンタルサーバー

さくらのレンタルサーバー

>> ファイルマネージャーでアクセス制限をする – さくらのサポート情報

ConoHa WING

>> ディレクトリアクセス制限の設定をする｜ConoHa WINGサポート

サーバー管理画面にログインできる状況であれば、こちらから設定してみてもよいでしょう。

複数のユーザーIDを設定する

人によってIDとパスを分けたい、IDやパスを共有したくない場合、複数ユーザーIDとパスワードを指定できます。

設定は簡単で、.htpasswdファイルに複数行分けて記述するだけ。

testa:$apr1$6CbRmuf2$X.QSg7.g6GJ6rjaeBGLmO0
testb:$apr1$WDXdaHRn$D.fN23FxMj3YFgEVifDfC1
testc:$apr1$dxKxWuaA$a3esbXIQKiwwI.PBUSP3N.

こちらのパス生成サイトでは、一度にまとめて複数ID・パスを暗号化してくれるので便利です。

basic認証の解除方法

全体的に不要となった場合、いずれかの方法でBasic認証が解除できます。

Satisfy any
order allow,deny
allow from all

一部公開したいディレクトリがある場合、上記を記述した.htaccessファイルを新規作成し、該当のディレクトリにアップすればOKです。

<Files "test.html">
Satisfy any
order allow,deny
allow from all
</Files>

ファイルを指定する場合はFilesでファイルを指定します。

Basic認証はすり抜けできる？脆弱性について

Basic認証は、Base64と呼ばれる変換方式が使われます。

Base64は、英数字や記号・アルファベットなど、64種類の文字が使えますが、httpの場合、通信時にデータが暗号化されません。そのため第三者からログイン情報が抜き取られる危険性があります。

しかし、httpではなくhttpsであれば、第三者から見えないように暗号化して通信を行われます。

つまり、Basic認証で制限をかける場合、最低限SSL化（https）しておかなければいけません。

ただ、Basic認証は単純な文字列の入力でアクセスできるため、ブルートフォースアタック（総当たり攻撃）などのハッキングは防げない点は理解しておきましょう。

Basic認証とDigest認証

Apacheのアクセス制限方法には、Basic認証だけでなくDigest認証という機能もあります。

Digest認証はBasic認証と同じく、IDやパスの入力でアクセス制限をかける認証ですが、入力内容にMD5というハッシュ関数を用いて暗号化することで、セキュリティを高める仕組みです。

Basic認証のBase64と比較すると、セキュリティレベルはDigest認証のほうが高いです。

ただ、SSL化（https）したサイトであれば、Basic認証でも入力内容は暗号化されため、一般的なWebサイトであればBasic認証のほうが使われています。

そのため、Digest認証はSSL化しないサイトなどで使われる方式、とも言えます。

まとめ

当記事ではBasic認証の基礎知識や設定方法について解説しました。

冒頭で紹介した例もそうですが、一番大切なのは、作成したデータは一般公開してよいものなのか？と考え、判断することです。

初学者の方向けではありますが、「公開可否についての判断もできない」と第三者から見なされてしまえば、プロとしてお仕事を任せてもらえなくなってしまうかもしれません。

Basic認証は最低限のセキュリティ機能ではありますが、その点も理解したうえで、適切に使用することが大事です。

必要なときに困らないよう、当記事をブックマークして活用してもらえればと思います！

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。