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

RELEASE / 2024.1.27 UPDATE / 2024.01.27

JavaScript

Mixed Content

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

この記事の目次を表示

1 Mixed Contentとは
- 1.1 Mixed Contentの原因
- 1.2 HTTPS環境で表示される
2 Mixed Contentの解決方法
3 httpを省略すればいい？
4 まとめ

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非常に重要です。正しいプロトコルの使用とリソースの管理に注意することで、ユーザーエクスペリエンスの向上とセキュリティの確保が期待出来ますね。