混合コンテンツ警告の修正方法

2026-05-07

mixed-contenthttpssecuritycspdebugging

混合コンテンツは、HTTPSページがサブリソース（画像、スクリプト、スタイルシート、フォント）を平文のHTTP経由で読み込むときに発生します。安全でないリソースが安全なページ上にあると、ページ全体のセキュリティが損なわれるため、ブラウザはこれをブロックまたは警告します。

混合コンテンツの2つのタイプ

タイプ	例	ブラウザの動作
アクティブ（危険）	スクリプト、iframe、XHR、CSS	すべてのブラウザでブロック
パッシブ（表示）	画像、音声、動画	警告表示 / パドロック劣化

アクティブな混合コンテンツはページを改変できます（中間者が悪意のあるJavaScriptを注入する可能性）。そのためブラウザは完全にブロックします。パッシブな混合コンテンツはそれほど危険ではありませんが、セキュリティ表示が劣化します。

混合コンテンツの検出方法

ブラウザのDevTools

Chrome/Firefoxでサイトを開きます
DevTools（F12）を開き → Consoleタブ

以下のようなエラーを探します：

Mixed Content: The page at 'https://example.com' was loaded over HTTPS,
but requested an insecure resource 'http://example.com/image.jpg'.

コマンドラインでスキャン

curl -s https://yourdomain.com | grep -oP 'http://[^"'"'"'> ]+' | sort -u

よくある原因と修正方法

HTMLにハードコードされた`http://` URL

<!-- 問題 -->
<img src="http://example.com/logo.png">

<!-- 修正: プロトコル相対またはHTTPSを使用 -->
<img src="https://example.com/logo.png">
<img src="//example.com/logo.png">
<img src="/logo.png">

ベストプラクティス：可能な限り相対パス（/images/logo.png）を使用してください。

サードパーティリソースがまだHTTP

<!-- 問題 -->
<script src="http://cdn.example.com/library.js"></script>

<!-- 修正 -->
<script src="https://cdn.example.com/library.js"></script>

サードパーティがHTTPSに対応していない場合、代替プロバイダーを探すか、リソースをセルフホストしてください。

データベース内のハードコードされたURL

WordPressなどのCMSは絶対URLをデータベースに保存しています。HTTPSへの移行後：

-- WordPress: 投稿内のURLを更新
UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://example.com', 'https://example.com');
UPDATE wp_options SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com');

またはBetter Search Replaceなどのプラグインを使用してください。

CSS内のHTTP参照

/* 問題 */
background-image: url('http://example.com/bg.jpg');

/* 修正 */
background-image: url('https://example.com/bg.jpg');
background-image: url('/images/bg.jpg');

Content Security Policy（CSP）— 今後の混合コンテンツを防止

HTTPリソースをブロックするCSPヘッダーを追加します：

Nginx:

add_header Content-Security-Policy "upgrade-insecure-requests" always;

Apache:

Header always set Content-Security-Policy "upgrade-insecure-requests"

upgrade-insecure-requestsは、ブラウザにhttp://リクエストを自動的にhttps://にアップグレードするよう指示します。ソースURLを修正する間の安全策です。

体系的な修正：サイト全体の監査

徹底的なクリーンアップのために、サイト全体を監査します：

1. HTTP参照をクロールする

# すべてのHTMLファイルでhttp:// URLをスキャン
find /var/www/html -name '*.html' -o -name '*.php' | xargs grep -l 'http://' 2>/dev/null

# CSSファイルをスキャン
find /var/www/html -name '*.css' | xargs grep -l 'http://' 2>/dev/null

# JavaScriptファイルをスキャン
find /var/www/html -name '*.js' | xargs grep -l 'http://' 2>/dev/null

2. カテゴリ別にURLを修正する

ソース	修正方法
自サイトのリソース	相対パスに変更（`/images/logo.png`）
CDNリソース	`https://cdn.example.com/...`に更新
サードパーティスクリプト	URLを更新またはHTTPS対応の代替を見つける
インラインCSS	`http://` → `https://`を一括置換
データベースコンテンツ（WordPress）	`wp search-replace 'http://yourdomain.com' 'https://yourdomain.com'`
テンプレート/テーマファイル	ソースファイルを直接編集

3. ブラウザのDevToolsで検証する

修正後、各ページを開いて → DevTools（F12）→ Consoleタブを確認します。クリーンなページには混合コンテンツの警告が表示されません。パドロックアイコンは実線で表示される（壊れたり警告三角が付いたりしない）はずです。

4. 今後の混合コンテンツを防止する

恒久的な安全策として、HTMLの<head>にこのメタタグを追加してください：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

またはNginx/Apache設定でサーバー全体に設定します（上記参照）。

混合コンテンツを引き起こしやすいコンテンツタイプ

コンテンツタイプ	確認場所	例
画像	`<img src="http://...">`	アップロード画像、アバター、ロゴ
スクリプト	`<script src="http://...">`	アナリティクス、チャットウィジェット、広告スクリプト
スタイルシート	`<link href="http://...">`	外部フォント、CSSフレームワーク
フォント	`@font-face { src: url("http://...") }`	Google Fonts（通常問題なし）、カスタムフォント
iframe	`<iframe src="http://...">`	埋め込み動画、地図、ウィジェット
XHR/Fetch	`fetch("http://...")`	JavaScript内のAPI呼び出し
背景画像	`background-image: url("http://...")`	CSS背景