「オリジン」とは?

HTMLに関して、英文の文書を読んでいたところ
crossorigin
という<img>の属性に遭遇。
HTML5で新規に追加された属性とのことだが
全く、どういうものか理解できないので、調べてみた。

まずは、「オリジン」について。

オリジンとは、「RFC 6454 – The Web Origin Concept」(IPAによる日本語訳)
で定められた概念で、端的にいうとリソース自身のURLの「スキーム」「ホスト
ポート」の3つの組み合わせを「オリジン」と呼びます。
重要! まずは「オリジン」を理解しよう による)

これだけでは、分かり難いので
http://www.example.jp/index.html
を例にとれば、

スキーム http
ホスト www.example.jp
ポート 80(省略時のデフォルト値)

この3つを「オリジン」と云うのだそうだ。

クロスオリジンとは、
リソースのオリジンによって動作が制限される
ことで、次のようなものがあるとのこと。

XMLHttpRequest

XMLHttpRequestによるリソースへのリクエストでは、取得しようとしているリソースのオリジンが現在表示しているドキュメントのオリジンと同一の場合には、無条件にレスポンスの内容をJavaScriptからresponseTextなどを通じて取得できます。

 オリジンが一致しない場合には、リソースの提供側が明示的に許可している場合にしか、JavaScriptからレスポンスの内容にアクセスすることはできません。


Canvas

HTML5のCanvas要素を使用して表示された画像は、そのHTMLのオリジンと同一のオリジンに属するものであれば、表示されている内容にJavaScriptからgetImageDataメソッドなどを通じてアクセス可能です。

 オリジンが一致しない場合には、画像提供側で明示的に許可している場合にしかアクセスできません。


知りたかったのは、2番目のCanvas部分。
何となく理解した気分です。
詳細は、上記URLを参照してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください