同一オリジン ポリシーは、あるオリジンのドキュメントやスクリプトが別のオリジンのリソースとやり取りする方法を制限するブラウザのセキュリティ機能です。
ブラウザは、複数のサイトからリソースを一度に読み込んで表示できます。複数のタブを同時に開いている場合や、サイトに異なるサイトの複数の iframe が埋め込まれている場合があります。これらのリソース間のやり取りに制限がなく、スクリプトが攻撃者によって侵害された場合、スクリプトはユーザーのブラウザ内のすべてを公開する可能性があります。
同一生成元ポリシーは、異なる生成元から読み込まれたリソースへの読み取りアクセスをブロックすることで、このような事態を防ぎます。「でも、他のオリジンから画像やスクリプトを常に読み込んでいる」と思われるかもしれません。ブラウザでは、いくつかのタグを使用して、異なるオリジンのリソースを埋め込むことができます。このポリシーは主に歴史的な遺物であり、iframe を使用したクリックジャッキングなどの脆弱性にサイトをさらす可能性があります。コンテンツ セキュリティ ポリシーを使用すると、これらのタグのクロスオリジン読み取りを制限できます。
同一オリジンとみなされるもの
オリジンは、スキーム（プロトコルとも呼ばれます。例: HTTP、HTTPS）、ポート（指定されている場合）、ホストによって定義されます。2 つの URL で 3 つすべてが同じである場合、それらは同一オリジンと見なされます。たとえば、http://www.example.com/foo は http://www.example.com/bar と同じオリジンですが、スキームが異なるため https://www.example.com/bar とは同じオリジンではありません。
許可されるものとブロックされるものは何ですか？
一般に、クロスオリジン リソースの埋め込みは許可されますが、クロスオリジン リソースの読み取りはブロックされます。
| iframe |
クロスオリジンの埋め込みは通常許可されますが（X-Frame-Options ディレクティブによって異なります）、クロスオリジンの読み取り（JavaScript を使用して iframe 内のドキュメントにアクセスするなど）は許可されません。
|
| CSS |
クロスオリジンの CSS は、<link> 要素または CSS ファイル内の @import を使用して埋め込むことができます。正しい Content-Type ヘッダーが必要になる場合があります。
|
| フォーム |
クロスオリジン URL は、フォーム要素の action 属性値として使用できます。ウェブ アプリケーションは、クロスオリジンの宛先にフォームデータを書き込むことができます。 |
| 画像 | クロスオリジン画像の埋め込みは許可されています。ただし、クロスオリジンの画像データの読み取り（JavaScript を使用してクロスオリジンの画像からバイナリデータを取得するなど）はブロックされます。 |
| マルチメディア |
クロスオリジンの動画と音声は、<video> 要素と <audio> 要素を使用して埋め込むことができます。
|
| スクリプト | クロスオリジン スクリプトを埋め込むことはできますが、特定の API（クロスオリジン フェッチ リクエストなど）へのアクセスがブロックされる可能性があります。 |
TODO: DevSite - 理解度チェック
クリックジャッキングを防ぐ方法
「クリックジャッキング」と呼ばれる攻撃では、サイトを iframe に埋め込み、別のリンク先にリンクする透明なボタンを重ねます。ユーザーは、攻撃者にデータを送信しているにもかかわらず、アプリケーションにアクセスしていると誤認します。
他のサイトが iframe にサイトを埋め込むことをブロックするには、frame-ancestors ディレクティブを含むコンテンツ セキュリティ ポリシーを HTTP ヘッダーに追加します。
または、X-Frame-Options を HTTP ヘッダーに追加することもできます。オプションのリストについては、MDN をご覧ください。
まとめ
ブラウザがウェブのセキュリティのゲートキーパーとして機能していることをご理解いただけたかと思います。ブラウザはリソースへのアクセスをブロックすることで安全性を確保しようとしますが、アプリケーションでクロスオリジン リソースにアクセスする必要がある場合もあります。次のガイドでは、クロスオリジン リソース シェアリング（CORS）と、信頼できるソースからのクロスオリジン リソースの読み込みを許可することをブラウザに伝える方法について説明します。