同一オリジン ポリシーはブラウザのセキュリティ機能であり、 1 つのオリジンのドキュメントとスクリプトがリソースとやり取りできる 作成します。
ブラウザでは、複数のサイトからリソースを一度に読み込んで表示できます。もしかしたら、 複数のタブが同時に開いたり、サイトに複数の iframe が できます。これらの要素のインタラクションに制限がない場合、 攻撃者によってスクリプトが不正使用された場合、スクリプトは ユーザーのブラウザですべてを公開できます。
同一オリジン ポリシーにより、次のコンテンツへの読み取りアクセスが 別のオリジンから読み込まれたリソースに対してリクエストできます。「ちょっと待って」「画像を読み込む」と言います 他のオリジンのスクリプトやスクリプトを常に。」とします。ブラウザでは、タグを使用して リソースを埋め込むことができます。このポリシーのほとんどは 使用してサイトがクリックジャッキング、 iframe。クロスオリジン読み取りを制限できる コンテンツ セキュリティ ポリシーをご覧ください。
同一オリジンと見なされるもの
送信元は、スキーム（たとえば、プロトコル）によって定義されます。
HTTP または HTTPS）、ポート（指定されている場合）、ホスト。3 つがすべて同じ場合
2 つの URL がある場合、これらは同一オリジンと見なされます。たとえば
http://www.example.com/foo が次と同じオリジンです
http://www.example.com/bar
（https://www.example.com/bar 以外）
スキーマが異なるためです
許可されるコンテンツとブロックされるコンテンツ
一般に、クロスオリジン リソースの埋め込みは、 ブロックされています。
| iframe |
クロスオリジンの埋め込みは通常、（X-Frame-Options ディレクティブに応じて）許可されますが、クロスオリジン読み取り（JavaScript を使用して iframe 内のドキュメントにアクセスするなど）は許可されません。
|
| CSS |
クロスオリジン CSS を埋め込むには、CSS ファイルで <link> 要素または @import を使用します。正しい Content-Type ヘッダーが必要になる場合があります。
|
| フォーム |
クロスオリジン URL は、フォーム要素の action 属性値として使用できます。ウェブ アプリケーションは、クロスオリジンの宛先にフォームデータを書き込むことができます。
|
| 画像 | クロスオリジン画像の埋め込みは許可されています。ただし、クロスオリジンの画像データの読み取り（JavaScript を使用してクロスオリジンの画像からバイナリデータを取得するなど）はブロックされます。 |
| マルチメディア |
クロスオリジンの動画と音声を埋め込むには、<video> 要素と <audio> 要素を使用します。
|
| スクリプト | クロスオリジン スクリプトを埋め込むことができます。ただし、特定の API（クロスオリジン フェッチ リクエストなど）へのアクセスがブロックされる場合があります。 |
TODO: DevSite - 思考とチェックの評価
クリックジャッキングを防ぐ方法
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">「クリックジャッキング」と呼ばれる攻撃iframe にサイトを埋め込み、オーバーレイする
異なるデスティネーションにリンクする透明なボタンユーザーを騙す
アプリケーションにアクセスしていると
考えてしまうことがあります
無償ツールキットで
他のサイトが iframe にサイトを埋め込まないようにするには、コンテンツを追加してください
frame-ancestors を使用したセキュリティ ポリシー
ディレクティブ
渡します。
また、次のように HTTP ヘッダーに X-Frame-Options を追加することもできます。
MDN
を参照してください。
まとめ
ブラウザが門番の役目を果たすことで、少し安心できれば幸いです。 ウェブ セキュリティの基盤です。ブラウザはアクセスをブロックして安全性を確保しようとしますが、 別のリージョンでクロスオリジン リソースにアクセスする必要が 説明します。次のガイドでは、クロスオリジン リソース シェアリングについて学習する （CORS）の詳細と、クロスオリジン リソースの読み込みが 許可されません。