同一生成元ポリシーはなぜ必要なのか？

HTML/CSS/JavaScript

2021.01.26

同一生成元ポリシーとは？

同一生成元ポリシーは、「異なるオリジンのリソースへのアクセスには制約をかけましょうねー」のこと。

例えば、「a.comからb.comのリソースを持ってくるのとか止めましょうねー」な感じ。

セキュリティ的に危ないから。

仮に同一生成元ポリシーがなかったら、例えばa.comに「b.comにアクセスしてきてページの中身を全部取得するぜ！」なJavaScriptが仕込まれていた場合、a.comにアクセスするだけでb.comのページの内容が抜き取られたりする。

いや別にいいじゃんと思うかもだけど、もしb.comがGmailだったら、メールの内容を読み取られてたりする。危ない。

だから同一生成元ポリシーがあるわけだけど、今の時代、異なるオリジンにアクセスしたいケースも多々ある。

なので「異なるオリジンにアクセスしたいときはこういう風にしましょう」な仕組みもあったりする。

その仕組みをCORSと呼ぶ。

CORSでは、例えばa.comからb.comにアクセスする場合

みたいなノリでやり取りが行われる。

具体的にいうと

a.comでは

fetch("https://b.com", {
method: "GET",
mode: 'cors',
}).then(response => response.text())
.then(text => {
console.log(text);
});

みたいな感じでmode:'cors'というプロパティを付けてアクセスすることで、CORSを考慮した形でアクセスができる。

具体的には、httpリクエストに

Origin: https://trustedsite.com

というhttpヘッダーをつけてリクエストする。

するとb.comから

Access-Control-Allow-Origin: https://a.com

というhttpヘッダーをつけてレスポンスを返す。

するとa.comはb.comの情報を取得できるようになる。

そんな感じ。

おわり