はじめに
本日とある技術雑誌を読んでいる時にみたSOP、CORSの解説が分かりやすかったので、ざっくりまとめます。
SOP(same origin policy)とは
同一オリジンポリシーとは、あるオリジンから読み込まれた文書やスクリプトについ て、そのリソースから他のオリジンのリソースにアクセスできないように制限するものです。同一オリジンポリシーはウェブのセキュリティにおける重要な仕組みであり、悪意ある行動を起こしかねないリソースの分離を目的としています。
ちょっと分かりづらいですね。後述で具体例をもって説明します。
そもそもOriginとは
Originとは、あるURLの
- プロトコル（https、httpなど）
- ポート番号（localhost:8080、com:81など）
- ホスト（qiita.com、google.comなど）
の組み合わせのことをいいます。
詳しくは↓
同一オリジンポリシー
具体例
確かに別のオリジンのリソースにアクセスできちゃまずいのはなんとなく分かります。ただ具体的にどういうことが起こるのだろう、、、という方もいると思います。（私です）
例えば以下のような場合を考えてみます。
とある会社のイントラがあり、そのイントラには取引先情報などの重要な情報が保管されたサーバ（https://intra.com/）があります。このサーバにはイントラに接続されているPCからのみアクセスが可能で、外部のネットワークからは通常接続することができません。
ある日、社員Aさんがこのイントラにも接続されているPCでインターネットでネットサーフィンをしました。この時、攻撃者が罠を仕掛けたサイト（https://attack.com/）に誤って接続してしまいました。
このサイトは、画面描画時に以下のようなJavascriptが実行されるように罠が仕掛けてありました。
axios.get('https://intra.com/foo/')
.then(response => {
console.log(JSON.stringify(response.data));
})
.catch(error => {
console.error(error);
})
するとどうでしょう。
サーバーから取得した情報がコンソールのログに出力されることになります。
このようにあるオリジンから別のオリジンの情報へのアクセスを許可してしまうとこのように情報漏洩などが簡単に起きてしまいます。
ここで重要なのがSOPの考え方です。SOPにより誤って不正なサイトなどに接続してしまった場合でも、このような漏洩などを防ぐことができます。
ただし、webアプリの開発などをやっていると別オリジンへアクセスをしたことがあると思います。その時に指定するのがCORSです。
さいごに
非常にざっくりですが、なんとなく概要を掴んで頂けたら幸いです。