【JavaScript】「CORS」、「クロスドメイン制約」とは？

CORSとは？

「Cross-Origin Resource Sharing」の略で、ブラウザがオリジン（HTMLを読み込んだサーバ）以外の場所からデータを取得する仕組みです。

Webブラウザには「同一生成元ポリシー（Same-Origin Policy）」というポリシーがあって通常は別オリジンにはアクセスできないようになっています。

CORSを使うことで、許可できる仕組みのことです。

主に、善良な開発者を対象にした仕組みのことですね。（会社が、アプリA、アプリBと持っていてアプリAからアプリBのリソースにアクセスしたいと言った場合など）

オリジンとは？

URLのことです。具体的には、スキーム（httpなど）、ホスト名、ポート番号という3つの値の組み合わせのことです。

クロスドメイン制約について

ブラウザは原則異なるオリジンからのアクセスを認めていません。これをクロスドメイン制約とよび、もし異なるドメインにむけて簡単にアクセスできてしまうとセキュリティ的に非常に問題があるためです。ただ、クロスドメイン制約を受けるものと受けないものに分かれます。

クロスドメイン制約を受けるもの

• XMLHttpRequest(Ajax)

クロスドメイン制約を受けないもの

• HTMLのscriptタグ
• HTMLのlinkタグ
• HTMLのimgタグ

クロスドメイン制約を回避するには？

• Chromeの起動オプションを使う方法
• XAMPP等でローカルにサーバーを構築してサーバー経由のhttpアクセスをする
• JSONPを使う。

同一生成元ポリシー

詳しくは下記の記事で解説しています。

【Web】同一生成元ポリシー(SOP)について

ブラウザ内アクセス（iframeなどによる埋め込んだ内容へのアクセス）によるCROSが成立する条件

WebページAからiframeなどで埋め込んだ異なるWebページBのリソースにアクセスしようとした時に以下の条件を満たしていればCROSによる許可がおります。

• 別オリジン（例：WebページB）からのレスポンスの中にAccess-Control-Allow-Originヘッダが含まれる。
• Originヘッダの値にWebページAのOriginを表す文字列が含まれているか。

成功例

リソース

リクエストヘッダ

WebサーバーはOriginの中身(http://xxx.com)を見て許可するか判断します。

レスポンスヘッダ

許可する場合は以下のように返します。WebブラウザはAccess-Control-Allow-Originの中身を見て「http://xxx.com」が含まれていたらリソースAからリソースBへのアクセスを許可します。

ネットワーク越しアクセスが成功するCROSの条件

まずは、「こんなリクエスト送ってもいい？」（プリフライトリクエスト）ってのを確認した上で、許可されたら本来のリクエストを送る流れになります。

なお、「Access-Control-Max-Age」ヘッダの値によってキャッシュ可能な秒数を指定することで、一定期間はブラウザにキャッシュさせることが可能です。

1.OPTIONSメソッドによるリクエスト(プリフライトリクエスト)を発行する。

その際は、以下のヘッダ情報を含んでいる必要があります。

• リクエスト発行元のOriginを値として持つOriginヘッダ
• 発行したいリクエストのメソッドを値として持つ「Access-Control-Request-Method」ヘッダ
• 発行したいリクエストに付与したいヘッダ名のリストを値として持つ「Access-Control-Request-Headers」ヘッダ

2.プリフライトリクエストへのレスポンスが以下をすべて満たしている場合は、Webブラウザは本来のリクエストを発行する。

• レスポンス中の「Access-Control-Allow-Origin」の中身を見てリクエスト発行元のオリジンが含まれている。
• レスポンス中の「Access-Control-Request-Method」ヘッダの値が、元々発行したかったリクエストメソッドを含んでいる。
• レスポンス中の「Access-Control-Request-Headers」が、元々発行したかったリクエストのヘッダを含んでいる。