Cors

231 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
231
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cors

  1. 1. Crossing the Domaina hasty introduction to Cross-origin Resource Sharing (CORS)Owen Zanzal and Steve Johnson for CV.JS 5/8/2013Thursday, May 9, 13
  2. 2. Same Origin PolicyThursday, May 9, 13
  3. 3. Let Freedom Ring• These domains are mine!• I had to use a different hostname!• I need this application to work!Thursday, May 9, 13
  4. 4. We have /OPTIONS• JSONP• Server-side proxy• CORS!• Elaborate iFrame hacks• postMessage• Window.name transportThursday, May 9, 13
  5. 5. JSONP• JavaScript Object Notation with Padding• <script> tags not subject to Same-Origin Policy• You can’t run scripts across domains but you can downloadresources• Download a “Script” from the other site... which happens tocontain data when you execute itThursday, May 9, 13
  6. 6. JSONPThursday, May 9, 13
  7. 7. JSONPThursday, May 9, 13
  8. 8. Jason PeeThursday, May 9, 13
  9. 9. Server-side proxyThursday, May 9, 13
  10. 10. CORSdefines a mechanism to enable client-side cross-origin requests.Specifications that enable an API to make cross-origin requeststo resources can use the algorithms defined by this specification.If such an API is used on http://example.org resources, aresource on http://hello-world.example can opt in using themechanism described by this specificationhttp://www.w3.org/TR/cors/Thursday, May 9, 13
  11. 11. CORS browser support• Chrome 3+ (XMLHttpRequest2)• Firefox 3.5+ (XMLHttpRequest2)• Opera 12+ (XMLHttpRequest2)• Safari 4+ (XMLHttpRequest2)• Internet Explorer 8+ (XDomainRequest)http://caniuse.com/#search=corshttp://enable-cors.org/client.htmlThursday, May 9, 13
  12. 12. CORShttp://www.html5rocks.com/en/tutorials/cors/Thursday, May 9, 13
  13. 13. CORSThursday, May 9, 13
  14. 14. CORS, basicallyThursday, May 9, 13
  15. 15. Simple RequestsHTTP MethodHTTP HeadersHEADGETPOSTAcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type: application/x-www-form-urlencodedContent-Type: multipart/form-dataContent-type: text/plainThursday, May 9, 13
  16. 16. CORS, fullyTexthttp://www.html5rocks.com/static/images/cors_server_flowchart.pngThursday, May 9, 13
  17. 17. Simple: Requestvar url = http://api.alice.com/cors;var xhr = createCORSRequest(GET, url);xhr.send();Thursday, May 9, 13
  18. 18. Simple: RequestGET /cors HTTP/1.1Origin: http://api.bob.comHost: api.alice.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...Thursday, May 9, 13
  19. 19. Simple: ResponseAccess-Control-Allow-Origin: http://api.bob.comAccess-Control-Allow-Credentials: trueContent-Type: text/html; charset=utf-8Thursday, May 9, 13
  20. 20. Not Simple: Requestvar url = http://api.alice.com/cors;var xhr = createCORSRequest(PUT, url);xhr.setRequestHeader(X-Custom-Header, value);xhr.send();Thursday, May 9, 13
  21. 21. Not Simple: Preflight RequestOPTIONS /cors HTTP/1.1Origin: http://api.bob.comAccess-Control-Request-Method: PUTAccess-Control-Request-Headers: X-Custom-HeaderHost: api.alice.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...Thursday, May 9, 13
  22. 22. Not Simple: Preflight ResponseAccess-Control-Allow-Origin: http://api.bob.comAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderContent-Type: text/html; charset=utf-8Thursday, May 9, 13
  23. 23. PROS CONSweb server can opt-in 30-40% of the internet can’t use itfiner-grain control over access Not super-securestraight up XHR extra complicated headersThursday, May 9, 13
  24. 24. CORS in ACTION• http://arunranga.com/examples/access-control/• Owen’s App!Thursday, May 9, 13

×