私は タグへの HTML5 の追加について読んでいます。 追加されたものの 1 つは、 にロードされたドキュメントが親ブラウザ コンテキストと対話できるよう<iframe>にするサンドボックス フラグの追加です。iframe
いくつかのドキュメントを読んだ後、私は少し明確さを求めています。私は読んだMDNの旗の説明allow-same-origin:
コンテンツを通常のオリジンからのものとして扱うことができます。このキーワードを使用しない場合、埋め込まれたコンテンツは固有のオリジンからのものとして扱われます。
読んだ後、あまり役に立たないと思うW3Cの仕様：
...[それ]は、サードパーティのサイトからのコンテンツを埋め込むために使用でき、そのサイトがポップアップウィンドウを開かないようにサンドボックス化しますが、埋め込まれたページが元のサイトと通信したり、データベースAPIを使用してデータを保存することを妨げることはありません。
私の質問は、W3C の仕様に照らして MDN が「通常のオリジン」と呼んでいるものについてです。「通常のオリジン」に言及する場合、MDN は、タグ内に含まれるドキュメントのコンテンツは、<iframe>ドキュメントの元のページのオリジンを共有しているかのように扱われると述べているのでしょうか。たとえば、YouTube ビデオは、YouTube の一部であると信じており、そのように通信できるのでしょうか。それとも、<iframe>ドキュメントは親ブラウザのコンテキストにアクセスできるのでしょうか。
ベストアンサー1
LFC の回答を読んでもまだ少し混乱していましたが、彼らが提供してくれたリンクにはわかりやすい説明がありました。要約すると次のようになります。
たとえば、ウェブサイトにツイート ボタンを追加したいとします。次のようにします。
<iframe src="https://platform.twitter.com/widgets/tweet_button.html"></iframe>
しかし、おそらく Twitter に必要以上の権限を与えていると思います。そのため、Twitter をサンドボックス化したいと考えています。Twitter は、ユーザーがログインしているかどうかを知る必要があるようです (たとえば、ツイート ボタンの横にアバターを表示できるようにするため)。そのため、iframe はtwitter.comCookie や に関連付けられたその他のデータtwitter.com(ローカル ストレージなど) にアクセスできる必要があります。そのため、 を設定することでallow-same-origin、iframe に のデータを使用する権限を与えますtwitter.com。
Twitter はリソースへのリクエストを行う必要がある場合もありますtwitter.comが、 を設定しないとクロスオリジン リクエストとして扱われるためallow-same-origin、リソースにクロスオリジン リクエストを許可するヘッダーがない限り、これらのリクエストはブラウザによってブロックされる可能性があります。