旅とアロマ

旅とアロマ

五感で楽しむ旅とアロマテラピー

はてなブログ初心者のためのHTTPS化 ~方法と対策~

先週、はてなブログの独自ドメインのHTTPS配信が有効になりました。

こんな時にあれですが… 切り替えてみました。

初心者がやった 保護された通信」になるまでの格闘のようすを、忘却禄も兼ねて残します。

f:id:monteverde-aroma:20180616102344j:plain

HTTPS化した理由

今すぐ切り替えないと、すぐにどうなるというものではないのですが、私は以下の理由でHTTPS化しました。

  1. ブログやサイトのHTTPS化 (常時SSL)は全体的な流れらしい。
  2. 2018年7月からhttpのサイトはChromeで警告が出るらしい。 初心者はちょっとビクビク。
  3.  保護された通信」への憧れ(笑)これね 

f:id:monteverde-aroma:20180616071441p:plain

 

SSLとは

SSL とは Secure Sockets Layer の略であり、インターネット接続を安全に保ち、2 つのシステム間で送信される機密情報をすべて保護し、犯罪者があらゆる情報(個人情報の可能性がある情報を含む)を読み取ったり改変したりできないようにするための標準的な技術です。SSL/TLSサーバ証明書とは | DigiCert & Symantec

 

HTTPS化の前に

事前学習して、HTTPSのボタンを押す前に準備しておきました。参考にさせていただいたのは、みにぐりさんのブログです。

blog.minimal-green.com

 

以下の4点を、まずテストブログ(記事数3)で実験してみて、問題がなければ、メインのブログをHTTPS化することにしました。

  1. CSSや記事上記事下、サイドバーなどカスタマイズした箇所の画像やJavascriptソースをhttpsにする
  2. [HTTPS]を有効にする
  3. Upgrade Insecure Requestsのメタタグをheadに入れる
  4. Mixed Contentが発生していないか確認する

以下、詳しくみていきます。

1. 個別にhttpsと換える

初心者のくせに、いろいろカスタマイズなんぞしてしまいましたので、まず、はてなブログの[ ダッシュボード]の中の[ 設定]と[ デザイン]を変更します。

  •  設定]>[詳細設定]>[headに要素を追加]
  •  デザイン]>[カスタマイズ]>[ヘッダ]>[タイトル下]
  •  デザイン]>[カスタマイズ]>[記事]>[記事上&記事下]
  •  デザイン]>[カスタマイズ]>[デザインCSS]

修正の方法は、アドレスの頭をhttp://→https://。上記は、私の場合なので、サイドバーなどもカスタマイズしている方は、そちらも確認が必要だと思います。

2. HTTPSを有効にする

次に、はてなブログの管理画面からHTTPSを有効にします。

方法は、[ 設定]>[詳細設定]>「HTTPS配信」

 

変更は取り消せません!

f:id:monteverde-aroma:20180616072459p:plain

変更しようとすると、このような 警告がでます。ちょっとドキドキしながら「OK」をクリックすると、あっけないほど簡単に変更することができました。

3. metaタグをheadに入れる

次に、Upgrade Insecure Requestsというmetaタグを入れました。

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

 (Internet ExploreやMicrosoft Edgeは未対応だそうです)

metaタグを入れる場所は、

  •  設定]>[詳細設定]>[headに要素を追加]

これで、閲覧者のブラウザに対して、http://へのリクエストを機械的にhttps://へ置き換えるように指示できるそうです。

4. Mixed Contentの修正

最後に、Mixed Content(混在コンテンツ)が発生していないかどうか調べてみます。

Mixed Contentとは、httpsで配信されている記事の中にhttp配信が存在している状態です。(もともとhttp配信しかないサイトをリンクしている場合はそのままでOKです)httpsで配信されているサイトを、自分のブログでhttpと張り付けている場合は修正が必要です。

 

Mixed Contentの確認方法(Chromeの場合)を書いておきます。

  1. 自分のブログの任意ページを表示して[右クリック]→[検証]
  2. 画面右に表示される[Console]でエラーが出ていたら修正が必要です。

【よくある質問】HTTPS配信時の混在コンテンツ(Mixed Content)対応について - はてなブログ ヘルプ

 

私は「見たまま」で編集しているのですが、過去の記事を一つひとつ「HTML編集」にして、http://で始まっているものは、https:// に変えました。

記事数が多かったので、この作業が一番大変でした。

エラー(私の場合)

Mixed Contentのエラー(赤)は消えたのですが、安心したのもつかの間、次に以下のようなエラー(赤)が出ていました(泣)。スクロールできます(改善中)

<Refused to apply style from [fontawesome] because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled"> 

(直訳)

[fontawesome]のスタイルを適用することが拒否されました。なぜなら、MIMEタイプ('text/html') は有効なstylesheetのMIMEタイプではありませんし、厳密なMIMEのチェック機能が適応されています。

 

検索しましたが、こんなエラーは見つかりませんでした。MINEタイプ? stylesheet? 

ここは、知っている単語からアプローチすべし!

[fontawesome]は、Webアイコンを入れた時に使ったものだと気づきました。

なので、もう一度 [fontawesome] を取得し直し、以下をheadタグ内に貼り直しました。

 

<head>
<!-- FontAwesomeの読み込み -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>

 

貼った場所は、 

  •  設定]>[詳細設定]>[headに要素を追加]

お世話になったのは、サルワカさんのブログです 

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

 

結果 

これですべてのエラーが消えました。すっきり。

f:id:monteverde-aroma:20180617073446p:plain

無事HTTPS化成功

そして、画面の上で「保護された通信」になりました。

一番大変だったのは、記事をHTML編集から、アップロードした画像やサイトを一つひとつ確認して、エラーを消していったことです。

一括に変換できるツールも紹介されていましたが、私は使いこなす自信がなく、誤字脱字などを直しながら修正しました。

100記事あったので、結構大変でしたが、却っていろいろ直せて良かったです。

 

不具合の対策

さらに、不具合が出たときの対応策はこちらをご覧ください 

HTTPSで配信する - はてなブログ ヘルプ

 

新たな問題

サイトは保護され、最初に出ていたエラーは消えたのですが、次の日、編集中の記事を検索してみると、今度は黄色い警告が出てしまいました。

 

f:id:monteverde-aroma:20180616120418p:plain

 

「$blockScrolling = Infinity」を使うようですが・・・

今の私には対応策が思いつかないので、このままスルー。

自分のブログをgoogleで検索して出した閲覧画面では警告が出ないので、問題ないのかな?ゆっくり他の方のHTTPS化のブログを拝見しながら、対応が必要なら修正したいと思います。

 

おまけのアロマ

疲れました・・・

初心者は丸2日かかりました。

なので、こんな時は癒しのアロマ。

先日作ったメントールクリスタルのスプレー。ちょっとメントールだけの香りに飽きたので「ダイダイ」を追加してみました。メントールに柑橘系は何気に相性がいいみたいです。

今週はこれを使います。

よろしければ、メントールクリスタルについてはこちらでご覧ください

www.monteverde-aroma.com

 

 

ブログで個人情報のやり取りをすることはないのですが、またいろいろ勉強になりました。

最後までご覧いただきありがとうございます。