Google ChromeでSSL化しているが新EdgeではSSL化できていない混合コンテンツ
混合コンテンツの原因は、.htaccess上のエラーページURLが「http」通信だった事。
Google Chromeのコンソールでは画像リンク切れ時に404エラーを読み込まないので、SSL化できていた。
新EdgeやFirefoxコンソールでは画像リンク切れ時に404エラーを読み込むので、SSLエラーが出ていた。
新EdgeブラウザでSSL化ができていない
本記事はクライアントのWEBサイトで発生した、実際の混合コンテンツ事例および解消作業の報告です。
Google ChromeではSSLの鍵マークがついているのに、新EdgeやFirefoxでは鍵マークが付かない現象に遭いました。
新EdgeやFirefoxではSSL化が不十分だと判断されている様です。
同じページでChromeは鍵マークがついているのにEdgeは付いていない。
サイト修正対応が必要
あまり見た事のない事象ですが、当然どのブラウザでも鍵マークが付くようにしなければなりません。
すぐにWEBサイト内の調査および修正に取り掛かります。
Google ChromeではSSL化が正常にできている様なので、最近出たMicrosoft新Edgeブラウザでの確認を前提に進めます。
→new Edgeについて
→混合コンテンツのブロックについて
混合コンテンツ部分の調査
発生しているのはサブディレクトリ内のみ
対象となるWEBサイトはPC・スマホ一体型のHTML5＋CSS3によるレスポンシブルデザインサイトです。
おそらく混合コンテンツとなっている部分があるのだと思われます。
その上でよくよく観察すると、以下の事がわかりました。
・index.htmlなどTOPディレクトリ配下ページは鍵マークが付いている
・サブディレクトリ配下のページでは鍵マークが付かない
F12管理者ツールでチェック
もう少し詳細を確認するためにサブディレクトリページを開いてF12を押し、管理者ツールを開きます。
すると以下の様なコンソール上のエラーを発見します。
混合コンテンツ（Mixed Content）の警告例
Mixed Content: The page at 'https://www.example.com/content/index.html' was loaded over HTTPS, but requested an insecure image 'http://example.server.jp/error.html'. This content should also be served over HTTPS.
上記の様な感じの「Mixed Content」の警告が出ていました。
Google Chromeのツールでは警告なし
ちなみにGoogle Chromeのデベロッパーツールでは、コンソール上にこの混合コンテンツ（Mixed Content）の警告は出ていません。
新EdgeやFirefoxのツールでのみ表示される状態です。
原因は404エラーページのURL
予想通り全体がhttps:通信であるのに対し、一部分がhttp:のままになっている混合コンテンツの状態ですね。
それは別途設置している404エラー向けの警告ページURLを指していました。
通常運営サイトの中でリンク切れや存在しないページを訪れた時には、警告向けの専用ページを表示しますよね。
いわゆる「404エラーページ」です。
原因箇所はリダイレクトURLを記載した.htaccess
このエラー用htmlページとは別に、.htaccessファイルも置いています。
リンク切れなどの404エラーが出たら、エラーページへリダイレクトする様記述していました。
リダイレクトコード例
ErrorDocument 404 http://example.server.jp/error.html
※error.htmlがエラー用ページ
ここが「http:のままですよ」という警告だった訳ですね。
httpsのURLにしたところ、SSL化がされ鍵マークが付きました。
ページは存在しているのに、404エラーが出る理由
これで一応解決はした訳ですが、疑問がわきます。
ページ自体はリンク切れしていないのに、何故404エラーページが矢面に出され、混合コンテンツだと判断されたのでしょうか。
そこで対象となるWEBサイトをもう一度細かく調査する事にします。
TOPディレクトリではエラーは出ないのに、サブディレクトリでは出ている事が、この問題解決のポイントになると思いました。
背景画像がリンク切れしていた
発見しました。画像のリンクが切れていました。
通常のimgタグではなく、CSSで背景画像を直接打ち込む形式部分がソース上にあります。この部分でした。
それを以下の様に修正します。
修正前
<div class="layer" style="background-image: url(images/shape/bg-shape.png);"></div>
修正後
<div class="layer" style="background-image: url(../images/shape/bg-shape.png);"></div>
サブディレクトリから一つ上の階層にあるimagesフォルダ内を読込する場合、相対リンクなら「../」が必要です。
ここが抜けていましたね。
この背景画像は、外見では見分けがつかない様なデザインでした。
今まで映っていなかった訳ですが見落としていました。まだまだ未熟者ですね。
Google Chromeと新Edge「Mixed Content」警告の違い
ポイントになるのはGoogle Chromeと新Edgeのコンソール上の違いだと思います。
Google Chromeの場合
Google Chromeではこの画像のリンク切れがある状態でも、コンソール上で404エラーページを読み込もうとしません。
ですのでMixed Contentの警告自体が出ない訳です。
新EdgeやFirefoxの場合
それに対し新EdgeやFirefoxのコンソールでは、画像リンク切れの際にも404エラーページを読み込もうとします。
今回はたまたまリダイレクト先URLがhttp:通信のままだったので、Mixed Contentと判定されているのです。
だからこそ画像のリンク切れに気づけた事になります。
Edgeで404エラーページ表示を消した場合
試しに画像のリンクは切れたままにして、.htaccessで設定していたリダイレクト設定を消してみました。
これによりページが存在しなくても404エラーページは出ません。
すると画像リンク切れしていてもEdgeのコンソールエラーはなくなり、Edgeでも鍵マークが付くようになりました。
画像のリンク切れが無視され、Chromeと同じ形になりましたね。
余談：エラーページのドメインURLが違う理由
少し余談ですが、コンソール上に表示された404エラーページのドメインは、サイトのドメイン名と違うドメインになっています。
Mixed Content: The page at 'https://www.example.com/content/index.html' was loaded over HTTPS, but requested an insecure image 'http://example.server.jp/error.html'. This content should also be served over HTTPS.
このドメイン「http://example.server.jp/」は、各WEBサイトドメインより上層にある「サーバー契約自体のドメイン」です。
コンソール上の警告は、独自ドメインより上に設置したページにも及ぶわけですね。
複数運営サイトの共通エラーページ
本WEBサイトは弊社契約のレンタルサーバーの中に入っており、サーバー内には別のサイトも複数格納されています。
1つのサーバーで複数の独自ドメインを設定して運営している状態です（ぶらさげ運営です）。
このエラーページおよび.htaccessは本来、WEBサイトごとに用意するべきものです。
しかし今回は各WEBサイトディレクトリより上層にある、契約ドメイン直下に置いていました。
それによりリダイレクト設定が全独自ドメインサイトに効果を及ぼします。
どの管理サイトの中でエラーが出ても、共通の同じ警告ページを表示できるためです。
契約ドメイン直下ではSSLが使えない
先ほど、htaccessに設定していた404エラーページのURLをhttpsにして解決と言いました。
しかし今回のサーバー仕様として、おおもとの契約ドメイン自体はSSL化する事ができない事が後からわかりました。
このエラーページは契約ドメイン直下で表示されるページなので、このままではSSL化ページが映りません。
エラーページおよびhtaccessなどは本来のセオリー通り、独自ドメインサイト内にそれぞれ設置しました。
それぞれ設置しても同じ現象が起きる
独自ドメインサイトの区画内それぞれに404エラーページと.htaccessを準備しても、今回のChromeとEdgeの警告の違いはそのまま出ます。
リダイレクト先は、独自のエラーページを指定しても「TOPページ」を指定した場合も同じでした。
まとめ
今回、Edgeエラー時のリダイレクト設定に不備がなかったら、画像リンク切れには気づかないままでしょう。
混合コンテンツのブロックに関するGoogle Chromeの仕様とEdgeの仕様が違った事で判明したのですね。
新手のリンク切れ探しに利用
逆に言えば、エラーページURLをhttp:のままにしてEdgeで鍵マークが付かなければ、URL切れ・画像リンク切れを発見できると言えるでしょうか。
※リンク切れはそれ以前にエラーチェックするべき問題ですが。
これは各ブラウザの現時点でのバージョンで起きた事ですので、一過性のものかも知れません。
バージョンが上がれば、今回のブラウザの違いも解消される可能性があります。
