CORS (Cross-Origin Resource Sharing) のバックアップ(No.10)

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• CORS (Cross-Origin Resource Sharing) へ行く。
  • 1 (2019-09-05 (木) 17:57:57)
  • 2 (2019-09-05 (木) 19:29:36)
  • 3 (2019-09-06 (金) 15:29:40)
  • 4 (2019-09-06 (金) 16:35:04)
  • 5 (2019-10-11 (金) 21:23:28)
  • 6 (2020-01-05 (日) 17:12:01)
  • 7 (2020-02-27 (木) 20:00:05)
  • 8 (2020-03-17 (火) 10:37:39)
  • 9 (2020-09-24 (木) 17:38:37)
  • 10 (2020-09-25 (金) 20:49:38)
  • 11 (2020-10-04 (日) 16:32:22)
  • 12 (2021-04-01 (木) 11:46:24)

---

「マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る

目次 †

概要 †

詳細 †

同一源泉ポリシー †

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

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

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

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

セイムサイト（SameSite?） †

• Same-Origin（同一生成元）とも言う。

• セイムサイト（SameSite?）では、
  • Same-Origin（同一生成元）Policyで通信が可能。
  • また、CookieのSameSite属性などで利用されている。

クロスサイト、クロスドメイン †

CORSは、クロスサイト、クロスドメイン接続専用に用意された技術。

• ブラウザとサーバ間で、約束された Request / Response を使って、
  そのドメインからのクロス ドメインの呼び出しを許可するか確認をおこなう。

• サーバが許可していれば XMLHttpRequest? を使用したクロス ドメインの呼び出しをおこなう。

このように、ブラウザ・サーバの双方が CORS に対応している必要がある（ここが鬼門）。

使い方 †

サーバーでポリシ設定 †

• フレームワーク次第だが、基本的に、閉じられているので、空ける。

• ブラウザ側で問題が出るので、Access-Control-Allowヘッダを返すように設定する。

• ASP.NETの場合は、コチラを参考にして設定する。

ブラウザのサポートを確認 †

• 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

使いどころ †

• 基本的に、CORSは閉じられているので、空ける。

• 特定サイトのみ許可する制御を加える。
  • 対象：特定GUI（Public Client）にのみアクセスを許可する。
  • 対象外：不特定多数のClientに公開しているWebAPI

ポイント †

Preflight request †

CORSプロトコルが理解されているかどうかを確認する CORSリクエスト

• CORSリクエストが受け入れられるかどうかを事前にチェックを行う。

• ある一定条件のリクエストを投げる際には事前に発生する。
  （代表的なものに、POST かつ application/json の例がある。）

• その場合、サーバが以下を適切にレスポンスするように構成する必要がある。

• シーケンス

• サイト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設定を確認 †

• 以下のように、
  curlで任意のOriginヘッダを指定してテストできる。
  ※ 送信するOriginヘッダは、ブラウザでは捏造不可能。

• また、前述のPreflight requestを
  テストすることも可能（下記の記事を参照のこと）。

  >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

差異 †

クライアント毎 †

ブラウザ毎 †

なお、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/

参考 †

• 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 †

• CORSまとめ
  https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34
• CORS関連、これだけ知っとけばまぁ大丈夫
  https://qiita.com/rooooomania/items/4d0f6275372f413765de
• CORS を分かってないから動くコード書いて理解する
  https://qiita.com/mochizukikotaro/items/6b72ad595db8a6b5514f

ASP.NET †

ASP.NET Web API における設定は、下記を参照。

Microsoft Docs †

• 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 †

• 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

     

Site admin: dotNetDevelopmentInfrastructure

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.050 sec.