SOPとかCORSとかCSPとかっていつも混乱するよねって話
フロントエンドのセキュリティについて調べていると、いろんなポリシーがあったり、略しすぎてたりしてよくわからなくなりました。なんか似てない?なんなの?って思ったやつの意味を確認しておきます。
Same Origin Policy
同一オリジンポリシー。他オリジンのリソースへアクセスすることを制限します。ブラウザがデフォルトで適用するので、何か設定する値があるわけじゃなくて、そういう考えが適用されているよってこと。意図せずに第三者の悪意のあるスクリプトを実行しないようにするための仕組みです。
基本javascriptの実行とか、APIリクエストとかはNGだけど、タグで埋め込み系はOK。
同一オリジンとは???
オリジン = プロトコル + ホスト + ポート が同一ってこと。ドメインだけが同じでは同一扱いじゃないし、サブドメインも同一扱いじゃないです。
例: https://dorayaki.example.com:80 との同一オリジンとは？
| 比較対象 | 同一オリジン？ |
|---|---|
| https://dorayaki.example.com:3000 | ちがう |
| http://dorayaki.example.com:80 | ちがう |
| https://suki.dorayaki.example.com:80 | ちがう |
| https://dorayaki.example.com:80/hogehoge | おなじ |
CORS policy
Cross-Origin Resource Sharing policyのこと。異なるオリジンへのリソース共有に関してのポリシー。基本は、Same Origin Policyがあるので、異なるオリジンのリソースへアクセスできないですが、CORS policyが設定されていれば、異なるオリジンのリソースへアクセスできるようになります。
サーバー側(リクエスト先)からクライアントへのHTTPレスポンスヘッダーにAccess-Control-Allow-Originを設定して、クライアント(ブラウザ)からのアクセスを許可する感じ。APIサーバーを実装する時は、自分のリソースを公開したいオリジンだけ指定しなきゃいけない。
CSP
Content Security Policyのこと。ウェブサイト上に読み込むリソース(画像、JS、cssなどなど)を制御するやつ。こちらはクライアント(ブラウザ)側で読み込むリソースを制限する。
いろんなサーバからコンテンツが読み込めるのはいいけど、悪意のあるスクリプトを読み込んだりしたら大変！なので、読み込める対象をホワイトリスト形式で設定するというもの。
感想
この辺の用語の意味は何回確認しても忘れます。もっと頭の中を整理したい。また漫画にしようかな。
参考リンク
- https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
- https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/CORS
- https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/CSP
- https://medium.com/@sundaeGAN/sop-vs-cors-vs-csp-524e9f758fad
Discussion