Web サイトや Web アプリにパスワードをかける方法

Vercel

1. Vercel のダッシュボードでプロジェクトを開き、Settings、Deployment Protection の順に進みます。
2. Password Protection のトグルをオンにします。
3. 保護する範囲を選びます。Standard Protection では本番ドメインが保護されないので、メインのアドレスも守るには All Deployments を選びます。
4. パスワードを入力して Save を選びます。訪問者はデプロイごとに1回入力し、Cookie で記憶されます。

料金 Pro プランのみ: 保護するプロジェクトごとに月額 $20。Enterprise では含まれていて、Hobby では使えません。

すべてのプランで使える無料の方法は Vercel Authentication で、今は本番環境も対象です。訪問者はそのプロジェクトにアクセスできる Vercel のアカウントでログインするので、同僚一人ひとりにアカウントが必要です。

Netlify

1. サイトを開き、Project configuration、General、Visitor access、Password Protection の順に進みます。
2. Configure Password Protection、Basic password protection の順に選び、パスワードを入力します。
3. プレビューだけでなく本番サイトも対象にするため All deploys を選び、Save を選びます。
4. クレジット制の新しい Pro プランでは、同じ設定が Visitor access、Project visibility にあります。Password を選んでください。

/*  Basic-Auth: dana:a-long-password sam:another-long-password

料金 Pro プラン(月額 $20、メンバー数無制限)または Enterprise。Free と Personal では使えません。

サイトの一部にユーザー名とパスワードをかけるなら、Pro と Enterprise では下のように _headers ファイルに Basic-Auth のルールを書くこともできます。なお Netlify によると、ベーシック認証にはログアウトの方法がありません。

Cloudflare Access

1. ドメインが Cloudflare にある必要があります。ダッシュボードで Zero Trust、Integrations、Identity providers の順に進み、One-time PIN を追加します。
2. Access controls、Applications に進んで Create new application、Self-hosted and private の順に選び、サイトのホスト名を追加します。
3. Allow ポリシーを追加します。会社全体なら Emails ending in に @yourcompany.com を、特定の人なら Emails を使います。それ以外の人は、Access が標準で拒否します。
4. Create を選びます。訪問者はメールアドレスを入力し、10分間1回だけ使える PIN を受け取って入ります。

料金 50ユーザーまで無料。それ以降は1ユーザーあたり月額 $7(年払い)。

これは共有パスワードではありません。一人ひとりが自分の受信箱を読めることを証明するので、人ごとに確認して外せます。

ベーシック認証付きの Cloudflare Worker

1. Cloudflare の Workers 向けベーシック認証のサンプルから始めます。ブラウザにユーザー名とパスワードを求め、処理時間からパスワードが漏れない方法で照合します。
2. パスワードはコードに書かず、下のコマンドでシークレットとして保存します。
3. HTTPS でのみ配信します。そうしないと、ベーシック認証はパスワードを暗号化せずに送ります。

npx wrangler secret put PASSWORD

料金 Workers Free で1日10万リクエストまで使えます。Workers Paid は月額 $5 からです。

Cloudflare はこのサンプルを本番環境には向かないとしていて、代わりに Cloudflare Access を案内しています。

自分のサーバー

1. htpasswd ツール(Debian と Ubuntu ではパッケージ apache2-utils、Red Hat では httpd-tools)をインストールし、1人1行のパスワードファイルを作ります。
2. nginx では、下のようにサイトに auth_basic と auth_basic_user_file を追加します。Apache では AuthType Basic、AuthUserFile、Require valid-user を使います。
3. パスワードファイルは Web 用のフォルダの外に置き、HTTPS を使います。Apache のドキュメントにも、ベーシック認証はパスワードを暗号化せずに送ると注意書きがあります。

sudo htpasswd -c /etc/apache2/.htpasswd dana

# nginx
location / {
    auth_basic           "Staff only";
    auth_basic_user_file /etc/apache2/.htpasswd;
}

料金 すでに動かしているサーバーなら無料です。

ベーシック認証では一人ひとりに別のパスワードを持たせられるので、1つの共有パスワードよりは安全です。それでも、人の追加と削除はサーバー上で手作業になります。