同一オリジン ポリシー

Mariko Kosaka

同一オリジン ポリシーはブラウザのセキュリティ機能であり、 1 つのオリジンのドキュメントとスクリプトがリソースとやり取りできる 作成します。

ブラウザでは、複数のサイトからリソースを一度に読み込んで表示できます。もしかしたら、 複数のタブが同時に開いたり、サイトに複数の iframe が できます。これらの要素のインタラクションに制限がない場合、 攻撃者によってスクリプトが不正使用された場合、スクリプトは ユーザーのブラウザですべてを公開できます。

同一オリジン ポリシーにより、次のコンテンツへの読み取りアクセスが 別のオリジンから読み込まれたリソースに対してリクエストできます。「ちょっと待って」「画像を読み込む」と言います 他のオリジンのスクリプトやスクリプトを常に。」とします。ブラウザでは、タグを使用して リソースを埋め込むことができます。このポリシーのほとんどは 使用してサイトがクリックジャッキング、 iframe。クロスオリジン読み取りを制限できる コンテンツ セキュリティ ポリシーをご覧ください。

送信元は、スキーム(たとえば、プロトコル)によって定義されます。 HTTP または HTTPS)、ポート(指定されている場合)、ホスト。3 つがすべて同じ場合 2 つの URL がある場合、これらは同一オリジンと見なされます。たとえば http://www.example.com/foo が次と同じオリジンです http://www.example.com/barhttps://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> クリックジャッキング <ph type="x-smartling-placeholder">
</ph> 図: クリックジャッキングのメカニズムを 3 つの層(ベースサイト、 iframe サイト、透明ボタンなど)を表示します。

「クリックジャッキング」と呼ばれる攻撃iframe にサイトを埋め込み、オーバーレイする 異なるデスティネーションにリンクする透明なボタンユーザーを騙す アプリケーションにアクセスしていると 考えてしまうことがあります 無償ツールキットで

他のサイトが iframe にサイトを埋め込まないようにするには、コンテンツを追加してください frame-ancestors を使用したセキュリティ ポリシー ディレクティブ 渡します。

また、次のように HTTP ヘッダーに X-Frame-Options を追加することもできます。 MDN を参照してください。

まとめ

ブラウザが門番の役目を果たすことで、少し安心できれば幸いです。 ウェブ セキュリティの基盤です。ブラウザはアクセスをブロックして安全性を確保しようとしますが、 別のリージョンでクロスオリジン リソースにアクセスする必要が 説明します。次のガイドでは、クロスオリジン リソース シェアリングについて学習する (CORS)の詳細と、クロスオリジン リソースの読み込みが 許可されません。