KJR020 KJR020's Blog

CORSに関するメモ

経緯

Djangoの本番環境を構築しているとき、CORSの設定をしないと、CORSエラーが発生しコンテンツが読み込めないことがあった。 CORSとは、Cross-Origin Resource Sharingの略で、異なるオリジン間でのリソース共有を許可するための仕組みらしいが、 あまり理解していなかったので、調べてみた。

概要

CORS(Cross Origin Resource Sharing)は、異なるオリジン間で安全にリソース共有するための仕組みである。(XSSやCSRFなどのセキュリティ上のリスクがあるためである。) 通常ブラウザでは、異なるオリジン間でのリソース共有はセキュリティ上の理由から制限されている。SOP(Same Origin Policy)という制約がある。 主に、APIリクエストや非静的ファイルのリクエストに適用される。

同一オリジンポリシー - セキュリティ | MDN
同一オリジンポリシーは重要なセキュリティの仕組みであり、あるオリジンによって読み込まれた文書やスクリプトが、他のオリジンにあるリソースにアクセスできる方法を制限するものです。
同一オリジンポリシー - セキュリティ | MDN favicon developer.mozilla.org
同一オリジンポリシー - セキュリティ | MDN

オリジンとは

そもそもオリジンについて、明確な定義を知らないと気付いた。 オリジンは、スキーマ、ホスト、ポートの組み合わせで識別される。 RFC6454に定義されている。

https://www.example.com:8080

上記の例では、httpsがスキーマ、www.example.comがFQDN、8080がポートである。

SOP(Same Origin Policy)

SOPは、異なるオリジン間でのリソース共有を制限するための仕組みである。 異なるオリジン間でのリソース共有は、クロスサイトスクリプティング(XSS)やクロスサイトリクエストフォージェリ(CSRF)などのセキュリティ上のリスクがあるため、制限されている。 セキュリティ的に外部のオリジンが信用できる場合,CORSによって制限を解除することができる。

cors-headerを付与すると何が起こるのか

CORSヘッダーを付与すると、 リクエストの際にブラウザはCORSポリシーに従ってリクエストを送信する。 CORSポリシーは、リクエストを送信する際に、リクエストヘッダーにOriginを付与する。 サーバーは、リクエストヘッダーのOriginを見て、リクエストを許可するかどうかを判断する。

参考

RFC 6454: The Web Origin Concept
This document defines the concept of an "origin", which is often used as the scope of authority or privilege by user agents. Typically, user agents isolate content retrieved from different origins to prevent malicious web site operators from interfering with the operation of benign web sites. In addition to outlining the principles that underlie the concept of origin, this document details how to determine the origin of a URI and how to serialize an origin into a string. It also defines an HTTP header field, named "Origin", that indicates which origins are associated with an HTTP request. [STANDARDS-TRACK]
RFC 6454: The Web Origin Concept favicon datatracker.ietf.org
RFC 6454: The Web Origin Concept
CORSとは?Djangoでの設定方法についても解説 - Qiita
CORSって何? オリジン間リソース共有(Cross-Origin Resource Sharing)の略で 自身のオリジンから見た別のオリジン(Cross-Origin)からのリクエストを共有するかどうか決定できる仕組みのことです そもそもオリジンって何? オリジンは...
CORSとは?Djangoでの設定方法についても解説 - Qiita favicon qiita.com
CORSとは?Djangoでの設定方法についても解説 - Qiita
重要! まずは「オリジン」を理解しよう
HTML5ではできることが広がり、さまざまな表現がWebアプリケーションで実現できるようになりました。セキュリティ面でも「できること」がいっぱいあります。HTML5&JavaScript開発に携わる全ての人にお勧めの、はせがわようすけ氏による連載です。
重要! まずは「オリジン」を理解しよう favicon atmarkit.itmedia.co.jp
重要! まずは「オリジン」を理解しよう
Esc
キーワードを入力して検索