---
title: "Mixed Contentとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "HTTPSページにHTTPリソースが混在するMixed Contentの問題を、AI生成サイトとHTML共有の場面で解説。アクティブ・パッシブMixed Contentの違い・ブラウザのブロック動作・修正手順を具体的に紹介します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-mixed-content-html-share"
markdown: "https://giga-site.com/articles/what-is-mixed-content-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Mixed Contentとは？HTML共有・AI生成サイトでの意味をやさしく解説
ブラウザで「このページは安全ではないコンテンツを含んでいます」という警告を見たことはないでしょうか。その原因の多くがMixed Contentです。AI生成サイトをHTTPSのURLで共有したとき、HTML内にHTTPの画像やスクリプトが残っていると表示が崩れたりブラウザにブロックされたりします。共有前に知っておきたいポイントを整理します。
> Source HTML: https://giga-site.com/articles/what-is-mixed-content-html-share
> Article index: https://giga-site.com/articles/index.md
## ひとことで言うと
Mixed Contentとは、HTTPSで提供されているWebページの中にHTTP（暗号化なし）で読み込まれるリソースが混在している状態を指します。ブラウザは通信経路の安全性を保証できないため、HTTP経由のリソースを警告表示したり読み込みをブロックしたりします。
Mixed Contentには2種類あります。「パッシブMixed Content」は画像・動画・音声などのメディアで、読み込みは許可されますが警告が表示されます。「アクティブMixed Content」はスクリプト・スタイルシート・iframeなどで、攻撃者が通信を改ざんできるリスクが高いためモダンブラウザは既定でブロックします。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## HTML共有で関係する場面
AIがHTMLを生成する際、外部CSSやJavaScriptライブラリのURLを「http://」で記述するケースがあります。このHTMLをHTTPSのURLで配信する共有サービスにアップロードすると、ブラウザがスクリプトをブロックし、意図したデザインやインタラクションが動作しなくなります。
特に古いCDNのURLをAIが学習データから生成する場合、HTTPしかサポートしていない旧バージョンのリンクが含まれることがあります。アップロード前にHTMLファイルをテキストエディタで開き「http://」の文字列を全件検索し、httpsに書き換えるか、そのリソースが現在もHTTPS対応しているか確認してください。
## よくある誤解
「画像がHTTPでも見た目に問題ないから大丈夫」という誤解があります。パッシブMixed Contentの画像はブロックされないブラウザもありますが、Chromeは段階的にパッシブMixed Contentもブロック方向に移行しており、今後は表示が崩れる可能性があります。URLは最初からHTTPSに統一しておく方が安全です。
「自分がHTTPSでアクセスしているから相手も大丈夫」という思い込みも誤りです。Mixed Contentはページの配信プロトコルではなく、ページ内に埋め込まれたリソースのプロトコルに依存します。共有先の相手が同じ警告を見ることになるため、送る前に確認しなければ信頼性を損ないます。
## 安全に使うための注意点
AI生成HTMLをアップロードする前に、テキストエディタの「全文検索」機能でsrc="http://、href="http://、url(http://の3パターンを検索します。見つかった箇所はhttpsに書き換えるか、プロトコル相対URL（//で始まるURL）に変更してください。これだけで大多数のMixed Contentエラーを解消できます。
Content-Security-Policy ヘッダーにupgrade-insecure-requestsディレクティブを追加すると、ブラウザがHTTPリクエストを自動的にHTTPSへアップグレードするよう指示できます。配信サーバーがCloudflare WorkersやEdge設定をサポートしていればヘッダーを付与できます。HTMLファイルのmetaタグで指定する方法もあります。
デベロッパーツール（F12キー）のコンソールタブを開き、「Mixed Content」のエラー・警告メッセージを確認するのが最も確実な検出方法です。メッセージにはブロックされたリソースのURLが表示されるので、それを手がかりにHTMLを修正してください。共有前の動作確認として習慣化することを推奨します。
## よくある質問
### Mixed Contentエラーが出てもページは表示されますか？
パッシブMixed Contentの場合は画像が表示されないだけでページ自体は開きます。アクティブMixed Contentのスクリプトがブロックされると、JavaScriptに依存したレイアウトや機能が動作せずページが壊れた状態になることがあります。
### AI生成HTMLのMixed Contentを一括で修正する方法はありますか？
テキストエディタやコマンドラインのsed・grepを使い、ファイル内のhttp://をhttps://に一括置換するのが最速です。ただし意図的にHTTPを使うべき箇所がないか置換後に必ず目視確認してください。
### 外部CDNがHTTPSに対応していない場合はどうすればよいですか？
そのCDNの利用をやめ、HTTPS対応の同等ライブラリを別のCDN（unpkg・jsDelivrなど）から取得することを推奨します。古いHTTP専用CDNは保守が終了しているケースが多く、セキュリティ上も問題があります。
## 関連記事
- [Content-Dispositionとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-content-disposition-html-share/index.md)
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Mixed Contentとは？HTML共有・AI生成サイトでの意味をやさしく解説",
"description": "HTTPSページにHTTPリソースが混在するMixed Contentの問題を、AI生成サイトとHTML共有の場面で解説。アクティブ・パッシブMixed Contentの違い・ブラウザのブロック動作・修正手順を具体的に紹介します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/what-is-mixed-content-html-share",
"url": "https://giga-site.com/articles/what-is-mixed-content-html-share",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "用語解説",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "Mixed Contentエラーが出てもページは表示されますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "パッシブMixed Contentの場合は画像が表示されないだけでページ自体は開きます。アクティブMixed Contentのスクリプトがブロックされると、JavaScriptに依存したレイアウトや機能が動作せずページが壊れた状態になることがあります。"
}
},
{
"@type": "Question",
"name": "AI生成HTMLのMixed Contentを一括で修正する方法はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "テキストエディタやコマンドラインのsed・grepを使い、ファイル内のhttp://をhttps://に一括置換するのが最速です。ただし意図的にHTTPを使うべき箇所がないか置換後に必ず目視確認してください。"
}
},
{
"@type": "Question",
"name": "外部CDNがHTTPSに対応していない場合はどうすればよいですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "そのCDNの利用をやめ、HTTPS対応の同等ライブラリを別のCDN（unpkg・jsDelivrなど）から取得することを推奨します。古いHTTP専用CDNは保守が終了しているケースが多く、セキュリティ上も問題があります。"
}
}
]
}
```