セキュリティ

常時SSLサイトにエラー表示が頻発するファイヤーフォックス、原因は「混在コンテンツのブロック」とあるがそれはどれなのか？

2016.06.02
この記事は約9分で読めます。

ffwebanzendehanaissl.jpg当ブログ「tohdamikio.com」は先月から常時SSLにて運用を開始した。GoogleクロームやIE（インターネットエクスプローラー）では問題なかったが、ファイヤーフォックスで表示したときだけエラーがでる現象が起きていた。ファイヤーフォックスで/を開くと「安全な接続ではありません」という表示がでて、表示を完全にブロックされてしまう場合がある。「この接続は安全ではありません」という表示をクリックして詳細を見ると「混在コンテンツのブロック」が原因と書かれている。要は一部のSSL外からの画像参照があるため表示をブロックしたというようなことが書かれている。このままではファイヤーフォックスを使っているユーザーにはホームページを見てもらえないので原因追求と対策を講じていたが、６月に入りやっと解決した。

▼起きていた問題は「安全な接続ではありません」と表示されること
13321741_1271814662848471_560837559055926946_n.jpg

これまで問題をひとつひとつ解決してきたが最後まで残った原因はやはり画像の参照表示がSSL外だったことである。（このことを混在コンテンツのブロックというらしい）

これまで起きていた課題
・ブログ記事内の参照画像が非SSLのURLだった
　→記事内のすべての画像パスをSSLに変えた（すごく時間がかかった）
・QRコード画像表示のジャバスクリプトのURLが非SSLだった
　→この機会に新たなスクリプトに変更した
・HTMLタグの<html lang=”ja” itemscope itemtype=”http://schema.org/Blog“>が問題だった
　→<html lang=”ja” itemscope itemtype=”https://schema.org/Blog“>に変更した（sを入れただけですが）
・MTのテンプレート内にあるURLがSSLでなかった
　→動作確認しながらひとつひとつSSLに変更したのでこれまた時間がかかった
・SNSアイコン表示のジャバスクリプト内のパスが非SSLだった
　→単純にSSLにしても稼働しないスクリプトがあったので新規で探しなおす
　　（Facebook、Google、Twitterは割と簡単だったが、はてながやっかいだった）
・CSS内の一部に非SSLの表示があった
　→該当部分をSSLにした

このバグ潰しには約１ヶ月かかった。自分のサイトなので集中して時間がとれないこともあったが、エラーがファイヤーフォックスだけだったことも影響した。

混在コンテンツのブロックについては以下のとおり

以下https://support.mozilla.org/ja/kb/mixed-content-blocking-firefoxより引用

Firefox は、安全に見える Web ページ上の潜在的に有害で安全でないコンテンツをブロックすることにより、ユーザを攻撃から保護します。この記事の続きを読んで混在コンテンツについて学び、それがブロックされた時、Firefox がどのように知らせるかを学んでください。

混在コンテンツとは何か？

HTTP は、Web サーバからブラウザへ情報を転送するシステムです。HTTP は安全ではなく、HTTP プロトコルで配信されているページを訪れた場合、そのサイトとの接続は盗聴や 攻撃 に対して開放されています。ほとんどの Web サイトは、HTTP 経由で配信されていますが、取り扱いに注意が必要な情報を渡したり扱ったりすることがないため、安全な接続をする必要がありません。

銀行のサイトなど、ページ全体が HTTPS プロトコルで配信されている Web サイトを訪れた場合、アドレスバーに緑色の錠前アイコンが表示されます (詳しくは、Web サイトへの接続が安全か確認するには をご覧ください)。そのサイトとの接続は、認証を受けて暗号化されているため、盗聴や中間者攻撃から護られています。

しかしながら、訪れた HTTPS のページに HTTP で配信されたコンテンツが含まれている場合、メインのページが HTTPS で配信されていても、それに含まれる HTTP のコンテンツは攻撃者に読まれたり変更されたりする恐れがあります。私たちは、HTTPS のページに含まれる HTTP で配信されたコンテンツを「混在コンテンツ」(mixed content) と呼びます。訪れたページの一部分だけが暗号化されていると安全な接続であるように表示されますが、実際はそうではありません。

突き詰めていくと原因はSNSボタンの画像表示のURLが非SSLになっていたことだった。この原因特定がなかなかうまくできなかった。というのは、当ブログはMT6で構築されており、SNSボタンの表示はテンプレートに追加したテンプレートモジュールの中にあり、しかもMTIFなどで分岐条件の中にあったことである。

原因と解決したテンプレートを備忘録として掲載しておく。

▼テンプレートモジュールの「ソーシャルボタン」

このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。<br />
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。<br />

<!–ツイッターのツイート–>
<a href=”https://twitter.com/share” class=”twitter-share-button” data-lang=”ja”>ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>

<!–はてなブックマーク–>
<mt:If name=”entry_template”>
<!–entry_template–>
<a href=”http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”<$mt:EntryTitle$>” data-hatena-bookmark-layout=”standard-balloon” data-hatena-bookmark-lang=”ja” title=”このエントリーをはてなブックマークに追加”><img src=”/img/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”https://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>
<mt:ElseIf name=”category_archive”>
<!–category_archive–>
<a href=”http://b.hatena.ne.jp/entry/<$MTCategoryArchiveLink$>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”<$mt:ArchiveTitle$>” data-hatena-bookmark-layout=”standard-balloon” data-hatena-bookmark-lang=”ja” title=”このエントリーをはてなブックマークに追加”><img src=”/img/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”https://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>
<mt:ElseIf name=”page_template”>
<!–page_template–>
<a href=”http://b.hatena.ne.jp/entry/<$MTPagePermalink$>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”<$mt:PageTitle$>” data-hatena-bookmark-layout=”standard-balloon” data-hatena-bookmark-lang=”ja” title=”このエントリーをはてなブックマークに追加”><img src=”/img/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”https://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>
<mt:Else>
<a href=”http://b.hatena.ne.jp/entry/<$mt:BlogURL$>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”<$MTBlogName$>” data-hatena-bookmark-layout=”standard-balloon” data-hatena-bookmark-lang=”ja” title=”このエントリーをはてなブックマークに追加”><img src=”/img/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”https://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>
</mt:If>

<!–グーグル +1 ボタン–>　
<div class=”g-plusone”></div>
<script type=”text/javascript”>
window.___gcfg = {lang: ‘ja’};

(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/platform.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>