毛布があればそれでいい

いろんなこと書いていく雑記系のブログです。

はてなブログをSSL化するなら早めの方が良いみたい

はてなブログをSSL化するなら早めの方が良いみたい

技術的な事はあまりよくわかりませんが、HTTPS配信・常時SSL化した方が良いみたい。

はてなブログでは簡単に常時SSL化できるようなので、やってみようと思います。

常時SSLとは

常時SSLとはウェブサイト内のページ全てをSSL暗号化するセキュリティです。
ちょっと前まではネットショッピングする時の名前や住所、クレジットカード番号入力など、個人情報の重要なページをSSL暗号化していました。

現在では全てのウェブページでSSL暗号化する動きになっていて、Googleでも常時SSLを採用しているところを検索順位で優先しているようです。
常時SSLによって通信内容の盗聴や改ざん、なりすましなどを防ぎ、私たちがより安心・安全にインターネットを利用できるようになっています。

はてなブログ常時SSL化する

まずは自分のはてなブログ常時SSL化されているかを確認してみます。
自分のはてなブログにアクセスしてアドレスを見てみましょう。

はてなブログSSL確認

Chromeの場合は「保護されていない通信」と表示され、アドレスをコピーしてメモ帳なんかに貼り付けすると「http://」から始まっています。
この場合はSSL化されていません。

SSL化されている場合にはhttps://」から始まるので、他サイトの場合もアドレスを見ればすぐにわかります。

HTTPS配信

はてなブログHTTPS配信

はてなブログダッシュボードから「設定」→「詳細設定」を押します。
HTTPS配信」の欄が「無効」になっていると思うので「HTTPS配信の状況を確認する」を押します。

HTTPS配信の状況

はてなブログHTTPS配信の状況

注意書きがあるのでよく読んでおきましょう。

問題なければ「変更する」を押してHTTPS配信・常時SSL化の完了です。

常時SSL化完了

はてなブログ常時SSL

保護されていない通信」が消えて「http://」→「https://」に変わりました。
これで無事にはてなブログ常時SSL化が完了しました。

このページは承認されていないソースからのスクリプトを読み込もうとしています

はてなブログ混在コンテンツ(Mixed Content)

よく見てみるとアドレスの右端に謎のマークが。

「このページは承認されていないソースからのスクリプトを読み込もうとしています」

クリックすると

はてなブログ安全ではないコンテンツ

「安全ではないコンテンツがブロックされました」

なんなんだこれは・・・
「安全ではないスクリプトを読み込む」をクリックしてみたら

はてなブログこのサイトへの接続は保護されていません

せっかくのSSL化が台無しに。
調べてみると「混在コンテンツMixed Content)の解消」をしないといけないようです。

混在コンテンツMixed Content)の解消

HTTPS配信の状況のところに書いてあった注意書きの一つ

が当てはまるようです。

HTTPSのページを閲覧するときに、ページ内にHTTPの画像やJavaScriptがある場合は、Webブラウザ混在コンテンツMixed Content)と該当箇所をブロックするため、表示されません。
過去記事で、記事編集画面の編集サイドバーにある各種の貼り付け(商品紹介、動画や画像貼り付けなど)を行ったものについては、ごく一部にHTTPS未対応のものがあります。大変お手数ですが、ご自身で記事を再度編集してご対応いただくようお願いいたします。新規記事で、編集サイドバーから貼り付けたものは、全てHTTPSで展開します。

ページをHTTPSにしたのに画像やJavaScriptにHTTPが混ざっててダメだよってことみたい。
なので混在コンテンツMixed Content)の解消作業が必要になります。

混在コンテンツMixed Content)の確認方法

混在コンテンツMixed Content)があるのかどうかを調べるには「開発者ツール」を利用するとわかるみたい。Chromeブラウザでキーボードの「F12」を押すと「開発者ツール」が立ち上がります。
正直難しすぎる内容ですが、はてなブログのヘルプを頼りに見ていきます。

はてなブログ開発者ツール

Mixed Content」と書かれた赤い部分が混在コンテンツのようです。見ていくと「http://~」と書かれた部分がありますね。
この部分を「https://~」と書き直せば解消されるようです。

はてなブログheadに要素を追加

該当の箇所は「設定」→「詳細設定」→「headに要素を追加」にコピペしたスクリプトでしたので「https://~」と書き直して混在コンテンツMixed Content)が解消されました。

他にも何箇所か、同様に直しました。さらにどういったのがあるのかはヘルプを参考にするのが良いと思います。

help.hatenablog.com

古くからやっているブログの場合には大きな弊害がでるようですので、事前に調べてからHTTPS配信・常時SSL化する方が良いみたいです。

最近ブログを始めたばかりの人は安心・安全に利用できる、SEOなどのメリットから早い段階でHTTPS配信・常時SSL化しておくことをオススメしますよ。