フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【エラー解消】Mixed Content(混合コンテンツ)の原因と解決方法

JavaScript
Mixed Content

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

ブラウザのコンソールを確認すると、突如として現れる”Mixed Content”というメッセージ。
このエラーメッセージは、ウェブページにおいてセキュアな(HTTPS)コンテンツと非セキュアな(HTTP)コンテンツが混在している際に表示されるものです。
今回の記事では、この”Mixed Content”エラーが発生する原因と、その解決方法について詳しく解説します。

Mixed Contentとは

Mixed Contentの原因

ブラウザが表示する「Mixed Content」エラーの主な原因は、WEBページ内で異なるプロトコル(HTTPとHTTPS)が混在していることです。
これにより、ブラウザはセキュリティ上の問題を検出して警告を表示します。具体的には以下のような記述をしていると「Mixed Content」エラーが表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>セキュアなページ</title>
    <script src="http://example.com/script.js"></script>
    <script src="https://example.com/index.js"></script>
</head>
<body>
</body>
</html>

このようにHTTPとHTTPSの混在がある場合にエラーが表示されます。

HTTPS環境で表示される

実はこの警告エラーはHTTPSでセキュアな通信を行うページで非セキュアなHTTPコンテンツが埋め込まれている場合に発生します。
そのため以前は表示されていなかったのに急に表示されるようになった場合、そのWEBサイトが以前はHTTP環境で運用されていて、途中からHTTPS環境へと移行したということが考えられます。

Mixed Contentの解決方法

「Mixed Content」の解決方法は非常に簡単です。HTTPとHTTPSが混在していることが原因なのでHTTPのコンテンツをHTTPSへと書き換えてあげることでこのエラーは解消します。
上のサンプルの場合、以下のようにscript.jsを読み込む際に指定しているhttpをhttpsに修正することで解消します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>セキュアなページ</title>
    <script src="https://example.com/script.js"></script>
    <script src="https://example.com/index.js"></script>
</head>
<body>
</body>
</html>

httpを省略すればいい?

実はCSSやJavaScriptなどを読み込む際、httpやhttpsを省略して読み込むことも可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>セキュアなページ</title>
    <script src="//example.com/script.js"></script>
    <script src="//example.com/index.js"></script>
</head>
<body>
</body>
</html>

このように記述することで最初はHTTP環境で運用していたWEBサイトがHTTPS環境に切り替わった際も「Mixed Content」が発生する心配をする必要はありません。
それじゃあ、はじめから省略したこの形にすればいいのでは?と思うかもしれませんが、実はGoogleはこのHTTPやHTTPSのプロトコルを省略して指定する方法は非推奨としています。
そのため出来るだけ省略せず、プロトコルまでしっかり指定するようにしましょう。

まとめ

いかがでしたか?
今回の記事では「Mixed Content」エラーについて詳しく解説しました。
WEBサイトの制作において、セキュリティ上の理由からブラウザが発生させる”Mixed Content”エラーは重要なポイントです。記事では、このエラーが発生する原因や、特にHTTPSプロトコルを使用する際の注意事項に焦点を当てました。
WEBサイトを制作する際には、プロトコルの統一や適切な設定が必要です。特にHTTPSの採用はセキュリティ向上の観点からj非常に重要です。正しいプロトコルの使用とリソースの管理に注意することで、ユーザーエクスペリエンスの向上とセキュリティの確保が期待出来ますね。