CORS (Cross-Origin Resource Sharing) のバックアップの現在との差分(No.10)

バックアップ一覧
差分を表示
ソースを表示
バックアップを表示
CORS (Cross-Origin Resource Sharing) へ行く。
追加された行はこの色です。
削除された行はこの色です。
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>クロス ドメイン接続]]
-戻る
--[[クロス ドメイン接続]]
--[[HTTPヘッダ]]

* 目次 [#cd946db6]
#contents

*概要 [#oe684c04]

*詳細 [#o1070ea8]

**HTTPヘッダ [#rc36f13f]
-Request
--Origin~
源泉を表すURL。

-Response

--Cross-Origin-Resource-Policy~
&lt;script> や <img> などの要素を使用して発行された~
他のオリジンからのリクエストに対する保護を事前に通知する。

--Timing-Allow-Origin~
Resource Timing APIを許可するオリジン

--X-Permitted-Cross-Domain-Policies~
アドビ製品によるページのレンダリングを許可

-Access-Control系

--Request
---Access-Control-Request-Headers
---Access-Control-Request-Method
---Access-Control-Expose-Headers

--Response
---Access-Control-Allow-Origin
---Access-Control-Allow-Credentials
---Access-Control-Allow-Headers
---Access-Control-Allow-Methods
---Access-Control-Max-Age

**同一源泉ポリシー [#y3501755]
先ず、同一源泉ポリシーと言う（同一オリジンポリシーとも呼ばれる）仕組みがある。

-コンテンツがブラウザに来る源泉（origin）に基づいて整理して、外部からの干渉を防ぐ仕組み。

-以下の3つを一組としてすべて一致するとき[[同一の源泉（origin）>#i22f75b6]]とみなす。 
--URLスキーム
--ホスト（IPやFQDN）
--ポート番号

-厳密には異なるが[[クロスサイト、クロスドメイン>#lee5a245]]の制限と表記されることもある。

***セイムサイト（SameSite） [#i22f75b6]
-Same-Origin（同一生成元）とも言う。
-同一生成元（Same-Origin）とも言う。

-セイムサイト（SameSite）では、
--Same-Origin（同一生成元）Policyで通信が可能。
--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/

**危険な設定 [#c298bd55]

***Access-Control-Allow-Credentials: true [#j8e6762e]
-Access-Control-Allow-Credentials: trueが危ないレスポンス。
-攻撃者が 被害者の認証情報（Cookie）を任意のサイトに送信できる。

***Access-Control-Allow-Origin: * [#sd126b55]
-危ないように見えるが実は危なくない。
-[[Access-Control-Allow-Credentials: true>#j8e6762e]]は機能しなくなる。
-ただし、任意のサイトにリクエストを送信することはできる。

***Access-Control-Allow-Origin: null [#x4c8160a]
-実際の意味とは逆に「誰もいない」ではなく「全員」を意味する。
-[[Access-Control-Allow-Credentials: true>#j8e6762e]]が機能するので危険。

***参考 [#rd1ad6ca]
-Exploiting CORS Misconfiguration Vulnerabilities on Web Servers | by Simon Saliba | The Startup | Medium~
https://medium.com/swlh/exploiting-cors-misconfiguration-vulnerabilities-2a16b5b979

*参考 [#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]]
Tags: [[:セキュリティ]], [[:プログラミング]], [[:IT国際標準]], [[:通信技術]], [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]]