Security

【セキュリティ】CORS(Cross-Origin-Resources-Sharing)とは?

CORSを理解するための前提知識

オリジンとは?

例えば、http://example.com:80/index.htmlというサイトのページがあったとします。

このURLのうち、

http:// → スキーム
example.com → ホスト
:80 → ポート

という名前が付いています。
この、スキーム、ホスト、ポートをまとめて、オリジンと言います。

同一オリジンポリシーとは?

CORSについて調べていると、必ず同一オリジンポリシーという言葉を目にします。

簡単にいうと、

ウェブブラウザの仕組みとして、あるページを開いた時に、同一のオリジンからしかレスポンスを取得しないよ!

つまり、http://example.com:80/index.htmlというサイトのページを開こうとした際、
http://example.com:80/が先頭についているリクエストでないと、データを取得できない、ということです。

だから、サーバーサイドをAPIとして構築している時などによく直面すると思います。
(フロントとバックでオリジン(URL)が異なるから。)

補足:
同一オリジンポリシーとは、1995年Netscape社によって、JavaScriptと同時にウェブブラウザに導入されたセキュリティ上の考え方であり、ブラウザに備わっている機能。


参考:Wikipedia

同一オリジンポリシーの制限を受けるwebAPI

以下の4項目は、同一オリジンポリシーの制限を受けるので、オリジンが一致しないと通信できません。

つまり、エラーとして処理されます。

・XMLHttpRequest
・Canvas
・Web Storage
・X-Frame-Options

参考:同一オリジンポリシー

XMLHttpRequest

XMLHttpRequestとは、ブラウザ上に備わっているAPIであり、ブラウザ上でサーバーとHTTP通信を行うためのAPIです。

XMLとついていますが、テキスト形式やDOM形式でレスポンスを受け取ります。

同一オリジンポリシーの制限を受けないもの

・<script>によるJavaScript
・<link>によるCSS
・<img><audio><video>によるメディアファイル
・<@font-face>で指定されたフォント
・<object><embed><applet>で指定されたプラグイン
・<frame><iframe>

参考:同一オリジンポリシー

CORSとは?

前提知識が多かったですが、CORSについて説明していきます。ここまでの知識を理解していれば、難しいことはないと思います。

CORS(Cross-Origin-Request-Sharing)とは、

別のオリジンのリソースへのアクセスできる手法・ルールのこと。

どうやって許可しているのか?

Access-Controll-Allow-Origin

リクエストを受け取ったサーバーサイドでは、レスポンスの際に、

「このサイト(ドメイン)からのアクセスを許可しましたよ〜」

っていう証拠のために、Access-Controll-Allow-Originにドメイン名を付与してレスポンスを返します。

これがないと、レスポンスを受け取るクライアント側のJavaScriptは、失敗した、と判断します。

参考サイト

CORSってなに?

CORSについて理解してLaravel5.6で対応する

COMMENT

メールアドレスが公開されることはありません。