要約

Netlify + GatsbyJS + Netlify CMSの環境で Deploy Preview に Selective Password Protection の機能を使ってBasic認証を掛けたら、Netlify CMSの管理画面にアクセス出来なくなってしまった
Netlify CMSに関わるディレクトリを除いてBasic認証を試したが、GatsbyJSを使っている関係上SPAのため、どこか1ページでもアクセスできると全てのページが見られる脆弱性があった
Netlify のサポートに問い合わせた結果、Basic認証は永続的な認証を意図したものではなく、サイト全体に認証を掛けたいのであればSite-wide protectionを掛けた方がいいという回答だった
Site-wide protectionを掛けると公開されているページを含むサイト全部にパスワードが掛かってしまうため、GatsbyJS + Netlify CMSとBasic認証の併用は不可能という結論になった

問題

GatsbyJS でサイトを構築
ホスティングに Netlify を使用
Netlify CMS で更新を簡便化している

という環境での話です。

Netlify には GitHub でPRを作成した時、自動でプレビュー環境を作ってそのリンクを生成してくれるDeploy Previewという機能があります。

しかし、プレビュー環境はURLさえ分かれば誰でもリンクできてしまうので機密性に乏しく、そのため同じく Netlify の機能にある Selective Password Protection を使ってプレビュー環境にBasic認証を掛けようとしました (Basic認証はProプラン以上で使用可能)。

プレビュー環境に認証を掛けること自体は上手くいきましたが、認証が掛かっている状態で Netlify CMS の管理画面にアクセスしようとするとBasic認証ダイアログが出て管理画面に永遠に入れないバグに遭遇しました。

試したこと

Netlify CMS に関するディレクトリ以外にBasic認証を掛けようとしましたが、GatsbyJS を使っている関係上SPAなので、どれか1ページでもアクセスできると全てのページにアクセスできてしまう脆弱性がありました (存在しているページにはBasic認証が掛かるが、404のページには掛からず、結果として存在しないページにアクセスすると全て見れてしまう)。

サポートに問い合わせたところ、

Hello,
The basic-auth header isn't really meant to be permanent authentication solution. You could try setting a > > password for your site here: https://app.netlify.com/sites/[サイトURL]/settings/access#password-jwt-secret and see if that works for you. You'll also want to remove the basic-auth header.

という回答。

つまり、Basic認証は永続的な認証を意図されたものではなく、サイト全体に認証を掛けたいのであればSite-wide protectionを掛けた方がいいとのことでした。

Site-wide protection を掛けると公開されているページ全てにパスワードが掛かってしまうため、GatsbyJS + Netlify CMS とBasic認証の併用は不可能という結論になりました。

Netlify CMS を使っていてBasic認証を試そうと思っている方はお気をつけください。