---
title: "originとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "Webセキュリティの基礎概念「オリジン」を、AI生成サイトのHTML共有に即して解説。プロトコル・ホスト・ポートの3要素・同一オリジンポリシーの意味・CORSエラーの発生条件と対処法を具体的に紹介します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-origin-html-share"
markdown: "https://giga-site.com/articles/what-is-origin-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# originとは？HTML共有・AI生成サイトでの意味をやさしく解説

ブラウザのセキュリティポリシーを調べていると「オリジン」という言葉が頻繁に登場します。AI生成サイトやHTML共有で「別のオリジンへのリクエストがブロックされました」というエラーが出た場合、その意味を理解していないと解決に時間がかかります。オリジンとは何か、HTML共有でどう関係するかを具体例で解説します。

> Source HTML: https://giga-site.com/articles/what-is-origin-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

オリジン（origin）とはWebにおけるアドレスの「管轄単位」で、プロトコル（https等）・ホスト（ドメイン名）・ポート番号の3つの組み合わせで決まります。https://example.com:443 と https://api.example.com:443 はホストが違うため別オリジンです。https://example.com と http://example.com もプロトコルが違うため別オリジンとして扱われます。

ブラウザは「同一オリジンポリシー（SOP）」というルールで保護されており、あるオリジンのページが別オリジンのリソースにJavaScriptからアクセスすることを原則禁止しています。この仕組みにより、悪意あるページがユーザーの銀行サイトのデータを勝手に読み取ることを防いでいます。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

AI生成のHTMLに、別ドメインのAPIへfetchやXHRでデータを取得するコードが含まれている場合、そのAPIのオリジンが共有ページのオリジンと異なるとブラウザがリクエストをブロックします（CORSエラー）。エラーメッセージは「Access to fetch at 'https://api.example.com' from origin 'https://preview.gigasite.com' has been blocked by CORS policy」のような内容です。

ローカルのHTMLファイル（file://で開いた場合）は特殊なオリジン扱いになり、外部APIへのリクエストが全てブロックされることがあります。AI生成のHTMLをダブルクリックで開いてAPIが動かない場合は、このfile://オリジン問題が原因である可能性が高いです。共有URLとして配信されるHTTPS経由で開くと解消されるケースが多いです。

## よくある誤解

「サブドメインが同じなら同一オリジン」という誤解があります。https://app.example.com と https://api.example.com はホスト部分が異なるため別オリジンです。サブドメインが違えば同一オリジンポリシーの制限対象になるため、APIとフロントエンドが別サブドメインの場合はCORSの設定が必要です。

「CORSエラーはサーバーの設定を変えるしかない」という誤解もあります。フロントエンド側でオリジンを合わせる（同じドメインにAPIをホスト）か、プロキシサーバーを介してリクエストを転送する方法もあります。AIが生成したコードにCORSエラーが出る場合は、APIのURLを確認しプロキシ経由に変更するかAPIサーバーにCORSヘッダーを追加します。

## 安全に使うための注意点

AI生成HTMLに含まれる fetch() や XMLHttpRequest のURLを確認し、共有先の配信ドメイン（例：preview.gigasite.com）と一致しないドメインへのリクエストがあればCORSエラーを覚悟しておく必要があります。事前にブラウザのデベロッパーツールのコンソールでエラーメッセージを確認して、共有先へのデモの前に解決しておいてください。

共有サービスのオリジン（ドメイン）を事前に確認し、AIへのプロンプトでAPIのベースURLをそのオリジンに合わせるよう指示するか、相対パスでAPIを呼び出す設計にすることで、オリジン不一致によるエラーを回避できます。相対パスは常に同一オリジンのAPIを指すため、ドメインが変わっても動作します。

Access-Control-Allow-Originヘッダーをワイルドカード（*）で許可する設定は手軽ですが、認証情報（Cookieや認証トークン）を含むリクエストには使えない制限があります。認証が必要なAPIとHTML共有を組み合わせる場合は、許可するオリジンを具体的なドメインで指定し、ワイルドカードに頼らない設定にしてください。

## よくある質問

### CORSエラーは開発者ツールのどこで確認できますか？

ChromeのデベロッパーツールではConsoleタブに赤字で表示されます。Networkタブで問題のリクエストを選択し、Headersタブを確認するとAccess-Control-Allow-Originヘッダーの有無も確認できます。

### オリジンとドメインは同じ意味ですか？

異なります。ドメインはホスト名（example.com等）だけを指しますが、オリジンはプロトコル・ホスト・ポートの3要素の組み合わせです。同じドメインでもHTTPとHTTPSでは別オリジンになります。

### ファイルをダブルクリックで開くとAPIが動かない原因は何ですか？

file://プロトコルは特殊なnullオリジンとして扱われ、多くのAPIサーバーがnullオリジンからのCORSリクエストを拒否します。HTTP/HTTPSサーバー経由でHTMLを開くか、共有サービスのURLで確認するようにしてください。

## 関連記事

- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-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)
- [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": "originとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "Webセキュリティの基礎概念「オリジン」を、AI生成サイトのHTML共有に即して解説。プロトコル・ホスト・ポートの3要素・同一オリジンポリシーの意味・CORSエラーの発生条件と対処法を具体的に紹介します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-origin-html-share",
  "url": "https://giga-site.com/articles/what-is-origin-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": "ChromeのデベロッパーツールではConsoleタブに赤字で表示されます。Networkタブで問題のリクエストを選択し、Headersタブを確認するとAccess-Control-Allow-Originヘッダーの有無も確認できます。"
      }
    },
    {
      "@type": "Question",
      "name": "オリジンとドメインは同じ意味ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "異なります。ドメインはホスト名（example.com等）だけを指しますが、オリジンはプロトコル・ホスト・ポートの3要素の組み合わせです。同じドメインでもHTTPとHTTPSでは別オリジンになります。"
      }
    },
    {
      "@type": "Question",
      "name": "ファイルをダブルクリックで開くとAPIが動かない原因は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "file://プロトコルは特殊なnullオリジンとして扱われ、多くのAPIサーバーがnullオリジンからのCORSリクエストを拒否します。HTTP/HTTPSサーバー経由でHTMLを開くか、共有サービスのURLで確認するようにしてください。"
      }
    }
  ]
}
```