毛布があればそれでいい

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

はてなブログを常時SSL化に変更したら「スクリプトが・・・」というエラーが出た!

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

はてなブログでは簡単に常時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化が完了しました。

簡単に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)が解消されました。

他にも何箇所か、同様に書き直しましたよ。

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

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

まとめ

はてなブログ常時SSL化に変更しました。

SEOや安全性に関わってくるので、まだ変更していない人は早めに常時SSL化に変更することをオススメします。

常時SSL化への変更自体は簡単ですが、変更後のエラーが大量に出る場合があります。

私の場合は「混在コンテンツMixed Content)の解消」だけで済みましたが、その他のエラーが出る可能性があるので事前に調べておくことをオススメしますよ。

はてなブログSSL化にして安心だ。