はてな村定点観測所

運動、瞑想、睡眠、野菜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://の記述に変えていく必要があります。

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

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

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

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

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

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

はてなブログドメインのブログについてはワイルドカード証明書という証明書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証明書は独自ドメインにチェックして申し込むだけで証明書が取得できるので、はてなもそれくらい簡単にしてくれる(はず)と思いたいところです…。

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

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

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

f:id:netcraft3:20170925233349p:plain:w150

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

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

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

「オレオレ認証局を立ててオレオレ証明書を発行したいんだけど」「メールサーバーをSSL化したいんだけど」などもお答えできると思います。

追記:Mixed Content抽出Pythonスクリプト

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

www.procrasist.com