created: 2021-06-30T08:35:28.000Z

CORSやSOPについての基礎的な知識

CORS(Cross-Origin Resource Sharing)や、SOP(Same-Origin Policy) については知っておくべきことは3種類。

  • オリジンの判定ルール
  • オリジンが違う場合の制限
  • 制限を回避するための方法

オリジンの判定ルール

以下が3つとも同じなら、ブラウザは同じオリジン(Same-Origin)と判断する。

  • ホスト
    • サブドメインが違う場合も異なるオリジンとなる
  • ポート
  • スキーム
    • http or https

オリジンが違う場合の制限

下記の場合にはブラウザはSOPに従う(制限をかける)

  • 異なるオリジンへはXMLHttpRequestでリクエスト出来ない
  • 異なるオリジンのiframeオブジェクトをjsから触ることが出来ない
  • 異なるオリジンのlocalStorageを参照することは出来ない

他にも細かい制限は存在するが、よく遭遇するのはこの3つである。

cookieはまたもうちょっと色々あるので注意。

制限を回避するための方法

制限を抜けたい場合はクロスオリジン先(サーバ側)に協力してもらう必要がある。 サーバ側にCORSヘッダを返してもらうようにして、ヘッダ情報からクロスオリジンを信頼してもいいという指示がある場合、 ブラウザは制限を解除して動作してくれる。

参考

wikipediaもわかりやすかった。