Q&A
書籍「Webブラウザセキュリティ」を読んでいて、CORSについて学びました。
書籍にはサンプルコードのリポジトリが用意されています。
2章のサンプルコードに下記のようなものがあります。
html
1<script> 2 window.addEventListener("load", () => { 3 alert(window.frame01.contentWindow.secret.innerHTML == "THIS IS A SECRET MESSAGE"); 4 alert(window.frame02.contentWindow.secret.innerHTML == "THIS IS A SECRET MESSAGE"); 5 }); 6</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つとも実行されるのかを確認しました。
diff
1 sendfile off; 2 etag off; 3 4 add_header "X-XSS-Protection" "0" always; 5+ add_header Access-Control-Allow-Origin *;
nginxは詳しくないのですが、調べてみて上記のように1行追加し、$ docker-compose build
を行った後に再起動をしてアクセスしてみました。
Networkパネルを確認すると、たしかにレスポンスヘッダに指定できているようです。
しかし、実際にはalertは1度しか実行されず、console.logには下記のように、設定前と同様のerrorが表示されます
error
1read.html:4 Uncaught DOMException: Blocked a frame with origin "http://localhost:10000" from accessing a cross-origin frame.
これは、何故でしょうか?
CORSに対する私の理解が間違っているのが、単純にNginxの設定などが間違っているのかが判別できていません。
どなたかご教示お願いします。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。