Cloudflare Pages Functionsで特定のパラメータがある場合にのみBasic認証を掛ける

to-R Mediaで以下のような記事を書きました。

https://www.to-r.net/media/next-app-router-wordpress/

そのため、https://www.to-r.net/media/[記事id]/?status=draft がプレビューURLであることをインターネットに公開してしまったのでセキュリティ対策の一環でプレビュー画面にBasic認証をかけたほうが良い状況になりました。(重要情報ではなかったので今まではBasic認証を掛けてなかった)

https://www.to-r.net配下はCloudflare Pages FunctionsでBasic認証の制御をしているのでこちらに条件を追加するだけで対応可能です。

https://www.to-r.net/media/cloudflare-pages-basic2/

こちらの記事で紹介しているコードの条件に条件にsearchParamsの条件を追加して?status=draftがあるプレビュー画面にもBasic認証を掛けることができるようになります。

functions/_middleware.js

async function handleRequest({ next, request }) {
  const url = new URL(request.url);

  // 本番環境ではベーシック認証をかけないがプレビュー画面ではベーシック認証をかける
  if (
    url.origin === "https://www.to-r.net" &&
+    url.searchParams.get("status") !== "draft"
  ) {
    return await next();
  }

  // これ以降は以前紹介したコードのまま

}

Edge Functionベースの認証は初期設定が面倒くさい分運用タイミングで柔軟に対応できるので便利ですね。