Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CORS - Cross-Origin Resource Sharing

CORS - Cross-Origin Resource Sharing

Introduction to CORS for the San Diego JavaScript gruop

Sander van Zoest

June 05, 2012
Tweet

More Decks by Sander van Zoest

Other Decks in Technology

Transcript

  1. Cross-Origin Resource Sharing Sander van Zoest San Diego JS, June

    5th, 2012 © Copyright 2012 OneHealth Solutions, Inc http://sander.vanzoest.com/ http://www.linkedin.com/in/svanzoest http://github.com/svanzoest http://gplus.to/svanzoest
  2. Same-Origin Policy (SOP) •  Central Security Concept •  They prevent

    a script hosted at one origin from reading or writing to the DOM of another. •  Origin -  <protocol>://<domain>:<port> © Copyright 2012 OneHealth Solutions, Inc 9/19/13 2
  3. What about Cross-Origin? •  JSONP -  Error handling tricky - 

    Authentication primarily via cookies •  Proxy Requests via the Server -  Extra overhead of a server •  Message Passing via iFrames -  Cumbersome and confusing •  CORS -  Made to solve this mess © Copyright 2012 OneHealth Solutions, Inc 9/19/13 3
  4. Cross-Origin Resource Sharing •  Similar to Flash’s crossdomain.xml but more

    granular. -  Per request control -  Managed by Application, not Systems •  Supports all REST HTTP Methods -  Such as PUT, DELETE •  Better Error Handling •  Plays nice with Authentication Methods © Copyright 2012 OneHealth Solutions, Inc 9/19/13 4
  5. Simple Requests •  Request only uses GET or POST. - 

    If POST is used to send data to the server, the Content-Type of the data sent to the server with the HTTP POST request is one of •  application/x-www-form-urlencoded, •  multipart/form-data •  text/plain. •  Does not set custom HTTP Headers •  Otherwise, you need to preflight the request © Copyright 2012 OneHealth Solutions, Inc 9/19/13 5
  6. Preflight Request 1.  send an HTTP OPTIONS request -  in

    order to determine whether the actual request is safe to send. © Copyright 2012 OneHealth Solutions, Inc 9/19/13 6 OPTIONS /resources/post-here/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 … Origin: http://foo.example Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER
  7. Preflight Request 2.  server responds -  in order to determine

    whether the actual request is safe to send. © Copyright 2012 OneHealth Solutions, Inc 9/19/13 7 HTTP/1.1 200 OK Date: Mon, 04 June 2012 01:15:39 GMT Server: Apache/2.4.0 (Unix) Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER Access-Control-Max-Age: 1728000 … Content-Length: 0 Content-Type: text/plain
  8. Preflight Request 3.  Actual request happens -  Now that we

    have permission, we make the true call. © Copyright 2012 OneHealth Solutions, Inc 9/19/13 8 POST /resources/post-here/ HTTP/1.1 Host: bar.other … X-PINGOTHER: pingpong Content-Type: text/xml; charset=UTF-8 Referer: http://foo.example/examples/preflight.html Content-Length: 55 Origin: http://foo.example Pragma: no-cache Cache-Control: no-cache <?xml version="1.0"?><person><name>Arun</name></person>
  9. Potential Security Concerns •  Universal Allow: •  Site-level Cross Origin

    Access: •  Access-control decision based on Origin header: •  Origin Header Can Easily Be spoofed, -  like the Referrer Header •  Prolonged caching of Preflight responses •  Misplaced-trust •  Processing rogue COR © Copyright 2012 OneHealth Solutions, Inc 9/19/13 9
  10. Resources •  http://enable-cors.org •  http://www.w3.org/TR/cors/ •  http://arunranga.com/examples/access-control/ •  http://code.google.com/p/html5security/wiki/ CrossOriginRequestSecurity

    •  https://developer.mozilla.org/en/http_access_control •  http://dev.opera.com/articles/view/dom-access-control-using-cross- origin-resource-sharing/ •  http://html5security.org/ •  http://html5sec.org/ © Copyright 2012 OneHealth Solutions, Inc 9/19/13 10