ハマログ

株式会社イーツー・インフォの社員ブログ

CORS(Cross-Origin Resource Sharing)がわからない

OWASPでCross-Domain Misconfigurationの警告が出たのですが、対策がよくわからなかったので調べました。

CORS(オリジン間リソース共有)とは

HTTPヘッダーを利用して、あるオリジンで動いているアプリケーションに、別のオリジンからのアクセス権を与えることをブラウザに指示するための仕組み。

オリジンとは

URL のスキーム (プロトコル)、 ホスト (ドメイン)、 ポート によって定義される。

スキーム:https
ホスト:e2info.co.jp
ポート:443

以下は同一オリジン
https://www.e2info.co.jp/
https://www.e2info.co.jp/works.html

以下は異なるオリジン(スキームが異なる)
http://www.e2info.co.jp/
https://www.e2info.co.jp/

こちらも異なるオリジン(ホストが異なる)
https://www.e2info.co.jp/
https://blog.e2info.co.jp/

CORSで制限されるアクセス方法

  • XMLHttpRequest
  • Fetch API
  • ウェブフォント(CSSの@font-faceで別ドメインのフォントを利用する)
  • WebGLテクスチャ
  • drawImage() を使用してキャンバスに描画される画像やビデオフレーム
  • 画像から生成する CSS シェイプ
CORS を使用したリクエストとは より

仕様

別のオリジンのリソースを呼び出したい場合、HTTPリクエストヘッダにOriginを含めて送信する
GET /path/to/api HTTP/1.1
Origin: https://www.e2info.co.jp/
レスポンス
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.e2info.co.jp
この場合、https://www.e2info.co.jp からのアクセスは許可されていることになり、ブラウザは外部リソースを読み込むことが可能になります。

つまり

管理するアプリケーション内のリソースファイルが外部からXMLHttpRequestなどで呼び出される場合、許可していないオリジンからの呼び出しを防ぐために、Access-Control-Allow-Originを正しく返却するような対応が必要となります。

CORS設定

アプリケーションで制御、ミドルウェアで制御、ロードバランサで制御等方法はいくつかありますが、今回はApache2.4で設定してみました。

指定できるCORS関連のヘッダーは以下のサイトに記載されています。
HTTP ヘッダー – オリジン間リソース共有 (CORS)

上記サイトより。.htaccessもしくはコンフィグファイルでの設定方法


        Header set Access-Control-Allow-Origin "https://my.CLIENT.domain"

参考サイト

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS https://developer.mozilla.org/ja/docs/Glossary/Origin https://html.spec.whatwg.org/multipage/origin.html#origin
ApacheCOLSconfigHeaderhtaccessHTTPHTTPSMozillaResponseSecurityXSSセキュリティ

kaneko tomo   kaneko tomo   2020年3月8日


関連記事

AWS(Route53)で取得したドメインのDNS登録

はじめに AWS(Route53)でドメインを取得する の続き。 ドメイン取得か…

CentOSのMTAを変更する

CentOS6系のサーバーで、標準のMTAがSendmailだったのでPostf…

php+nginxでphp.iniを変更したらphp-fpmも再起動しよう

どーも、ゆうたです。 ちょっと前に健康診断を受けたら「動脈硬化のリスク有り」でC…


← 前の投稿

次の投稿 →