このブログを全面的にhttpsに切り替えたので、何をやったかを書いておく。
経緯
次のページに詳しいが、ブログやWebサイトをhttpsにせずhttpのままで運用していると、不都合があるっぽい:
はてなブログＳＳＬ暗号化通信(https)対応問題、１０月から起こるかもしれない問題を解りやすく書いてみました。 - 神戸グルメゲリラ
一方ではてなブログは、2017年10月から2018年初頭にかけて、ユーザーが設定することで全面HTTPS化ができるよう実装予定だとのことだった:
はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと - はてなブログ開発ブログ
そして、2018/02/22から、はてなの提供するドメインによるブログ(つまり、独自ドメインでないブログ)のhttpsによる配信ができるようになったとのこと。
はてなが提供するドメインのブログで、HTTPSで配信できる仕組みの提供を開始しました（追記あり） - はてなブログ開発ブログ
記事内でも書かれているが、HTTPSで配信されるページにHTTPで配信されるコンテンツ(CSS, Javascript, img, iframeなど)が混在している場合(mixed content)に問題になる。
ここで、私ははてなブログをはてなが提供するドメインで運用しているため、HTTPS配信への移行は簡単に達成できることが予想されるが、一方でWebフォントなどのリソースをさくらのレンタルサーバ上に置いているため、そのHTTPS化を行わないとそれらのリソースは読み込むことができなくなる。
さくらのレンタルサーバのSSL化
という訳で、ブログで利用するリソースを置いているさくらのレンタルサーバ(ライト)のHTTPS化を行う。
一つの方法として、共有SSLというものをさくらで提供している。これは、設定をするとexample.sakura.ne.jpの形の初期ドメインであればそのままHTTPS化ができるというものである。初期ドメインのまま利用しているばあいはこれを使うのが簡単で良いと思うが、一方でさくらのサブドメインを含む独自ドメインについては共有SSLはセキュリティ的によろしくなく*1、非推奨とのことである。
共有SSL｜さくらのレンタルサーバ
他の方法として、独自でSSL証明書を取得して、HTTPS化する方法があるのだが、これは独自ドメインのためのもので、さくらのサブドメインでは使うことができないようである。
結局、今回は共有SSLを設定し、example.sakura.ne.jpの形の初期ドメインで使うことにして、ブログ記事で参照しているURLを書き換えた。
SSLの設定はサーバコントロールパネルから行う:
【共有SSL】設定方法 – さくらのサポート情報
さくらの共有SSLはプロキシとして動作しているため、細やかな設定が難しい場合があるらしい:
さくらのレンタルサーバでHTTPS(SNI SSL)な独自ドメインのWordpressサイトを構築する際の注意点 - Qiita
はてなブログの設定
最終的にはてなブログをHTTPS化したのは2018年3月28日であるが、Mixed contentの問題があるため、HTTPで埋め込んでいるものは事前に書き換えておいた。
特にさくらのレンタルサーバをSSL化したため、そこに置いていたリソースのURLがすべて変更になったので、はてなブログの記事で参照しているリソースをすべてHTTPSのものに書き換えた。
Mixed content対策
さくらのレンタルサーバに置いてたリソースはHTTPSに移行したが、他に、はてな記法の[～:embed]で埋め込んだものなどがちゃんと読み込めるか記事を見ていって確認する。
Mixed contentがある場合、ブラウザのコンソールにエラーが表示されるらしい。それも参考に潰していく。
サイト自体はhttp配信であるもののoEmbedなどで埋め込まれるページはhttpsで配信しているサービスも多く、割とそのままでもなんとかなる様であった。
mixed contentの制限があるのでhttpで埋め込んでるコンテンツがないか探していく。
- リンクを張っているのみ→そのままでよい
- カスタマイズCSSなどで参照している外部ファイル→HTTPSへの対応が必要
- はてなフォトライフの画像の埋め込み→はてな記法で埋め込んでる限り、はてな側でよしなにしてくれるっぽい。
- はてなのhttp記法[～:sound]で音声ファイルのプレーヤを表示するのはhttpsに対応していないので、HTML5の<audio>タグ等で置き換える。
- はてなのhttp記法[～:embed]で埋め込み→埋め込み先がhttpsに対応していない場合、困るかもしれない。
- oEmbedによるブログカード等の埋め込みが表示されなくなっていた場合、記事の編集画面を開いて保存し直したら表示される様になったことがある。
埋め込んでいた他サイトの動画やブログカードについて次のような感じであった。次のようなサイトは、URLがhttp://～のままでもはてな記法の埋め込み[http://～:embed]でうまくいった。一旦記事の編集画面を開いて保存し直すと表示されるようになるものもあった。
- ニコニコ動画: サイトはhttpであるが、埋め込み用のページはhttpsで配信されている。
- はてなブログ: ブログがhttp/httpsに関わらず、oEmbedで指定された埋め込み用のページはhttpsで配信されている。
- Qiita: httpでアクセスするとhttpsに飛ばされる。
はてなブログでtex記法を使っている場合、mixed content (混在表示コンテンツ)の警告が表示されることがあった。これは、一度記事の編集画面を開いて保存し直すと直るらしい。
はてなが提供するドメインのブログで、HTTPSで配信できる仕組みの提供を開始しました（追記あり） - はてなブログ開発ブログの追記を参照。
とりあえずしばらくは様子見。とはいってもhttpでの配信に戻すことはできないのだけど。
