- 追加された行はこの色です。
- 削除された行はこの色です。
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>クロス ドメイン接続]]
* 目次 [#cd946db6]
#contents
*概要 [#oe684c04]
*詳細 [#o1070ea8]
**同一源泉ポリシー [#y3501755]
同一オリジンポリシーとも呼ばれる。
先ず、同一源泉ポリシーと言う(同一オリジンポリシーとも呼ばれる)仕組みがある。
-コンテンツがブラウザに来る源泉(origin)に基づいて整理して、外部からの干渉を防ぐ仕組み。
-以下の3つを一組としてすべて一致するとき[[同一の源泉(origin)>#i22f75b6]]とみなす。
--URLスキーム
--ホスト(IPやFQDN)
--ポート番号
-厳密には異なるが[[クロスドメイン、クロスサイト>#lee5a245]]の制限と表記されることもある。
-厳密には異なるが[[クロスサイト、クロスドメイン>#lee5a245]]の制限と表記されることもある。
**クロスドメイン、クロスサイト [#lee5a245]
CORSは、クロスドメイン、クロスサイト接続専用に用意された技術。
***セイムサイト(SameSite) [#i22f75b6]
-Same-Origin(同一生成元)とも言う。
-セイムサイト(SameSite)では、
--Same-Origin(同一生成元)Policyで通信が可能。
--また、[[CookieのSameSite属性>SameSite属性の件]]などで利用されている。
***クロスサイト、クロスドメイン [#lee5a245]
CORSは、クロスサイト、クロスドメイン接続専用に用意された技術。
-ブラウザとサーバ間で、約束された Request / Response を使って、~
そのドメインからのクロス ドメインの呼び出しを許可するか確認をおこなう。
-サーバが許可していれば XMLHttpRequest を使用したクロス ドメインの呼び出しをおこなう。
このように、ブラウザ・サーバの双方が CORS に対応している必要がある(ここが鬼門)。
**セイムサイト(SameSite) [#i22f75b6]
Same-Origin(同一生成元)とも言う。
-クロスサイトの対義語は、セイムサイト(SameSite)。
-セイムサイト(SameSite)では、Same-Origin(同一生成元)Policyで通信が可能。
※(クロスサイトでのCookie送信を制限する)[[SameSite属性が昨今、熱い>SameSite属性の件]]。
*詳細 [#o1070ea8]
**使い方 [#bfd484fe]
***サーバーでポリシ設定 [#cd9a5772]
-フレームワーク次第だが、基本的に、閉じられているので、空ける。
-[[ブラウザ側で問題>#rfacb72b]]が出るので、Access-Control-Allowヘッダを返すように設定する。
-ASP.NETの場合は、[[コチラ>#n5f10315]]を参考にして設定する。
***ブラウザのサポートを確認 [#rfacb72b]
-jQueryなど、ブラウザ上のライブラリは基本にCORSをサポートしている。
-ブラウザによってサポート状況が異なり動作が変わる。
--例えば、fetchで以下の様なエラーが出る。
Access to fetch at 'http://localhost:8888/...' from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
--たぶん、下記もコレと同じような話だと思われる。~
https://github.com/OpenTouryoProject/FrontendTemplates/issues/8
-参考
--JavaScript - CORSでJSからAPIを叩けない|teratail~
https://teratail.com/questions/144992
***使いどころ [#qf9a9950]
-基本的に、CORSは閉じられているので、空ける。
-特定サイトのみ許可する制御を加える。
--対象:特定GUI(Public Client)にのみアクセスを許可する。
--対象外:不特定多数のClientに公開しているWebAPI
**ポイント [#q20c0e7c]
***Preflight request [#p9ff6462]
CORSプロトコルが理解されているかどうかを確認する CORSリクエスト
-CORSリクエストが受け入れられるかどうかを事前にチェックを行う。
-ある一定条件のリクエストを投げる際には事前に発生する。~
(代表的なものに、POST かつ application/json の例がある。)
-その場合、サーバが以下を適切にレスポンスするように構成する必要がある。
|#|Header|説明|h
|1|Access-Control-Allow-Origin|許可されるオリジンの一覧|
|2|Access-Control-Allow-Method|許可されるメソッドの一覧|
|3|Access-Control-Allow-Headers|許可されるヘッダの一覧|
|4|Access-Control-Max-Age|プリフライト情報のキャッシュを保持して良い時間|
-シーケンス
--サイトAにScriptを含むコンテンツを要求
--上記のレスポンス
--上記で得たコンテンツからサイトBに「Preflight request」
OPTIONS /test HTTP/1.1
Origin: http://site-a.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header, Content-Type
--上記のレスポンス
Access-Control-Allow-Origin: http://site-a.example.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 86400
--上記で得たコンテンツからサイトBに「Main request」~
ブラウザは事前にOriginとAccess-Control-Allow-Originの一致を確認する。
POST /test HTTP/1.1
Content-Type: text/json
X-Custom-Header: custom-data
--上記のレスポンス
HTTP/1.1 200 OK
***curlでCORS設定を確認 [#ee1bd8d8]
-以下のように、~
curlで任意のOriginヘッダを指定してテストできる。~
※ 送信するOriginヘッダは、ブラウザでは捏造不可能。
-また、前述の[[Preflight request>#p9ff6462]]を~
テストすることも可能(下記の記事を参照のこと)。
>curl -H "Origin: http://example.com" --verbose http://localhost:8888/api/values/get
* Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8888 (#0)
> GET /api/values/get HTTP/1.1
> Host: localhost:8888
> User-Agent: curl/7.52.1
> Accept: */*
> Origin: http://example.com
>
< HTTP/1.1 200 OK
< Transfer-Encoding: chunked
< Content-Type: application/json; charset=utf-8
< Server: Microsoft-IIS/10.0
< X-Powered-By: ASP.NET
< Date: Thu, 05 Sep 2019 08:54:23 GMT
<
["value1","value2"]* Curl_http_done: called premature == 0
* Connection #0 to host localhost left intact
-参考
--How can you debug a CORS request with cURL? - Stack Overflow~
https://stackoverflow.com/questions/12173990/how-can-you-debug-a-cors-request-with-curl
--cURLを使用してCORSリクエストをデバッグするにはどうすればよいですか? - コードログ~
https://codeday.me/jp/qa/20181207/26208.html
**差異 [#u264ce9f]
***[[クライアント毎>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?JavaScript%20%E3%81%AE%20HTTP%20Client]] [#te81b5ae]
***ブラウザ毎 [#ye91963f]
なお、IE8, 9 ではサポート状況が違うため、~
ライブラリのプラグイン内で条件分岐しているもよう。
-ドメイン間要求 (XDR) の概要~
https://msdn.microsoft.com/ja-jp/library/dd573303.aspx
-XDomainRequest と XMLHttpRequest level 2 の 違い - galife~
https://garafu.blogspot.jp/2013/08/xdomainrequest-xmlhttprequest.html
-CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 | Developers.IO~
http://dev.classmethod.jp/cloud/cors-cross-origin-resource-sharing-cross-domain/
*参考 [#ra2c5876]
-CORSでハマったことまとめ - pixiv inside~
http://inside.pixiv.net/entry/2014/12/16/181804
-ASP.NET Web API 2 CORS サポートについて - miso_soup3 Blog~
http://miso-soup3.hateblo.jp/entry/2013/10/08/015152
**Qiita [#iffd4d51]
-CORSまとめ~
https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34
-CORS関連、これだけ知っとけばまぁ大丈夫~
https://qiita.com/rooooomania/items/4d0f6275372f413765de
-CORS を分かってないから動くコード書いて理解する~
https://qiita.com/mochizukikotaro/items/6b72ad595db8a6b5514f
**ASP.NET [#n5f10315]
ASP.NET Web API における設定は、下記を参照。
***Microsoft Docs [#iaf9c695]
-ASP.NET Web API 2 でクロスオリジン要求の有効化~
https://docs.microsoft.com/ja-jp/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
-ASP.NET Core でのクロスオリジン要求 (CORS) を有効にする~
https://docs.microsoft.com/ja-jp/aspnet/core/security/cors
***Stack Overflow [#f9d70b60]
-c# - How to enable CORS in ASP.NET Core~
https://stackoverflow.com/questions/31942037/how-to-enable-cors-in-asp-net-core
-c# - How to enable CORS in ASP.net Core WebAPI~
https://stackoverflow.com/questions/44379560/how-to-enable-cors-in-asp-net-core-webapi
----
Tags: [[:プログラミング]], [[:通信技術]], [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]]