Access-Control-Allow-Originが効かない

Question

書籍「Webブラウザセキュリティ」を読んでいて、CORSについて学びました。
書籍にはサンプルコードのリポジトリが用意されています。

2章のサンプルコードに下記のようなものがあります。

<script>
  window.addEventListener("load", () => {
    alert(window.frame01.contentWindow.secret.innerHTML == "THIS IS A SECRET MESSAGE");
    alert(window.frame02.contentWindow.secret.innerHTML == "THIS IS A SECRET MESSAGE");
  });
</script>

localhost:10000と、localhost:20000というcross originの関係のもとで、http://localhost:10000/chapter02/read.htmlにアクセスした場合、same originである1つ目のalertは実行されますが、cross originである2つ目のalertは実行されません。

ここまでは、説明の通りで理解できました。

次に、書籍ではCORSの説明に続き、Access-Control-Allow-Originヘッダをレスポンスに含めることで、Same-Origin Policyを緩和できるという説明がありました。書籍の中では説明だけで、それの確認手順は載っていません。

この挙動を実際に確かめるために、このリポジトリのレスポンスヘッダにAccess-Control-Allow-Origin: *を追加して、実際にalertが2つとも実行されるのかを確認しました。

  sendfile off;
  etag off;

  add_header "X-XSS-Protection" "0" always;
+  add_header Access-Control-Allow-Origin *; 

nginxは詳しくないのですが、調べてみて上記のように1行追加し、$ docker-compose buildを行った後に再起動をしてアクセスしてみました。

Networkパネルを確認すると、たしかにレスポンスヘッダに指定できているようです。

しかし、実際にはalertは1度しか実行されず、console.logには下記のように、設定前と同様のerrorが表示されます

read.html:4 Uncaught DOMException: Blocked a frame with origin "http://localhost:10000" from accessing a cross-origin frame.

これは、何故でしょうか？
CORSに対する私の理解が間違っているのが、単純にNginxの設定などが間違っているのかが判別できていません。
どなたかご教示お願いします。

Answer 1

CORSは、JavaScriptで行う通信に対する制約の緩和です。

<iframe>のクロスオリジン制約に対しては、有効ではありません。