WordPressサイトをHTTPSで運用することは、もはや必須事項。HTTPSは安全性が高いだけでなく（すべてを暗号化し、プレーンテキストでは通信しません）、信頼を構築し、検索エンジンのランキング要素となり、より正確なリファラルデータを提供します。しかし、残念ながら、HTTPからHTTPSに移行したウェブサイトでは、問題が発生することも。その1つが「混合コンテンツエラー」です。
HTTP/2のおかげで、暗号化処理に伴うパフォーマンスの問題は大部分が解決されました。また、Let’s Encryptは、無料のSSL証明書を簡単に取得する方法を提供し、業界全体を激変しました。
オンラインビジネスにとって最も重要な変化は、Google ChromeやMozilla Firefoxなどのウェブブラウザが、HTTPSで動作していないサイトを排除し、潜在的な訪問者により厳しい警告を表示するようになった点です。たとえば、旧バージョンのTLSを使用している場合、ChromeはERR_SSL_OBSOLETE_VERSION警告を表示します。こうした警告は、訪問者にもっとも見せたくないものです。
このような問題の回避のためにKinstaでは、HTTPからHTTPSに移行する詳細な方法を解説しました。しかし、そのプロセスに従っても、混合コンテンツエラーが表示される場合があります。
この記事では、WordPressサイトの混合コンテンツ問題を解決する方法をいくつかご紹介します。
動画での解説もご用意しています。
混合コンテンツエラーとは何か？
ユーザーがアクセスしようとしているWordPressサイトが、HTTPSとHTTPのスクリプトやコンテンツを同時に読み込む場合、ブラウザには混合コンテンツエラーが表示されます。HTTPとHTTPSは完全に別のプロトコルであるため、この問題が発生します。
サイトをHTTPSに移行した場合、画像やJavaScriptファイルなどすべてのプロトコルは、HTTPSで実行される必要があります。以下に、一部のコンテンツをHTTPで読み込んだ場合に何が起きるのか、いくつかの例を示します。
混合コンテンツエラーの例
Chromeは現在、ウェブの77％以上に使用されているトップブラウザです。したがってほとんどの訪問者は、以下のような形で混合コンテンツエラーを目にします。
もちろん、すべての人がChromeを使用しているわけではありません。
以下は、FirefoxでのWordPressサイトの混合コンテンツエラーの表示例です。
次に、Microsoft Edgeでのこの警告の表示例です。
そして、Internet Explorerでの表示例です。
見て分かるように、Internet Explorerはこの警告を最も表示したくない最悪のブラウザの一つで、ポップアップがクリックされるまで、実際にページのレンダリングが中断されてしまいます。
もちろん、これは、どのブラウザを使用している訪問者にも見せたいエラーではありません。エラーを解決する前に、まず、この警告が発生する理由を理解しましょう。
なぜ混合コンテンツエラーが発生するのか？
大部分の混合コンテンツエラーは、WordPressのサイトをHTTPからHTTPSに移行した場合に発生します。これは、いくつかのHTTPのリンクがそのまま引き継がれるために発生します。
以下は、その他の原因で警告が発生する例です。
- 新しいサービスやプラグインをサイトに追加した。プラグインやテーマの中には、CSSやJavaScriptへのリンクに相対パス（/style.css）ではなく、絶対パス（http://yourdomain.com/style.css）を使用するものがあります。
- HTTPでハードコードしたURL（http://yourdomain.com/image.pngなど）で画像を設定している。投稿、ページ、ウィジェット内にある可能性があります。
- 外部スクリプト（ホストされたjQuery、Font Awesomeなど）のHTTPバージョンにリンクしている。
- HTTPSではなく、HTTPを使用して動画スクリプトを埋め込んでいる。
残念ながら、トラブルシューティングを始めるまで、問題の本当の原因を発見できない場合があります。
以上を念頭に、混合コンテンツエラーを解決する、いくつかの方法を紹介します。
混合コンテンツエラーを解決する方法（4つのステップ）
WordPressの混合コンテンツエラーを解決する、4つの簡単なステップをご紹介します。ただし、以下はすでに実施したものと仮定します。
- SSL証明書のインストール
- HTTPをHTTPSにリダイレクト（サイト全体）
またここでは、開発サイトを例に使用して説明します。
ステップ1. どのリソースがHTTPで読み込まれているかを調べる
まず、どのリソースが依然としてHTTPで読み込まれているかを確認する必要があります。
警告は、サイト全体ではなく、特定の領域で発生している可能性があることに注意してください。警告が表示されているページを表示し、Chrome DevToolsを起動します。
- Windows：F12、または、CTRL + Shift + I
- macOS：Cmd + Opt + I
Chrome DevToolsは、ブラウザのツールメニューからも起動できます。
HTTPSで読み込まれていないリソースを調べるには、まず確認すべき場所がいくつかあります。
1つ目は、「Console（コンソール）」タブです。注意）Chrome DevToolsを開いた後にページをリフレッシュして、すべてを正しく読み込んでください。
混合コンテンツエラーがあると、赤または黄色でハイライト表示されます。通常、「This request has been blocked; the content must be served over HTTPS.（このリクエストはブロックされました。コンテンツはHTTPSで提供してください。）」という説明が表示されます。これは、HTTPコンテンツを自動的にブロックするようにブラウザが設定されていることを意味します。
Chromeは、HTTPSのみでのページの読み込みを確実にするため、Chrome 79からデフォルトで、混合コンテンツのブロックを始めました。最近では、混合画像やメディアを自動アップグレードする機能の展開を開始しています。
そのため、Chrome DevToolsを使用すると、要求された一部の要素が自動的にアップグレードされたことを示す混合コンテンツのメッセージが表示される場合があります。
ここでは、スタイルシートやスクリプトなど、安全でない、混合コンテンツエラーを引き起こす様々な要素があることがわかります。
また、安全でない.jpg画像へのリクエストが行われ、自動的にHTTPSにアップグレードされたこともわかります(【注】これがChrome以外のブラウザの場合、自動的にはアップグレードされません）。
また、Chrome DevToolsの「Securty（セキュリティ）」タブも確認します。ここには、安全でないリソースが表示されます。
「Network（ネットワーク）」タブでは、ブロックされたリクエストの一覧も表示されます。
Chromeを使用していない場合や、エラーの概要を簡単に知りたい場合は、Why No Padlockのような無料ツールも使用できます。
Why No Padlockは、個々のページをスキャンして、安全でないリソースをすべて表示します。
URLを入力し、「Test Page（ページをテスト）」をクリックするだけで簡単に使え、エラーがあれば表示されます。しかも無料です。
HTTPS警告をまとめて確認する
もし、サイトの他の部分も心配なら、一括して確認した方が良いでしょう。その際におすすめのオプションをご紹介します。
- JitBitの無料の小さなツールSSL Checkを使用すると、HTTPSサイトをクロールし、ブラウザに警告メッセージが表示される前に、安全でない画像やスクリプトを検索できます。1サイトあたり400ページまでクロールできます。
- Ahrefs Site Auditツールには、HTTPS/HTTPの混在コンテンツを検出する機能があります。すでにこのソリューションにアクセスしているか、マーケティングチームの同僚がアクセスしていれば、是非試してみてください。
- HTTPS Checkerは、インストールの必要なデスクトップソフトウェアで、サイトをスキャンできます。大きな変更後の、「安全でない」という警告やコンテンツのチェックに役立ちます。Windows、Mac、Ubuntuで利用可能です。無料プランでは、1回のスキャンで最大500ページまでチェックできます。
- SSL Insecure Content Fixerは、サイトにインストールするWordPressプラグインで、混合コンテンツエラーにつながるエラーを発見できます。無料で使用でき、エラーを解決する解決も、自動的に行われます。
いずれかのツールを使用すれば、サイトの各ページで混合コンテンツエラーが発生していないか、手動で確認する時間を節約できます。潜在的なエラーも含めて徹底的に検証するには、これらのソリューションを組み合わせて使用すると良いでしょう。
ステップ2. HTTPリソースがHTTPSでアクセスできるかを確認する
次のステップは、HTTPで読み込まれているリソースがHTTPSでもアクセスできるかを確認します。ほとんどの場合、リンクを更新する必要があります。
例として、以下の安全でないjQueryスクリプトと.jpg画像で混合コンテンツエラーが発生しているとします。
- http://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.js
- http://example-site.com/wp-content/50d00acf6e4%2Fpuppy-thumb.jpg?v=1600261043278
ここで、ブラウザのアドレスバーに2つのURLを入力し、先頭の「http」を「https」に置き換えてみると、問題なく読み込まれました。つまり、サイトで検索と置換を行うだけで対応は済みます。
ステップ3. WordPressの検索と置換の実行
WordPressで検索と置換を行うには、様々な方法があります。このセクションでは、2つの異なる推奨オプションを説明します。
気になる方もいると思いますが、Really Simple SSLなどのツールの使用はお勧めしません。素晴らしいプラグインですが、長期間こうしたソリューションに頼るべきではありません。HTTPに戻ることはないでしょうから、データベース内のHTTP URLの更新がベストです（以下で紹介します）。
Kinstaのお客様であれば、MyKinsta内からすぐに、検索と置換ツールを使用できます。
サイトの「ツール」ページに移動し、「検索と置換」をクリックします。
次に、「検索」フィールドに、データベースで検索する文字列を入力します。
今回は、HTTPドメイン「http://kinstalife.com」を検索します。次に「検索」ボタンをクリックします。検索と置換ツールに、指定した文字列の出現回数が表示されます。
「検索後に置換する」ボックスをチェックして、置換処理を続行します。「以下に置き換える」フィールドに、検索した文字列を置き換える文字列を入力します。今回は、HTTPSドメイン「https://kinstalife.com」に置換します。
また、「実行後にキャッシュをクリアする」ボックスは、チェックしたままにしておきます。検索と置換プロセスが完了した後、Kinstaキャッシュは自動的に消去されます。最後に、「置換」ボタンをクリックします。
HTTP to HTTPS search and replace in MyKinsta
重要：フィールドでは、先頭または末尾に空白を含めないように注意してください。希望しない結果になる可能性があります。
検索と置換の代替
Kinstaを使用していない場合は、無料のBetter Search Replaceプラグインで同じ作業を行えます。完了後は、プラグインを削除してください。
このツールは、WordPressプラグインディレクトリからダウンロードするか、WordPress管理画面内で検索してください。
有効化した後、HTTPドメイン（http://yourdomain.com）を検索して、HTTPSドメイン（https://yourdomain.com）に置き換えてください。
代替案として、interconnect/it Search Replace DB PHP ScriptやWP-CLIでも検索と置換を実行できます。
WordPressの検索と置換の詳細については、こちらの動画をご覧ください。
ステップ4. 混合コンテンツエラーが消えたことを確認する
検索と置換を実行したら、サイトで混合コンテンツエラーが消えたことを再確認します。サイトのフロントエンドにアクセスして、いくつかのページをクリックし、アドレスバーに表示されるブラウザのステータスインジケーターを確認します。
例として使用した開発サイトでは、.jpg画像は解決されましたが、安全でないスクリプトの警告が残っていました。
これは、自身のドメインから読み込んでいるリソースに対して検索と置換を実行したためです。jQueryの警告は外部スクリプトによって発生しており、手動で更新する必要があります。
この場合、スクリプトはWordPressのヘッダー（header.php）に手動で追加する必要がありました。相対URLを使用する必要があるため、//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.jsに更新しました。
すべての問題は、ほとんどの場合、検索と置換で解決できます。
一般に、WordPressサイトにハードコードした箇所が含まれる場合のみ、さらなる問題が発生する可能性があります。
プラグインやテーマにハードコードした外部スクリプトがあると考えられ、その原因を突き止めることが困難な場合は、関連する開発者に連絡してみてください。
混合コンテンツエラーが消えた例
以上で、混合コンテンツエラーの解決には何を確認すればよいのかがわかりました。
以下は、HTTPSで正しく読み込まれ、混合コンテンツエラーのないChromeの動作例です。
Firefoxも同様のメッセージを出力します。
そして、Microsoft Edgeでの表示例です。
メッセージの文言は、使用するブラウザによって若干異なる場合もありますが、安全な接続を示す通知は表示されるはずです。これで、WordPressサイトでの混合コンテンツエラーを解消できました。
HSTSはどうですか？
なぜ、HSTS（HTTP Strict Transport Security）を使用してこの問題を解決しないのかと思う方もいるでしょう。HSTSは、サイトがHTTPSで動作している場合に、ブラウザに安全な接続を強制するために作成されました。
これは、ウェブサーバーに追加できるセキュリティヘッダで、レスポンスヘッダに「Strict-Transport-Security」として反映されます。
しかし、HSTSはすべての混合コンテンツエラーの即座の解決策ではありません。HSTSは単にリダイレクトを処理するだけで、混合コンテンツエラーはブラウザそのものの機能です。また、サードパーティーのサイトがHSTSを有効にするかどうかも制御できません。
したがって、常にURL「http://」を更新する必要があります。Server Faultのディスカッションの中で、Esa Jokinen氏がその理由を深く掘り下げています。
追加の推奨事項（特殊なケース）
Elementorページビルダーを使用している場合、Elementorの設定にアクセスし、サイトのURLを更新して、CSSファイルを新しいURLで再生成する必要があります。
完了後は、キャッシュをクリアすると、Elementorの安全でないという警告は解消されるはずです。さらに、Kinsta CDNを使用している場合、CDNゾーンも消去することをお勧めします。
まとめ
混合コンテンツエラーは、特に、その原因がいくつかある場合には、対処に苦慮します。幸いなことに、この問題を解決する簡単な手順がいくつかあります。
ほとんどの場合、単純な検索と置換を行うだけで、混合コンテンツエラーはすぐに解決し、数分でサイトを正常な状態に戻せます。解決しない場合は、ハードコードしたスクリプトが1つまたは2つ残っている可能性があります。エラーを解決するには、それらを見つけて手動で更新するか、対処する開発者を雇う必要があります。
もし、混合コンテンツエラーに対してご意見や、何らかの問題があれば、コメント欄からお知らせください。
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
コメントを残す