ゆるマイラーさっきーの空旅マイル

航空マイルを貯める為のポイントサイトや旅行記をお送りします。

ブログをhttps化してみました

 さっきーです。

 当ブログは、はてなブログです。はてなブログのhttps化の対応が遅れているという事で、WordPress等へ移転される方も多くなっています。私は、まったりとブログを書いていますので、そこまでのこだわりも無かったのですが、'18/6/11より、独自ドメインでもhttpsに対応するという連絡がはてなブログより来ました。

staff.hatenablog.com

 せっかくなので、重い腰を上げてみる事にしました。

※6/17 追記しました。

※6/24 追記しました。

※6/25 追記しました。

先にやっている人を参考に

   やはり、先人を参考にするのは、太古よりの知恵ですので、購読させて頂いているブログから確認させて頂きます。

dantraさんと

www.dangan-lucky.com

道民夫婦さん

www.douminmile.com

 特に大きな問題も出てないそうなので、大丈夫だろうという根拠もない自信のもと、変更してみる事にしました。

https化の為にやる事リスト

   やりますとは言ったものの、何かあってからでは遅いという事で、準備をする事にしました。

 これも調べてみますと、先人の方がいらっしゃいましたので、そちらを参考にさせて頂きます。

blog.minimal-green.com

以下の事をやるように言われています。

①記事のバックアップを取る

②2016年以前の記事の画像のURLや広告コードをhttpsへ

③CSSや記事上記事下、サイドバーなどカスタマイズした箇所の画像やJavascriptソースをhttpsへ

④HTTPSを有効にする

⑤Mixed Contentが発生していないか確認

⑥Upgrade Insecure Requestsのメタタグをheadに入れる(⑤で問題ない場合はやらなくてもOK)

⑦Google Search Consoleやアナリティクスの再設定

 

記事のバックアップ

 ダッシュボードから設定-詳細設定 

f:id:sakky_mile:20180616122350j:plain

 下の方のエクスポートをクリック

f:id:sakky_mile:20180616122418j:plain

”ダウンロードする”を押します。

f:id:sakky_mile:20180616122455j:plain

MT(MovableType)形式のテキストファイルがダウンロードされます。

2016年以前の記事の画像のURLや広告コードをhttpsへ

   私のブログは、2017年に開始しましたので関係ありませんが、2016年以前に開始した方は、注意が必要です。

 広告バナーは、httpの物が多いですので、注意です。

CSSや記事上記事下、サイドバーなどカスタマイズした箇所の画像やJavascriptソースをhttpsへ

  私のブログは、デザインの部分でjQueryを使っていた(無意識に(笑))ので、以下のアドレスを、

 http://code.jquery.com/jquery-1.11.3.min.js

以下の様に変更する事で、対応しました。

 //code.jquery.com/jquery-1.11.3.min.js

http:やhttps:は要らないとの事です。

(注)”http:”か”https:”かはHPのアドレスに寄るとの事です。httpsに変えたらhttps:になりますが、元ページがhttp:でも関係無い様です。

HTTPSを有効にする

  いよいよです。

 ダッシュボード-設定-HTTPS配信

f:id:sakky_mile:20180616133140j:plain

Mixed Contentが発生していないか確認

  Twitterでもつぶやきましたが、Mixed Content(混在コンテンツ)とは何ぞやです。

ユーザが HTTPSを通じてページにアクセスすると、ユーザと web サーバとの接続はTLSで暗号化され、盗聴や中間者攻撃から保護されますHTTPS のページの中に通常の平文の HTTP で送られてくるコンテンツが含まれている場合、混在コンテンツと呼ばれます。このようなページは部分的にしか暗号化されておらず、盗聴者や中間者攻撃者が暗号化されていないコンテンツにアクセスできてしまいます。つまり、ページは安全ではありません。

 どうも、httpsの中にhttpが混ざっていてはいけない様です。

 いくつかあるのは分かっているので、とりあえずやってみましたが、やはりありました。原因はポイントサイトのバナーで、取りあえず前の記事から外して見た所、「保護された通信」となりました。

f:id:sakky_mile:20180616151659j:plain

ちなみに、もう一つ前の記事は、保護されていないマークになっています。

f:id:sakky_mile:20180616151815j:plain

更に調べてみると、リンクのURLには、”http:”が要らないとの事。

 "a href”の後ろや、”img src”の後ろから”http:”を外した所、混在コンテンツが無くなりました。 

6/17追記

httpsのページからは、httpにはリンクが出来ないことがあるので、ポイントサイトのリンクが上手く動かない事があります。

更に追記

 バナーの方だけhttp:を消して、リンクがそのままでも取りあえず保護になっているので、様子を見ます。

6/20追記

上記手当だけで、取りあえず問題無く動いていますので、この方法で良いと思います。

6/24追記

リンクの接続も問題有りません。

Upgrade Insecure Requestsのメタタグをheadに入れる(⑤で問題ない場合はやらなくてもOK)

  はてなブログ開発ブログに以下記載があります。しかし、赤文字は注意です。

 HTTPのみで配信されているコンテンツは表示されなくなることを理解した上で、Upgrade Insecure Requestsを指定する場合はブログの詳細設定の「headに要素を追加」に以下の内容を貼り付けてください。 

 

 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Google Search Consoleやアナリティクスの再設定  

   httpからhttpsへの変更が必要になります。

まとめ

 特に大きな不具合は無いのですが、パソコンのブラウザからは変なメッセージが出ますので、対策を進めます。ページが多いので、一つづつですね。

 大きな不具合が無くてよかったです。(笑) 

6/24追記

 全ページ編集完了しました。

6/25 追記

 各記事のはてなスターやブックマークは消えませんが、「ブログの概要」の総スター数はリセットされますので、書き留めておくことをお奨めします。