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

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

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

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

参考同一オリジンポリシー – Web セキュリティ | MDN

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

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

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

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

 

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

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

その仕組みをCORSと呼ぶ。

参考オリジン間リソース共有 (CORS) – HTTP | MDN

 

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

  • a.com「b.comさん、CORSを考慮した情報くださいな。」
  • b.com「a.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の情報を取得できるようになる。

 

そんな感じ。

 

おわり

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました