---
title: "Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "Same-Origin Policyの仕組みとCORSエラーとの関係をAI生成HTML・共有サイトの文脈でやさしく解説します。「なぜ外部APIが使えないのか」を理解してエラー解決に役立てたい方向けです。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-same-origin-policy-html-share"
markdown: "https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説
Same-Origin Policyは、Webブラウザが異なるオリジン（ドメイン・ポート・プロトコルの組み合わせ）間でのデータアクセスを制限するセキュリティの基本ルールです。AI生成HTMLでAPIを叩いたり外部データを取得しようとしたりしたときに「CORSエラー」が出る原因の多くはここに起因します。
> Source HTML: https://giga-site.com/articles/what-is-same-origin-policy-html-share
> Article index: https://giga-site.com/articles/index.md
## ひとことで言うと
Same-Origin Policyとは「あるオリジンのJavaScriptは、別のオリジンのリソースに勝手にアクセスできない」というブラウザの規則です。オリジンはスキーム（http/https）＋ドメイン＋ポートの3つで決まり、1つでも違えば「別のオリジン（クロスオリジン）」とみなされます。
例えば `https://gigasite.io` で動くJavaScriptが `https://api.example.com` に対してfetchを実行した場合、api.example.com側がCORSヘッダーで許可していなければレスポンスはブロックされます。これはブラウザが実施する保護であり、サーバー側ではなくクライアント側の制約です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## HTML共有で関係する場面
AIが生成したHTMLにfetchやXMLHttpRequestで外部APIを叩くコードが含まれている場合、共有先のURL（オリジン）によってはCORSエラーになります。ローカルで動いていたものが共有URL上で動かない原因の多くはこれです。例えばlocalhost上で動いていたAPIコールがgigasite.ioのURLから実行されると、APIサーバーがgigasite.ioを許可していなければブロックされます。
iframeで別オリジンのページを埋め込んだ場合、その内部コンテンツへのJavaScriptアクセスもSame-Origin Policyでブロックされます。AI生成HTMLでiframe内のDOMを操作しようとするコードがある場合、共有後に動作しない原因となります。iframeの中身は同一オリジンのコンテンツか、PostMessageで通信する設計にする必要があります。
## よくある誤解
「Same-Origin PolicyはサーバーがCORSヘッダーを設定すれば回避できる」という表現は正確ではありません。CORSは「別オリジンからのアクセスを許可する」という明示的な宣言であり、Same-Origin Policy自体を無効にするものではありません。CORSヘッダーを設定したAPIは、許可したオリジンからのアクセスのみを通過させます。
「プロキシを使えばSame-Origin Policyを完全に回避できる」という認識も誤りです。サーバーサイドプロキシを経由するとブラウザが直接クロスオリジンリクエストを出さなくなるため、Same-Origin Policyは関係なくなります。ただしプロキシサーバー自体がAPIキーを扱う場合はプロキシのセキュリティが新たな問題になります。
## 安全に使うための注意点
AI生成HTMLでAPIを使いたい場合、まずそのAPIがCORSを許可しているか確認してください。確認方法はブラウザのDevToolsのNetworkタブでリクエストを確認し、Responseヘッダーに`Access-Control-Allow-Origin`が含まれているかチェックします。含まれていなければそのAPIは直接ブラウザから呼べません。
ブラウザから直接呼べないAPIを使いたい場合、CloudflareのWorkersやVercelのEdge Functionsなどサーバーレス関数を挟む方法が現実的です。ただし静的HTMLだけで完結させたい場合は、CORS対応のパブリックAPIを使うか、データをHTMLに直接埋め込む方法を選んでください。ギガサイト便のような静的HTML共有サービスでは動的なAPIコールの代替策を検討する必要があります。
## よくある質問
### CORSエラーが出ているのにサーバー側のログにはリクエストが届いている場合はなぜですか？
Preflightリクエスト（OPTIONS）はサーバーに届いていても、レスポンスのCORSヘッダーが不正でブラウザがブロックするケースです。NetworkタブでサーバーからのレスポンスにAccess-Control-Allow-Originが正しく含まれているか確認してください。
### localfileをブラウザで開いたときもSame-Origin Policyは働きますか？
file://スキームはオリジンが`null`として扱われ、クロスオリジンとの通信はブラウザによって異なる動作になります。Chromeはローカルファイルからのfetchをブロックすることがあります。開発・確認にはローカルサーバー（python -m http.server等）を使う方が安全です。
### AI生成HTMLでCORSエラーが出たとき、AIへの再依頼でどう指示すればよいですか？
「このHTMLはCORSを許可した外部APIにしかfetchできない。APIを使う場合はCORS対応を明記したAPIのみを使い、もしくはデータをHTMLに直接埋め込む方式に変更すること」と指示すると、APIコールに依存しない設計に切り替えてくれます。
## 関連記事
- [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)
- [originとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-origin-html-share/index.md)
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説",
"description": "Same-Origin Policyの仕組みとCORSエラーとの関係をAI生成HTML・共有サイトの文脈でやさしく解説します。「なぜ外部APIが使えないのか」を理解してエラー解決に役立てたい方向けです。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/what-is-same-origin-policy-html-share",
"url": "https://giga-site.com/articles/what-is-same-origin-policy-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": "CORSエラーが出ているのにサーバー側のログにはリクエストが届いている場合はなぜですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "Preflightリクエスト（OPTIONS）はサーバーに届いていても、レスポンスのCORSヘッダーが不正でブラウザがブロックするケースです。NetworkタブでサーバーからのレスポンスにAccess-Control-Allow-Originが正しく含まれているか確認してください。"
}
},
{
"@type": "Question",
"name": "localfileをブラウザで開いたときもSame-Origin Policyは働きますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "file://スキームはオリジンが`null`として扱われ、クロスオリジンとの通信はブラウザによって異なる動作になります。Chromeはローカルファイルからのfetchをブロックすることがあります。開発・確認にはローカルサーバー（python -m http.server等）を使う方が安全です。"
}
},
{
"@type": "Question",
"name": "AI生成HTMLでCORSエラーが出たとき、AIへの再依頼でどう指示すればよいですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "「このHTMLはCORSを許可した外部APIにしかfetchできない。APIを使う場合はCORS対応を明記したAPIのみを使い、もしくはデータをHTMLに直接埋め込む方式に変更すること」と指示すると、APIコールに依存しない設計に切り替えてくれます。"
}
}
]
}
```