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

目次

概要

詳細

同一源泉ポリシー

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

  • コンテンツがブラウザに来る源泉(origin)に基づいて整理して、外部からの干渉を防ぐ仕組み。
  • 以下の3つを一組としてすべて一致するとき同一の源泉(origin)とみなす。
    • URLスキーム
    • ホスト(IPやFQDN)
    • ポート番号

セイムサイト(SameSite?

  • 同一生成元(Same-Origin)とも言う。
  • セイムサイト(SameSite?)では、

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

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

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

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

使い方

サーバーでポリシ設定

  • フレームワーク次第だが、基本的に、閉じられているので、空ける。
  • 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.

使いどころ

  • 基本的に、CORSは閉じられているので、空ける。
  • 特定サイトのみ許可する制御を加える。
    • 対象:特定GUI(Public Client)にのみアクセスを許可する。
    • 対象外:不特定多数のClientに公開しているWebAPI

ポイント

Preflight request

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

  • CORSリクエストが受け入れられるかどうかを事前にチェックを行う。
  • ある一定条件のリクエストを投げる際には事前に発生する。
    (代表的なものに、POST かつ application/json の例がある。)
  • その場合、サーバが以下を適切にレスポンスするように構成する必要がある。
#Header説明
1Access-Control-Allow-Origin許可されるオリジンの一覧
2Access-Control-Allow-Method許可されるメソッドの一覧
3Access-Control-Allow-Headers許可されるヘッダの一覧
4Access-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設定を確認

  • 以下のように、
    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

差異

クライアント毎

ブラウザ毎

なお、IE8, 9 ではサポート状況が違うため、
ライブラリのプラグイン内で条件分岐しているもよう。

参考

Qiita

ASP.NET

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

Microsoft Docs

Stack Overflow


Tags: :プログラミング, :通信技術, :.NET開発, :.NET Core, :ASP.NET, :ASP.NET Web API


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-10-04 (日) 16:32:22 (25d)