はるなぴログ

WEBサイト作成技術研究

はてなブログでhttps化した後に混在コンテンツを解消する方法(微妙)

はてなブログでhttps化の後に混在コンテンツ(Mixed Contents)を解消する方法について記載します。

(注)本記事には追記があります。内容を一部修正していますので最後までお読みください。混在コンテンツの原因はZenbackサービスの組み込みにあります。

f:id:hal7pi:20180622202910j:plain

混在コンテンツ(Mixed Contents)とは何か?

はてなブログは2018年2月にSSL化を開始しました。SSL化とはウェブページをhttpsプロトコルを使って配信することを指します。

httpプロトコルの代わりにhttpsを使用することでセキュリティ強化が可能になります。安全なサイトというお墨付きが得られるということです。

この結果、Google検索で上位表示されうる可能性があるということでかなりのサービスがSSL化を果たしました。

常時SSL化とは、ウェブサイトのすべてのコンテンツがhttpsプロトコルのみを用いて配信されることです。httpプロトコルによって提供されているサービスを利用している場合はWEBサイト全体がhttps化されているとは認められません。簡単に言ってしまえば、ウェブサイトの記事の中にhttpプロトコルによるリンクが存在してはいけないということです。

混在コンテンツ(Mixed Contents)とはウェブサイトの記事の中に一部httpによるリンクが混在しているコンテンツを指します。この場合サイトはもう安全であるとは認識されません。

混在コンテンツの存在しない記事では、ブラウザ(ここではChromeブラウザ)のURL表示枠に緑色の鍵マークと「保護された通信」というテキストが表示されます。

一方、混在コンテンツが存在する記事は、インフォメーションマークとしてi(アイ)の文字を丸で囲んだ記号が表示されます。

混在コンテンツのある記事やサイトはGoogleなどから安全であると認識されません。結果として検索エンジンによる検索ランキングへの影響も出てきます。ですので混在コンテンツは解消する必要があります。

混在コンテンツが自分のサイトにあるかどうか見分けるときの注意点

f:id:hal7pi:20180525203159j:plain

混在コンテンツが存在するかどうかを調べるには先ほど説明したように、ブラウザのURL表示枠を見るのが簡単です。

しかし注意すべき点があります。

それはページをすべてスクロールして最後まで完全にブラウザに読み込ませることです。

はるなぴログの場合、現在Innocentという有名テーマを使用しています。ページを読み込んで記事の上部だけを表示させている場合、ChromeブラウザのURL枠に緑色のカギマークと「保護された通信」と表示されています。

これを見るといかにも混在コンテンツは存在しないように見えてしまいます。

はてなブログで人気のテーマ20種類のHTTPS化対応状況を調べてみるによればInnocentはhttps化に対応していることになっています。

Innocentも問題なしです。

しかし、はるなぴのサイトでは、記事ページを下の方までスクロールして、いろいろなSNSパーツなどを読み込むとURL枠のマークが変わります。これは混在コンテンツが存在することを示しています。

生HTMLを見て混在コンテンツの存在を確認する

実際に記事のHTMLを見てみました。

Innocentの問題ではなく、はてなブログのシステム側の問題である可能性もあります。

最初から見ていくと、さっそく見つかりました。headタグの中です。

<link rel="alternate" type="application/json+oembed" href="http://hatenablog.com/oembed?url=https%3A%2F%2Fhal7pi.hatenablog.com%2Fentry%2F2018%2F06%2F08%2F131126&amp;format=json" title="oEmbed Profile of はてなブログテーマInnocentのデフォルト表示を見た感想"/>

これはシステムですね。

他にもあります。

<link rel="alternate" type="text/xml+oembed" href="http://hatenablog.com/oembed?url=https%3A%2F%2Fhal7pi.hatenablog.com%2Fentry%2F2018%2F06%2F08%2F131126&amp;format=xml" title="oEmbed Profile of はてなブログテーマInnocentのデフォルト表示を見た感想"/>

ここも似たようなものです。

<link rel="author" href="http://www.hatena.ne.jp/hal7pi/">

こんなのもありました。たくさん見つかります。これは困りましたね。

はるなぴログは2018年5月にオープンしたばかりのサイトなので、自分でhttpリンクを張ったりしたことは一度もありません。httpを使っているのはすべて外側の原因です。

これらはどう見てもシステム側(はてなブログ側)の設定なので、どうして未だにhttps化されていないのか不思議です。

「はてなブログ ヘルプ」に解決策と思しきものがあった

いろいろと情報を探していたら「はてなブログ ヘルプ」に解決策と思しきものがありました。

【よくある質問】HTTPS配信時の混在コンテンツ(Mixed Content)対応について

詳細はこのページを読んでいただくとして、要は「Upgrade Insecure Requestsを指定する」ということに尽きるかと。

「Upgrade Insecure Requestsを指定する」が何かというと、

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

をhead内に書くということです。

この指定をするとどうなるかというと、httpで書かれている部分がhttpsに書き換えられるということのよう。そしてもしhttpsバージョンが存在しておらずhttpでしかなければそのコンテンツは適用されない、ということになります。

はるなぴログではこの設定を適用した後は記事の最後までスクロールしていっても緑色の鍵マークのままでいけました!(Chromeブラウザ確認)

しかしですねぇ。生HTMLを見てみると…httpのままです。ブラウザが内部的に処理しているものなのでしょうかね。なんだか気持ち悪いです。どう見ても応急処置のようにしか見えません。

ですので、タイトルに微妙というテキストを入れさせていただきました(笑)実際には「解消」はしていないんじゃないかな。

6月23日修正と追記

たくさんの方からコメントいただき本当に感謝です!

誤解していた点などにすべて取り消し線をつけるわけにもいきませんので(笑)、記事の追記という形にさせていただきます。

mamegoroさんのコメント記事に引用させていただきますね。

aタグとかlinkタグは外部に飛ばすタグだから混在コンテンツにはならないし、言わない。chromeの開発モードでMixed Contentエラーみたけど、httpのjs読み込んでるからエラーになってるだけですよ゚

誤解してました。感謝です!

なので記事の前の方に書いたこと間違っています。生HTMLを見てhttpが含まれてる!と慌ててしまったんです。すみません。

c-miyaさんのコメントも大変参考になります!

これ、おそらく原因はZenbackですね。
別ブログでテストしてみたらZenbackを読み込むところでMixed Contentsに変化>しました。

Zenbackのはてブしている人一覧の表示でプロフィールアイコンがhttpになって>>いるので、それが原因だと思います。

なるほどZenbackですか…それで最後の方まで読み込むと混在コンテンツの表示になるというわけなんですね。これはどうしたものか…考えてみます!

恥ずかしい思い違いをしてしまいましたが、はてなには助けてくれる仲間がたくさんいるということが分かりました。みなさま本当に感謝です!これからもよろしくお願いいたします。