「[[マイクロソフト系技術情報 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]]の制限と表記されることもある。 ***セイムサイト(SameSite) [#i22f75b6] -Same-Origin(同一生成元)とも言う。 -セイムサイト(SameSite)では、 --Same-Origin(同一生成元)Policyで通信が可能。 --また、[[CookieのSameSite属性>SameSite属性の件]]などで利用されている。 ***クロスサイト、クロスドメイン [#lee5a245] CORSは、クロスサイト、クロスドメイン接続専用に用意された技術。 -ブラウザとサーバ間で、約束された Request / Response を使って、~ そのドメインからのクロス ドメインの呼び出しを許可するか確認をおこなう。 -サーバが許可していれば XMLHttpRequest を使用したクロス ドメインの呼び出しをおこなう。 このように、ブラウザ・サーバの双方が CORS に対応している必要がある(ここが鬼門)。 **使い方 [#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]]