【Chrome81】混合コンテンツのブロックに備えて確認・修正を行いましょう

平素はカラーミーショップをご利用いただき、誠にありがとうございます。

2020年3月17日にGoogleからリリースが予定されている「Chrome 81」で、常時SSLに関する仕様変更が行われます。
すべての方に快適にお買い物をしていただけるよう、現在 常時SSL対応を行っているショップオーナーさまには「混合コンテンツの確認」を行っていただくことをおすすめします。

混合コンテンツとは

混合コンテンツは、https化されたサイト内のhttpコンテンツを意味します。
たとえば、常時SSL化したネットショップのURLが「https」になっていても、ショップ内で使用している画像やスクリプトなどのURLが「http」のままになっている場合、混合コンテンツであると判断されてしまいます。

Google Chromeでは、第三者による改ざんの恐れがあるとしてhttpコンテンツへの警告表示を行っていますが、3月17日以降リリース予定の「Chrome 81」以降は、https化されたサイト内に混在するhttpの画像・スクリプトなどがブロックされる仕様となります。

すでに常時SSL化がお済みのショップでも、テンプレート編集画面などに「http」のURLを書き込んでいる場合は、今後ショップページが正しく表示されなくなることが考えられます。ブラウザアップデートに備えて、下記の手順で確認しておきましょう。
 

混合コンテンツの確認方法

まずはじめに、ショップのトップページや商品詳細ページ、カテゴリーページなどを開き、アドレスバーの左右どちらかに鍵マークが表示されているかどうか確認しましょう。
鍵マークが表示されている場合は「Chrome 81」のアップデート後も問題なくショップが表示されますのでご安心ください。

【Google Chrome】

【FireFox】

【Internet Explorer】

鍵マークが表示されない場合

鍵マークが表示されない場合は、ネットショップのソースコード上のどこかに「http」のURLが含まれており、混合コンテンツと判断されています。
以下の手順で確認し、修正作業を行ってください。

【Google Chrome】

1. ブラウザ右上にある「︙」をクリックし、［その他のツール］→［デベロッパー ツール］をクリックします。

2. ブラウザの右側に「デベロッパー ツール」が立ち上がります。

このとき「Console」のタブに、黄色の背景で「Mixed Content:」の表示がされている場合、ショップ内に混合コンテンツが含まれていることになります。

3. 「Mixed Contents:」をクリックすると、ショップのソースコード内に含まれるhttpコンテンツが表示されます。

ここに表示されているhttpコンテンツのURLをすべて「https://~~~」に書き換えてください。
作業後もう一度デベロッパーツールで確認し「Mixed Content:」が表示されなくなったら、対応はすべて完了です。

【FireFox】

FireFoxでは、ショップページ上で右クリック→［要素を調査］→［コンソール］のタブを選択し、以下のような表示がされている場合は混合コンテンツが含まれていることになります。

【Internet Explorer】

Internet Explorerでは、ショップページ上で右クリック→［要素の検査］→［コンソール］のタブを選択し、以下のような表示がされている場合は混合コンテンツが含まれていることになります。

今後はChrome以外のブラウザでも、同様のブロックや警告表示が行われる可能性があります。
すべての方が安心してお買い物を楽しめるショップ作りのため「混合コンテンツ」の有無をこの機会にしっかりと確認しておきましょう。
 

Tweet