割と面倒くさい
開発環境や管理画面、秘密のページに Basic 認証かけることは、結構あって、ちゃちゃっとかけたいけど、意外と面倒くさい。
Basic 認証のかけかた基本
最近は、React.js, Next.js を取り扱うことが多い。
React.js で Basic 認証
React をサーバに Deploy する時は、Build して Nginx で動かすことが多いと思われるので、Nginx で .htpasswd すれば良い。
Next.js で Basic 認証
Next.js の場合、middleware を使ってかける。middleware の取り扱いは、バージョンによって大きく異るので、ググる時は、Next.js のバージョンに気をつけて。というか、最初に公式ドキュメントを見るのが良い。
Next.js v12 の場合
AWS で CloudFront を通した場合
上記の方法で Basic 認証を書けている場合、CloudFront 通すと Basic 認証が通らなくなる。
理由は、レスポンスヘッダが足らないから。
レスポンスヘッダを追加する
ビヘイビアを編集し、レスポンスヘッダに Authorization を追加する。キャッシュタイムを0にする。
CloudFront Function で Basic 認証する
開発環境に CloudFront 使うのか？という話はあるけど、Production ではかけないし、Upstream にエスカレーションしていく間に機能を落としていくのもなんだかなーとも思うので、開発環境にも CloudFront 刺してる場合は、こっちの方が良い。アプリケーションでかけた Basic 認証は解除し、CloudFront Function を作成して、これまたビヘイビアで追加する。
AWS WAF で Basic 認証する
WAF を使っても良い。
開発環境への Basic 認証みたいなものは、外出しの方が良い。Basic 認証に限らず、こういう系は Solution をいくつか持っておくのが良い。
WebView で Basic 認証
アプリ次第？だけど、基本的にできないと思っておいて良い（はず）。WebView で Basic 認証かけたいことなんてある？と思うかも知れないが、例えば Metamask と連携する Web アプリの開発環境とか。実機テストしようとすると、Basic 認証が突破できないんじゃなくて、そもそも開けない。
いずれ変わるのかも知れないけど、Basic 認証以外の制限を考えた方が良い。もしくは、WebView で表示されるのもなかなかしんどいので、Metamask は、やめとこう。とか。
Basic 認証をやり直す
まぁそんなこんなで、何度もやり直したい時期もある。Basic 認証一回通すとキャッシュされて出てこなくなる。すぐにやり直したい場合は、ドメインの前に 任意の文字列＠ を付けるとログアウト？される。
https://me@example.com みたいなこと。
他にもありそうな気がするけど、今日はこんなところで。