同一オリジンの概念: 2 つの URL のプロトコル、ドメイン名、ポートが同じ場合、その 2 つの URL を同一オリジンと呼びます。
例：
<https://time.geekbang.org/?category=1>
<https://time.geekbang.org/?category=0>
同一生成元ポリシーの概念:
デフォルトでは、ブラウザはリソースにアクセスし、2 つの同一のソース間で DOM を操作できます。2 つの異なるソースがリソースにアクセスしたり DOM を操作したりする場合、同一オリジン ポリシーと呼ばれる一連の基本的なセキュリティ ポリシー制約が存在します。
DOM レベル: ポリシーは、さまざまなソースからの JavaScript スクリプトが現在の DOM オブジェクトに対する読み取りおよび書き込み操作を制限します。
データ レベル: ポリシーは、さまざまなソースからのサイトが現在のサイトの Cookie、IndexDB、LocalStorage などのデータを読み取ることを制限します。
ネットワーク レベル: ポリシーは、XMLHttpRequest およびその他のメソッドを介して、さまざまなソースからサイトにサイト データを送信することを制限します。
安全性と利便性のトレードオフ
1. サードパーティのリソースをページに埋め込むことができます
元のブラウザはリソース ファイルへの外部参照をサポートしていましたが、これにより多くの悪意のあるスクリプトが導入されてしまいます。
XSS 攻撃に対処するために、CSP と呼ばれるコンテンツ セキュリティ ポリシーがブラウザに導入されました。CSP の中心的な考え方は、ブラウザがどのリソースをロードできるかをサーバーに決定させ、ブラウザがインライン JavaScript コードを実行できるかどうかをサーバーに決定させることです。
2. クロスドメインリソース共有とクロスドキュメントメッセージメカニズム
Geekbang の公式 Web サイト ページを開いて、公式 Web サイトのページで XMLHttpRequest または Fetch を通じて InfoQ でリソースをリクエストすると、同一生成元ポリシーにより InfoQ へのリクエストの送信が妨げられ、生産性が大幅に制限されます。
この問題を解決するために、クロスドメインのアクセス制御を可能にするCross-Origin Resource Sharing (CORS)を導入し、クロスドメインのデータ送信を安全に実行できるようにします。
同一オリジンポリシーを導入したとき、2 つのページが同じオリジンでない場合、互いの DOM を操作できないと説明しました。ただし、実際のアプリケーションでは、多くの場合、異なるソースの 2 つの DOM 間で通信する必要があるため、ブラウザーには、window.postMessage の JavaScript インターフェイスを介して異なるソースの DOM と通信できるクロスドキュメント メッセージ メカニズムが導入されています。
参考: Geek Time - ブラウザの仕組みと実践方法