はてな村定点観測所

運動、瞑想、睡眠、野菜350g

サルでもわかる はてなブログHTTPS

   

はてなブログHTTPS対応記事についての混乱

はてなブログがHTTPS対応方針についての記事を出しました。三段階に分けてHTTPS化を進めていくそうです。

staff.hatenablog.com

しかし、この記事の説明がわかりにくくて、かなりの人が「何のことか分からない」と混乱しているようでした。簡単にですが幾つかの疑問について解説してみようと思います。サルでもわかる はてなブログHTTPS!

f:id:netcraft3:20170925235553p:plain:w300

混在コンテンツ(Mixed Content)問題って何?

ブログをHTTPS化した後に、http://で画像などのファイルを読み込んでいる記述があるとブラウザが警告を出すようになります。

Internet Explorerではポップアップが出ます。ChromeやFirefoxでは現状アドレスバーに△の「!」マークがつきます。ネットを使っていてこんな警告を見たことはありませんか?

Internet Explorer

f:id:netcraft3:20170925222847p:plain

f:id:netcraft3:20170925222805j:plain

Chrome

f:id:netcraft3:20170925223017p:plain

Firefox

f:id:netcraft3:20170925223101j:plain

これらの警告を見掛けたことがある人は多いと思います。この警告が出てもページ内容自体は表示できますが、ブラウザの警告が出るのはあまり良い状態ではないですよね。Mixed Content対応をしていないと、このブラウザ警告が出てしまいます。

Mixed Contentの原因は何?

f:id:netcraft3:20170925235207p:plain

HTTPS化したらページを表示する時の通信は全て暗号化されているはずなのに、そのページ内で使われている画像などの一部のファイルの読み込みがHTTPのまま(暗号化通信と平文の通信がごった煮状態)であることが原因です。

Mixed Contentにならないようにブログのリンクは全部https://にする必要があるの?

ここで注意してほしいのは画像など「ファイルの読み込み」に関する警告であるという点です。テキストリンク(aタグのリンク)は対象外です。テキストリンクを設置していても何かファイルが読み込まれるわけではないですよね。aタグのテキストリンクはHTTPのままで問題ありません。

f:id:netcraft3:20170925234853p:plain

修正が必要なのはそのページでファイルが読み込まれる<img src="http://のような画像リンクです。画像のリンク先がHTTPのままになっていると、ページ表示中にHTTPの通信が発生してしまいます。

それ以外では、はてなブログのデザイン設定で使われているCSS(.cssファイル)やJavaScript(.jsファイル)がhttp://で記述されていると、ブラウザではページを表示する時にCSSファイルやファイルJavaScriptを読み込むのでやはりブラウザ警告は出てしまいます。これらのファイルはhttps://の記述に変えていく必要があります。またCSSやJavaScriptの記述の中で呼ばれているファイルも全てhttpsにしなければなりません。iframeタグでhttp://で読み込まれている場合も修正が必要です。

Mixed Contentは、記事内だけではなくデザイン設定も確認する必要があります。(厳密に言うと他にも色々あるのですが今回はサルにもわかる解説ということで…)。

画像やJavaScriptなどは全部httpsに置き換えてOK?

ページ内の画像・CSS・JavaScriptがどこのサービスから読み込んでいるかに依ります。https://での読み込みに対応していないサービスから読み込んでいた場合は、勝手にhttps://に書き換えてもリンク切れになって画像やデザインが表示できなくなってしまいます。

置換にあたってはhttps://の読み込みに対応しているか確認する必要があるでしょう。対応していない場合、他のサービスに乗り換えることなども検討する必要があると思います。

はてなサービスについては現状httpになっているものは今後httpsに自動的に置き換えられていくと思われますので(たぶん)、HTML直書きでなければいったん放置して様子見が良いと思います。また、はてなフォトライフの画像呼び出しは既に自動的にhttpsになっているかと思います。

この説明を読んでも何をしたら良いのかわからない

はてながブログをHTTPS化するまではまだもう少し時間が掛かるのと、全てのブログをある時に強制的にHTTPSに移行するのではなく管理画面でHTTPかHTTPSかを選べる状態にすると思われます。したがって、色々な人のノウハウ記事が溜まったり、はてながどこまで対応するのかを見極めてから作業しても遅くはないと思います。

何をすべきかが本当に分からない人は、落ち着いて少し様子を見てみましょう。

独自ドメインの人の証明書はどうなるの?

はてなブログドメインのブログについてはワイルドカード証明書という証明書1枚であらゆるサブドメインをカバーできるのに対し、独自ドメインについてはワイルドカード証明書が使えないことが、今まではてながHTTPS対応に腰が重かった理由の1つだろうなと思います。

f:id:netcraft3:20170925235435p:plain

おそらくLet's Encryptという認証局の無料SSL証明書を使う方式になるのかと思われます。そのため独自に証明書を購入する必要はありません。むしろ独自証明書は(今後のはてなブログの実装次第ですが)設定できない可能性もあります。

Let's Encryptは最近登場した認証局ですが、広く使われています。最近ではロリポップなどもLet's Encryptを使ったSSL証明書発行サービスを出したので、ロリポップでWordPressを使っている方で利用されている人も多いと思います。

internet.watch.impress.co.jp

f:id:netcraft3:20170926005743p:plain

ロリポップの無料SSL証明書は独自ドメインにチェックして申し込むだけで証明書が取得できるので、はてなもそれくらい簡単にしてくれる(はず)と思いたいところです…。

つまり独自ドメイン使っている人が必要な作業は?

証明書関連はおそらく管理画面操作だけになると思われるので、はてなからの続報を待って様子を見ましょう。

Mixed Content対策が必要になるのは、はてなブログドメインと同じです。あらかじめ進めておいた方が良いと思います。

Let's Encryptのデメリットは?

無料でSSL証明書が取れるサービスとして人気のLet's Encryptですが、デメリットとしては一部のガラケーが非対応であることが挙げられると思います。

そういえばはてなブログってガラケー対応は今はどうなっているんだっけ?と思って、ドコモP903iの設定で閲覧してみました。画像が変になったりしていますが、ガラケーでも閲覧はできるようですね。

f:id:netcraft3:20170926022636p:plain

Let's EncryptでHTTPS化した場合、一部のガラケーでは表示自体できなくなるのでその点は注意が必要かもしれません。

その他、質問があれば何でも

HTTPSやSSLについて質問があれば何でもお寄せください。

「Let's EncryptをWordPressで使いたい場合はどうすればいいの?」「オレオレ認証局を立ててオレオレ証明書を発行したいんだけど」「メールサーバーをSSL化したいんだけど」などもお答えできると思います。

追記

置き換え作業についてはid:c-miyaさんの以下の記事が参考になると思います。

www.foxism.jp

id:imslotterさんがMixed Contentを抽出するPythonのスクリプトを公開しました。Pythonが使える方には便利なツールだと思います。

www.procrasist.com

何をすべきか分からない人はid:azulitchiさんの漫画を読んで落ち着きましょう。何も分からないまま急いで対応してリンク切れを生むよりは、様子を見ていた方が賢明です。

azulitchi.hatenablog.jp

食べる!SSL! ―HTTPS環境構築から始めるSSL入門

食べる!SSL! ―HTTPS環境構築から始めるSSL入門