はじめに
珍しく３日置いてのブログ公開です。一方FC2ブログの方は気づいたら1ケ月以上更新しなかったので広告がトップに躍り出てました。
さて、はてなブログは第一段階で予告していたダッシュボード・管理画面のHTTPS化を約７週間遅れで2017年11月20日に実施しました。お疲れさまでした。
第二段階は「hatenablog.com」「hatenablog.jp」「hateblo.jp」「hatenadiary.com」「hatenadiary.jp」のドメインのHTTPS化ですが、いつ実施されるか予測できない状況です。
"あトん"の希望は、来年に持ち越さず、すっきりした状態で年を越した方が良いので、年内実施で何とか頑張って頂き「新年明けましてSSL化おめでとう！」とお祝いし、SSL化初ブログを新年早々に書きたいですね。
しかし、はてなのHTTPS化が実際上手くいっているのか少し心配です。
皆さんはお気づきだったか分かりませんが、2017年11月21日の早朝のダッシュボード・管理画面は、一部混在コンテンツ（Mixed Content）があり「ありゃ」と思ってました。
仕事が終わり夜改めて確認したら混在コンテンツは修正され解消されてました。
はてなブログは相当あせっていたのか、一部確認不十分な状態で、ダッシュボード・管理画面のHTTPS化に踏み切ったと思われます。
まあ大した問題ではないので気にしませんが、良い機会なので、はてなのHTTPS化されたドメインのサブドメインはどこまでHTTPS化が進捗しているか一覧にしてみることにしました。
hatelabo.jp
11個サブドメインがありますが、HTTPS化が終っているのは「はてな匿名ダイアリー」「LGTM Camera」「大チェッカー」の3個でした。
「LGTM Camera」「大チェッカー」は特にお知らせは無かったので、こっそりHTTPS化したのでしょうか。
hatelaboは実験サイトなので、残り8個はHTTPS化せず閉じるか、一番後回しになるのではないでしょうか。
hatena.ne.jp
14個サブドメインがありますが、HTTPS化が終っているサイトは「ダッシュボード・管理画面」「新着記事」「アカウント設定」「B!KUMA」「Myはてな」「カラースターショップ」「障害情報」の7個でした。
また、「利用規約」「お問い合わせ窓口」「プロフィール」「機能変更、お知らせなど 」の4個はHTTPSが通るのですが、混在コンテンツとなってました。
個人的には「はてなブックマーク」を早くHTTPS化して欲しいと願ってます。
2020年5月5日 追記
現時点でHTTPS化されてないサイトは下記です。
【Quyo】http://quyo.hatelabo.jp/
【機能変更、お知らせなど 】https://hatena.g.hatena.ne.jp/
【プロフィール】https://profile.hatena.ne.jp/aTn/
個人的にはプロフィールがいまだHTTPS化されてないのはマズイのでは、と思ってます。
混在コンテンツ（Mixed Content）とは
HTTP で配信されたコンテンツがHTTPS のページに含まれる時、これを混在コンテンツ（Mixed Content）と呼ばれてます。
混合コンテンツには「アクティブ」と「パッシブ」の 2種類があります。
「アクティブ」な混在コンテンツは「画像」「動画」「音声」、「パッシブ」な混在コンテンツは「スクリプト（JS）」「スタイルシート」「iframe」Flash」が該当します。
この2種類の混在コンテンツはどのような方法で見分ければ良いのでしょうか。
混在コンテンツの発見方法
一番簡単な方法はブラウザのアドレスバーでの警告チェックです。但し、PCでChromeを使って下さいね。（注：スマホのアドレスバーには表示されません）
HTTP画像等が混じっている場合
このスクションは”あトん”のプロフィールのサイト画面です。
httpsが通ってますが、背景画像やファビコンがhttpコンテンツなので、緑の🔓マークではなく（i）となっており、混在コンテンツ有りの警告表示になってます。
HTTPスクリプト等が混じっている場合
アドレスバーの左側だけ見ていると見逃してしまうので注意が必要です。右側に注目して下さい。
HTTPスクリプト（JS）が混じっていると、Chromeだとアドレスバーの右側に盾マークに×が入ったアイコンが登場します。（Edgeも似たようなマークが出ます）
HTTPスクリプト（JS）の実行は危ないのでChromeとEdgeは強制的にブロックしてくれますが、Firefoxはブロックしないようです。
SSL化し保護された通信httpsと出ているに関わらず画面の表示がおかしい場合は、HTTPスクリプト（JS）が実行できないことが原因になっているかも知れませんね。
混在コンテンツの修正方法
ユーザが自分で埋め込んだHTTPのコンテンツは、ユーザ自身で修正する必要があります。
Chromeの開発ツールを使うと簡単に見つけることが出来ます。
マウスを右クリックし「検証」を選択し「Console」を選択します。
すると下のようなスクションが現れます。ここでは1個のエラーと14個の警告が表示されてます。
アクティブな混在コンテンツは黄色で表示されます。
警告対象のコンテンツはhttpの画像であることが分かります。
パッシブな混在コンテンツは赤字で表示されます。ここではJSで参照しているアドレスがHTTPであることが分かります。
修正方法は該当のコンテンツを差し替えるか、https化済であれば、アドレスの頭をhttp://→https://に修正するか、http:を抜いて//にします。
下記サイトに少し詳しい解説があるので参考にして下さい。
混合コンテンツの防止 | Web | Google Developers
混合コンテンツを見つけて修正するのは、重要なタスクですが、時間がかかることがあります。このガイドでは、このプロセスに役立つツールについて説明します。
developers.google.com
なお、ページ毎に該当箇所を探してソースを修正するのは時間がかかります。
シロマさん (id:shiromatakumi) がはてなブログ用の一括置換ツールを提供されているので、これを利用すると大変便利だと思います。
告知された記憶はないのですが、はてなフォトライフの画像は既にHTTPS対応済なので、はてなフォトライフの画像を使用している場合は、画像は特に何も修正する必要はありません。
確認したい方は、はてなフォトライフの画像アドレスをhttp→httpsに修正して見て下さい。https化されていることが分かると思います。
まとめ
混在コンテンツ（Mixed Content）の存在は常時SSL化を妨害します。
はてなブログがSSL化される迄まだ時間がありますので、自身のブログをチェックし、混在コンテンツを退治しましょう。
他のブログに移転する場合も同じ対応が必要ですので、多量に記事を持っている方は早めの作業をお勧めします。
♡いいねはこちら
この記事が「面白かった・参考になった」と感じた方は、♡いいねを押して頂けると嬉しいです。
https://t.co/KwIGsDiMxz
— heavy-peat (@AfterWork_Lab) May 4, 2020
HTTPS化を阻害する混在コンテンツに気を付けましょう。#HTTPS #混在コンテンツ #mixedcontent
それでは今回の記事はこれでおしまい。
余談
はてなブログのログイン画面はSSL化されてますが、100％安全ではないことをご存知でしょうか。（2020/5/5時点）
Firefoxが分かりやすいので、これで説明します。
下のスクションは正常な状態のログイン画面です。
次にウィンドウを一部変化させると、ある部分に混在コンテンツが出現し「この接続は安全ではありません」に変わるのです。
どこを変えらたこうなるか分かりますか？
・・・
・・・
・・・
・・・
答を言います。
ウィンドウの幅を弄るとフッター付近が変化します。
このスクションは変化前です。
ウィンドウの幅を狭めてみて下さい。
フッター付近にlang.pngとup-arrow.pngのHTTP画像が出現し、アドレスバーに警告表示が出ます。
「えっ。嘘！」と思われる方は修正される前にぜひお試し下さい。
目視チェックだと、このようなケースは見逃してしまう可能性が大きいので、専用ツールで一気に検索し自動変換すべきだと思いますが、テスト環境が無いと完璧な確認はなかなか難しいのかも知れませんね。
上着を脱いだら値札を取ってないセータを着ていた感じでカッコ悪いので、気づいたら早めに直した方が良いと思います。
なお、lang.pngとup-arrow.pngの画像が安全でないだけでID・パスワードの入力は安全ですのでご安心下さい。
