Cloudflare Zero Trust で保護したサイトが PWA にならない
自動運転技術開発センターでは、内部ドキュメント管理に BookStack を使用しており、この BookStack を PWA にできないかと思ったことがきっかけでした。
調べてみると、すでに BookStackApp/BookStack#4430 で PWA がサポートされており、デモサイトでもインストールボタンが表示されていました。
BookStack デモサイトで PWA のインストールボタンが表示されている様子
原因を探るために開発者ツールの Network タブを確認したところ、manifest.json へのアクセスが Cloudflare Zero Trust の認証ページにリダイレクトされていることがわかりました。
Chrome 開発者ツールのネットワークログで manifest.json が 302 リダイレクトされている
調べてみると、Cloudflare コミュニティでは link タグに crossorigin="use-credentials" を付与すると解決するという情報がありました。
Cloudflare access manifest.json issues - SSE and Zero trust / Access - Cloudflare Community
しかし今回は BookStack 本体に変更を加えたくなかったため、Zero Trust 側の設定で対応することにしました。
まず、Cloudflare Zero Trust で保護をバイパスするポリシーを作成します。ポリシーのアクションを Bypass に設定し、ルールのセレクターは Everyone を選択します。
次に、このポリシーを適用するアプリケーションを新規作成します。ホスト名には対象サイトのホスト名を入力し、パス部分には manifest.json を指定します。
また、アプリランチャーの一覧には表示させたくないため、アプリランチャーでアプリケーションを表示するは OFF にしました。
これで無事に PWA のインストールボタンが表示されるようになりました！ 🎉
追記 (2025/10/02)
しかし今回は BookStack 本体に変更を加えたくなかったため
と書きましたが、よくよく考えたら PR を作成すればいいじゃないかと気が付いたのでサクッと作りました： Fix PWA manifest access behind authenticated proxies by tfnh621 · Pull Request #5820 · BookStackApp/BookStack
追記２ (2025/10/08)
PR がマージされ、BookStack v25.07.3 で修正されました。
Release BookStack v25.07.3 · BookStackApp/BookStack
Discussion