Your SlideShare is downloading. ×
0
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Cors
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cors

43

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
43
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. Same Origin PolicyThursday, May 9, 13
  • 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. We have /OPTIONS• JSONP• Server-side proxy• CORS!• Elaborate iFrame hacks• postMessage• Window.name transportThursday, May 9, 13
  • 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. JSONPThursday, May 9, 13
  • 7. JSONPThursday, May 9, 13
  • 8. Jason PeeThursday, May 9, 13
  • 9. Server-side proxyThursday, May 9, 13
  • 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. 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. CORShttp://www.html5rocks.com/en/tutorials/cors/Thursday, May 9, 13
  • 13. CORSThursday, May 9, 13
  • 14. CORS, basicallyThursday, May 9, 13
  • 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. CORS, fullyTexthttp://www.html5rocks.com/static/images/cors_server_flowchart.pngThursday, May 9, 13
  • 17. Simple: Requestvar url = http://api.alice.com/cors;var xhr = createCORSRequest(GET, url);xhr.send();Thursday, May 9, 13
  • 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. Simple: ResponseAccess-Control-Allow-Origin: http://api.bob.comAccess-Control-Allow-Credentials: trueContent-Type: text/html; charset=utf-8Thursday, May 9, 13
  • 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. 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. 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. 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. CORS in ACTION• http://arunranga.com/examples/access-control/• Owen’s App!Thursday, May 9, 13

×