Save 37% off PRO during our Black Friday Sale! »

CORS - Cross-Origin Resource Sharing

CORS - Cross-Origin Resource Sharing

Introduction to CORS for the San Diego JavaScript gruop

13aed91054f38766a8ccf8f6cc7c1756?s=128

Sander van Zoest

June 05, 2012
Tweet

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
  11. p.s. We are hiring! http://www.onehealth.com/about/careers/ http://www.onehealth.com/ © Copyright 2012 OneHealth

    Solutions, Inc 9/19/13 11