Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説

ひとことで言うと

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コールの代替策を検討する必要があります。