【どういつおりじんぽりしー】
同一オリジンポリシー とは？
最終更新:
💡 よそのサイトのデータは勝手に覗けません
Webブラウザに組み込まれたセキュリティの仕組みで、あるオリジン（スキーム＋ホスト＋ポート）から読み込まれたスクリプトが、別のオリジンのデータを読み取ることを制限する。
📌 このページのポイント
ひよこ 同一オリジンポリシーって何なの？
ペンギン先生 Webブラウザに備わっている「セキュリティの門番」みたいなものだよ。あるサイトのJavaScriptが、別のサイトのデータを勝手に読み取れないように制限する仕組みなんだ。悪意のあるサイトのスクリプトが、裏で銀行サイトの画面の中身を読み取れたら怖いよね？このルールがあるから、別のオリジンのデータはそのままでは読めないんだよ。
ひよこ 「オリジン」って具体的に何で決まるの？
ペンギン先生 3つの要素の組み合わせだよ。スキーム（httpかhttpsか）、ホスト（store.example.comなど）、ポート番号（80, 443など）。この3つが全て一致すれば「同一オリジン」。http://example.com と https://example.com はスキームが違うし、store.example.com と news.example.com もホストが違うから別オリジンだよ。
ペンギン先生 そこでCORSという仕組みを使うんだ。APIサーバー側が「このオリジンからの読み取りは許可するよ」とレスポンスヘッダーで宣言すれば、ブラウザがそれを確認してJavaScriptに結果を渡してくれる。同一オリジンポリシーの「例外許可証」みたいなものだね。
ひよこ 画像やCSSは別サイトから読み込めるけど、あれはどうなっているの？
ペンギン先生 <img>タグや<link>タグでの読み込みは「埋め込み」として基本的に許可されているんだ。制限されるのはJavaScriptによる中身の読み取り。たとえば別オリジンの画像をCORSの許可なしでcanvasに描くと、そのcanvasからgetImageData()でピクセルを読み出そうとした時点でエラーになるよ。
もっと詳しく知りたい人へ
開発中にCORSエラーが出たら、フロントエンドのコードで直せる？
基本的には、データを返すサーバーのCORS設定を確認するよ。Cookieなどの資格情報を含めるなら、フロント側でもcredentialsなどの指定が必要。サーバーのAccess-Control-Allow-Originには*ではなく許可するオリジンを指定し、Access-Control-Allow-Credentials: trueも必要になる。Cookie自体の制限にも従うので、これだけで送信を保証するわけではない。詳しいエラーはブラウザのコンソールで確認しよう。
まとめ：ざっくりこれだけ覚えればOK！
「同一オリジンポリシー」って出てきたら「ブラウザが、別のサイトのデータを勝手に読ませないためのルール」と思えばだいたいOK！
📖 おまけ：英語の意味
「Same-Origin Policy」 ＝ 同一オリジンポリシー
💬 Origin（起源・出所）が同じかどうかで、スクリプトがデータを読めるかを決める仕組みだよ