
常時SSL化で盛大にハマった話【備忘録】
お久しぶりです。もう大晦日ですね!
今年は1日1noteを目指していたのに、途中案件が超!忙しくなってできなくなってしまい、、反省です。
そんな年の瀬に盛大にハマって3日ほど抜け出せなかった常時SSL化のお話。備忘録も兼ねて投稿してみます。
◆結論
前任者がCloudflareというCDNサービスを導入していたため、http⇔https間でリダイレクトループが発生。ドメインとサーバーを直接紐付けすることにより無事解決!
◆前提
まず前提として、クライアント様より依頼されたこちらの常時SSL化案件。
LP制作をしていた時にhttp://でもhttps://でもアクセスできることに気付き、常時SSL化を提案したのですが、前の外注さんに依頼したんだけど結局できずにお金だけ取られて、、とのことで再度私に依頼してくれました。
この時はなんでできなかったんだろうなー?なんて呑気に構えてたんですが、それが解決するのにこんなに時間がかかるとは・・・!
◆常時SSL化とは
「常時SSL化」とは、Webサイト全体をHTTPS化(通信の暗号化)することを指します。
今までは、Webサイト上でパスワードや個人情報等を入力するページ(ログインページやクレジットカード決済ページなど)のみをHTTPS化し、特に重要な情報のみ保護するという形式が一般的でした。
近年では、GoogleなどHTTPS化を推進する組織の働きもあって世間の意識が高まり、Webサイトの常時SSL化が求められています。
JPDirectより引用
今回の作業で言えば、SSL証明書は導入済みでhttpsでもアクセスできる状態だったのですが、httpのページもそのまま残ってしまっていました。httpのページにアクセスしても自動的にhttpsにリダイレクトされるよう、設定するのが今回の依頼内容でした。
◆普通に常時SSL化してみた
まずは普通に常時SSL化してみました。
ワードプレスだったのでワードプレスアドレス・サイトアドレス両方をhttpからhttpsに変更して保存。そしてこの時点でサイトが見れなくなる(汗)あれ、ここいじるだけで見れなくなるっけー?と思いつつ.htaccessでリダイレクト設定をしちゃう←。
当然エラーが直るわけもなく。何度試してもダメ。
その時のエラーが「ERR_TOO_MANY_REDIRECTS」、いわゆるリダイレクトループにハマっているという状態。エラーメッセージでググると出るわ出るわ。結構ポピュラーなエラーなんですね。
こちらのサイトがかなり詳しく載ってたのでリダイレクトループにハマってしまったらみてみるのがおすすめ。
◆REDIRECT PATHを導入
Google Chromeの拡張機能にある、REDIRECT PATHを導入。
どんな風にしてページ遷移が行われているかを可視化できる拡張機能。最初は何をどう見ればいいのかもよく分からなかったが、使用しているのがXサーバーにも関わらず、サーバーの項目に「Cloudflare」の文字が。
Xサーバーであれば「nginx」と表示されるはず、というのが調べていた中で分かったのでCloudflareについて検索。CloudflareはCDNサービスというもので、サーバーの負荷を軽減させたり、セキュリティを向上させたりといった効果があるらしい。。
◆CDNとは
CDNはContent Delivery Network(コンテンツ・デリバリ・ネットワーク)の略です。一般に、広範囲にネットワークしたサーバに配信したいコンテンツをコピーし、これらのサーバを通じて、コンテンツにアクセスしようとするエンドユーザとの(物理的・ネットワーク的な)距離が最も近いサーバから配信するものです。主にウェブコンテンツの配信速度を向上させたり、安定性や可用性を向上させたりといった目的で使われます。常に多くのアクセスを集めるウェブサイトでも使われますし、突発的にアクセスが集中する場合のあるウェブサイトやウェブサービスにおいて使われることも多いものです。
CDNetworksより引用
CloudflareはこのCDNサービスの一つで、無料で導入できるもののようなんですが、問題だったのがこのCloudflareとWordpress間のアクセスはhttpで行われてるという点です。
無料プランのSSLはFlexible SSLがデフォルトなわけですが、Flexible SSLはブラウザとCloudFlareの間のみhttpsな接続を可能にします。逆に言えば、CloudFlareとwordpressの間はhttpな接続というわけです。つまり、ブラウザがhttpsなリクエストをwordpressにしても、wordpressにはhttpなリクエストに見えるわけです。
Sorry for Team KILLingより引用
Cloudflareの方でFlexible SSLではなく、FullやFull(Strict)に変更できれば解決したようなのですが、何故か前任者が心当たりがないということでCloudflareへのログイン情報が分からず、登録し直すと二重登録になってしまうのでそれもどうかと考えた結果、Cloudflareを辞めてドメインとサーバーを直接紐づけることにしました。
◆ドメインとサーバーを直接紐付け
変更方法は簡単!ドメインのネームサーバーをCloudflareのものからサーバーのものに変更するだけです。
その後数時間して常時SSL化作業を試みたもののまだCloudflareを経由していたので、丸1日以上経過してから再度作業をし、無事に常時SSL化作業を完了させることができました。本当によかったー!!
◆まとめ
今回はかなりイレギュラーなエラーだったかもしれませんが、同じようなことで困っている人の力になれれば・・・!とnote投稿してみました。
リダイレクトループが発生した場合、まずはGoogle Chromeの拡張機能、REDIRECT PATHを導入してみてリダイレクトの流れを見てみることをお勧めします。
それでは皆さん、良いお年をお過ごしください!