Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

HTML5 における CORS について

More than 3 years have passed since last update.

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オブジェクトを取得

資料

nanocloudx
Web Application Developer
https://wwww.dev
abeja
「ディープラーニング」を活用し、多様な業界、シーンにおけるビジネスの効率化・自動化を促進するベンチャー企業です。
https://abejainc.com
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