Download as PDF, PPTX
Uploaded byHiyou Shinnonome
Cross-Origin Resource Sharing
Cross-Origin Resource Sharingを簡単に解説しました @2015/06/30 DMM.comラボ ツチノコ定例勉強会
Cross-Origin Resource Sharing
- 1.
- 2. CSRFとは • Cross-Site RequestForgeries • 正規のフォーム等以外からのリクエストを送り、 データを不正に送受信すること • 詳しくはWikipedia:クロスサイトリクエストフォージェ リ
- 3. Ajaxとは • Asynchronous JavaScript+ XML • 非同期でJavaScriptを用いて必要な情報をXML で取得し、動的に画面を書き換える方法 • 現在はXML以外にJSON等も用いられる • サーバで動的にページを生成するものではない
- 4. jQueryとは違うの • jQueryはAjaxを使うためのフレームワークの一 つ • 他にもGoogleWeb ToolkitやSpry等がある
- 5.
- 6.
- 7.
- 8. JSONP • HTMLのscriptタグを用いて、外部ドメインからデー タを持つスクリプトを取得、リソースとして利用する 方法 <script src=http://data.example.com/req?data=example-data > • JSONPのデータは、基本的にどこからでもリクエス トして取得できてしまう。 → データ漏えいの危険性
- 9.
- 10.
- 11. CORS • 別ドメインリソースを取得するときのW3C勧告 • Ajaxがリソースを取ろうとした時に、ブラウザ 内部で動作する→ JavaScriptで制御できない
- 12. 使われるヘッダ • Origin :データ参照元ドメイン • Access-Control-* : 各種許可情報のやりとりに 使われる（ヘッダ名で内容は判断できる・後述
- 13. CORSシーケンス • Ajaxで別ドメインのリソースを取得しようとする • ブラウザがリソースに対して表示中ページのドメ イン情報等を送る •リソース側で許可されたアクセスかを判断し、ブ ラウザに応答する • 許可されたアクセスであれば、Ajaxの通信をブラ ウザがリソースへ送信する
- 14. CORSシーケンス • Ajaxで別ドメインのリソースを取得しようとする • ブラウザがリソースに対して表示中ページのドメ イン情報等を送る •リソース側で許可されたアクセスかを判断し、ブ ラウザに応答する • 許可されたアクセスであれば、Ajaxの通信をブラ ウザがリソースへ送信する
- 15. Ajaxの外部リソース取得 • XMLHttpRequest(XHR)の呼び出し • JavaScriptからブラウザへリソースの要求が行われる •ブラウザが外部ドメインかどうかを判断する • ブラウザがpreflightリクエストが必要かを判断 する
- 16. preflightの条件 • HTTPメソッドがGET, POST,HEADのいずれか • HTTPヘッダにAccept, Accept-Language, Content-Language, Content-Type以外のフィー ルドが含まれない • Content-Typeの値はapplication/x-www-form- urlencoded, multipart/form-data, text/plain のいずれか
- 17. CORSシーケンス • Ajaxで別ドメインのリソースを取得しようとする • ブラウザがリソースに対して表示中ページの情報 を送る •リソース側で許可されたアクセスかを判断し、ブ ラウザに応答する • 許可されたアクセスであれば、Ajaxの通信をブラ ウザがリソースへ送信する
- 18. CORSシーケンス • Ajaxで別ドメインのリソースを取得しようとする • ブラウザがリソースに対して表示中ページの情報 を送る •リソース側で許可されたアクセスかを判断し、ブ ラウザに応答する • 許可されたアクセスであれば、Ajaxの通信をブラ ウザがリソースへ送信する
- 19. preflight - 送信 •OPTIONSメソッドを使用 • Originヘッダ • 参照元スキーマ及びドメイン情報 • Access-Control-Request-Methodヘッダ • リクエストに使用するメソッド
- 20. preflight - 送信 OPTIONS/ HTTP/1.1 Host : data.example.com Origin : http://www.example.com Access-Control-Request-Method : GET
- 21. CORSシーケンス • Ajaxで別ドメインのリソースを取得しようとする • ブラウザがリソースに対して表示中ページの情報 を送る •リソース側で許可されたアクセスかを判断し、ブ ラウザに応答する • 許可されたアクセスであれば、Ajaxの通信をブラ ウザがリソースへ送信する
- 22. CORSシーケンス • Ajaxで別ドメインのリソースを取得しようとする • ブラウザがリソースに対して表示中ページの情報 を送る •リソース側で許可されたアクセスかを判断し、ブ ラウザに応答する • 許可されたアクセスであれば、Ajaxの通信をブラ ウザがリソースへ送信する
- 23. preflight - 受信 •200番台のレスポンスコード • Access-Control-Allow-Originヘッダ • 許可されたOriginの情報（通常、リクエストと同値が返される） • Access-Control-Max-Ageヘッダ • preflightのTTL（秒単位 • Access-Control-Allow-Methodsヘッダ • 許可するメソッドの一覧 • Varyヘッダ • 内容によって応答が変更されるヘッダ一覧
- 24. preflight - 受信 HTTP/1.1200 OK Server: nginx/1.7.10 Date: Mon, 29 Jun 2015 09:52:05 GMT Content-Length: 0 Connection: keep-alive Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET Access-Control-Max-Age: 3000 Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
- 25. CORSシーケンス • Ajaxで別ドメインのリソースを取得しようとする • ブラウザがリソースに対して表示中ページの情報 を送る •リソース側で許可されたアクセスかを判断し、ブ ラウザに応答する • 許可されたアクセスであれば、Ajaxの通信をブラ ウザがリソースへ送信する
- 26. CORSシーケンス • Ajaxで別ドメインのリソースを取得しようとする • ブラウザがリソースに対して表示中ページの情報 を送る •リソース側で許可されたアクセスかを判断し、ブ ラウザに応答する • 許可されたアクセスであれば、Ajaxの通信をブラ ウザがリソースへ送信する
- 27. その他ヘッダ • Access-Control-Allow-Credentials • Cookieを許可するか •Access-Control-Expose-Headers • 使用可能なヘッダの一覧
- 28.
- 29.