53
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

HTML5 における CORS について

HTML5のCORSについて調べる機会があったので纏めました。
(誤りなど有りましたらコメントいただけると幸いです)

同一オリジンポリシー (Same-Origin Policy)

同一オリジンポリシーとは

同一オリジンポリシー (Same-Origin Policy) とは、リソースの保護範囲を決定する取り決めである。
セキュリティ上の理由から、ブラウザは異なるオリジンへのリクエストを送信できないように制限している。

※ 備考:なぜ制限する必要があるのか
具体例として、ブラウザから悪意ある攻撃者のサイトにアクセスし、ページのJavaScriptが実行されるとする。
同一オリジンポリシーが無いと、JavaScript から異なるオリジン (例えば file://127.0.0.1/ など) にアクセスできてしまう可能性がある。
すると攻撃者のサーバーへデータを漏出させることが容易となってしまう為、許可しない限りは異なるオリジンへの通信を制限すべきである。

同一オリジンとは

リソースのURLのうち「スキーム、ホスト、ポート」の組み合わせをオリジンと呼ぶ。
閲覧中のWebページとリソースのオリジンが一致していれば同一オリジンとみなす。

具体例として http://www.example.com に対しては、

となる。

※ 備考:InternetExplorer の例外
IE に於いては以下の例外があるため注意が必要

  • 信頼済みサイト(IE独自機能)に登録されているサイトは同一オリジンとみなす
  • 異なるポートでも同一オリジンとみなす

同一オリジンポリシーによる制約

以下の WebAPI は同一オリジンポリシーの制約を受ける。

  • XMLHttpRequest
  • Canvas
  • Web Storage
  • X-Frame-Options

また以下のHTML要素などによる異なるオリジンからのリソース取得については制約を受けない。

  • script // スクリプト
  • img, video, audio // メディア
  • object, embed, applet // プラグイン
  • frame, iframe // 別サイトのコンテンツ
  • link, CSS(font-face): // CSS、Webフォントなど

CORS (Cross-Origin Resource Sharing)

CORSとは

CORS (Cross-Origin Resource Sharing) は異なるオリジン間でデータをやり取りするための決まり。
CORSによって異なるオリジンから読み出されたリソースも、同じオリジンから読み出されたリソースと同じように扱うことができる。

例えば XHR (XMLHttpRequest) を利用すれば Ajax で異なるオリジンのリソースを取得することが出来る。
しかし XHR は同一オリジンポリシーに従うため、異なるオリジン間へのリクエストが制限されている。
CORSを行うためには、サーバーとクライアント双方で適切なヘッダーを付与する必要がある。

CORSに関連するリクエストヘッダ

リクエストヘッダーはブラウザが自動的に付与してくれる。

  • Origin: オリジン情報(必須)
  • Access-Control-Request-Method: HTTP メソッドの種類
  • Access-Control-Request-Headers: リクエストヘッダの種類

CORSに関連するレスポンスヘッダ

レスポンスヘッダーは必要に応じて付与する必要がある。

  • Access-Control-Allow-Origin: 許可するオリジン(必須)
  • Access-Control-Allow-Credentials: 認証情報を含むリクエストの許可
  • Access-Control-Allow-Methods: 許可する HTTP メソッドの種類
  • Access-Control-Allow-Headers: 許可するリクエストヘッダの種類
  • Access-Control-Expose-Headers: 要求するリクエストヘッダの種類
  • Access-Control-Max-Age: プリフライトリクエスト(OPTION)の有効期限

crossorigin 属性 と Canvas 要素

crossorigin 属性とは

HTML5 では以下の HTML 要素が crossorigin 属性に対応している。

  • img
  • audio
  • video
  • link
  • script

これらの HTML 属性に crossorigin 属性が付与すると、リソース取得時のリクエストヘッダーが変化する。

  • なし: CORSに対応しない
  • crossorigin (値指定なし): anonymous と同一
  • crossorigin="anonymous": 認証情報を付与しない
  • crossorigin="use-credentials": 認証情報を付与する

Canvas 要素の機能制限

異なるオリジンのリソースを Canvas 要素で読み込んだ場合、同一オリジンポリシーによる 制約によって、以下の関数などが実行できなくなってしまう。
上述の crossorigin 属性を指定することで、これらの関数を利用することができるようになる。

  • toBlob() // 描画内容からblobオブジェクトを生成
  • toDataURL() // 描画内容からbase64を生成
  • getImageData() // 指定範囲のImageDataオブジェクトを取得

資料

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
53
Help us understand the problem. What are the problem?