Cloudflare の設定変更で Mixed Content が解決した話
TL;DR
- CloudflareのSSL/TLS 暗号化モードを
フルに設定する - 直し方はわかったけど、原因がわからない
経緯
iPhoneで、このブログサイトを開いたらURLの横に警告マークがでていました。 理由はリダイレクト時にhttpsでなくhttp通信になり、Mixed Content となっていました。 ただ、心当たりがないので調べました。
ブログサイトの構成
- App: Astroで作成した静的ページ
- DNS: Cloudflare（Proxyモードを利用）
- Storage: GitHub Pages
なぜリダイレクトされるのか
こちらはシンプルにTrailing Slashの話でした。
GitHub Pagesは/blog/index.htmlの資産に/blogでアクセスすると/blog/へリダイレクトされます。
パスを書き直せばリダイレクトされなくなります。 不思議だったのはリダイレクトされた時に、なぜかhttpになってしまうということでした。
httpにリダイレクトされないようにする
CloudflareのProxyモード
CloudflareのDNSにはセキュリティを高めるProxyモードがあります。 これを設定すると、DNSへ問い合わせてもオリジン（今回だとGitHub Pages）のIPでなく、CloudflareのIPアドレスを返却するようになります。 これにより、サイトがどこで運用されているかを一般ユーザから隠すことができます。
Cloudflare の DNS の基本：プロキシ化って何？
最初、このProxyは通信を転送するだけだと思っていたのですが証明書発行・通信暗号化もしてくれるようです。 つまり、ブラウザとProxy間の通信暗号化はCloudflareの証明書で行われ、Proxyとオリジン間の通信は別になるということです。
Proxyとオリジン間通信の設定
その設定がSSL/TLS暗号化モードになります。
デフォルトはフレキシブルになっており、Proxyとオリジン間は暗号化されません。
Flexible - SSL/TLS encryption modes
つまり、今まではProxyとGitHubPagesの通信はhttpでアクセスしていたようです。 また、GitHubPagesがhttpで通信がきた際はhttpsへリダイレクトしているはずなので2回通信が走っていたのではないかと想像できます。
この設定をフルに変更することで、Proxyとオリジン間が暗号化されるようになります。
結果として、本問題のhttpリダイレクトが起こらなくなりました。
なぜなのか
シンプルに考えると、GitHubPagesがhttpにリダイレクトするレスポンスを返しているってことなのですが再現することはできなかったです。 あとは、Cloudflare側がレスポンスを書き換えていたのかなと思ったりしてます。 例えば、最初のGitHubPagesへのリクエストはhttpになっていたはずなので、そのプロトコルに合わせてリダイレクト時のプロトコルを書き換えていたとか。