同一オリジンポリシー とは？

Webブラウザに備わっている「セキュリティの門番」みたいなものだよ。あるサイトのJavaScriptが、全く別のサイトのデータを勝手に読み取れないようにブロックする仕組みなんだ。

たとえば悪意のあるサイトを開いたとき、そのサイトのスクリプトが裏であなたの銀行サイトの残高情報を読み取れたら怖いよね？同一オリジンポリシーがあるから、別のオリジン（サイト）のデータには勝手にアクセスできないんだ。

3つの要素の組み合わせだよ。プロトコル（httpかhttpsか）、ドメイン（example.comなど）、ポート番号（80, 443など）。この3つが全て一致して初めて「同一オリジン」と判定される。たとえば http://example.com と https://example.com はプロトコルが違うから別オリジンだよ。

そこでCORSという仕組みを使うんだ。APIサーバー側が「このオリジンからのアクセスは許可するよ」とヘッダーで宣言すれば、ブラウザがそれを確認して通してくれる。同一オリジンポリシーの「例外許可証」みたいなものだね。

いいところに気づいたね。同一オリジンポリシーはあくまでブラウザ側の制御だよ。サーバー間の通信には適用されない。だからcurlコマンドやサーバーサイドのコードからは自由にアクセスできる。ブラウザ上のJavaScriptだけが制限されるんだ。

<img>タグや<link>タグでの読み込みは「埋め込み」として許可されているんだ。制限されるのはJavaScriptからのデータ読み取り。画像は表示できても、JavaScriptでそのピクセルデータを読み取ろうとするとブロックされる。この微妙な違いがセキュリティの肝だよ。

そうだよ。同一オリジンポリシーはWebセキュリティの最も基本的な防御壁なんだ。これがなかったら、悪意のあるサイトを開いただけで個人情報が抜かれ放題になってしまう。開発中に「CORSエラー」に遭遇したら、この仕組みが正常に働いている証拠だと思えばいいよ。