CORS and Javascript
Integration in the browser
Michael Neale
@michaelneale
developer.cloudbees.com
http://en.wikipedia.org...
Integration in the browser
Lots of services, microservices
Everything has an API
JSON == lingua franca
Why have servers th...
For example
Thursday, 12 September 13
CI serverApp service
JSON !!111
repos
Thursday, 12 September 13
but - same origin policy?
http://en.wikipedia.org/wiki/Same-origin_policy
Thursday, 12 September 13
same origin policy
Thursday, 12 September 13
but - same origin policy?
Web security model - not bad track record.
Not going to change... so, how to work around:
Thursd...
integration middleware?
Thursday, 12 September 13
Overkill
Thursday, 12 September 13
JSON-P
All JSON world - add “padding”.
JSON P: take pure json, make it a function call - then
eval it.
Single Origin polic...
jsonp: Most glorious hack
ever
Thursday, 12 September 13
JSON-P
JSON: { “foo” : 42 }
JSONP: callback({ “foo” : 42 });
Widely supported (both by servers and of course
jquery makes ...
JSON-P
What it is really doing: creating script tags, and
making your browser “eval” the lot. Each time.
Don’t think too h...
JSON-P
Really misses the “spirit” of same-origin.
Security holes: any script you bring in has access to
your data/dom/priv...
JSON-P
Also, JSON is not Javascript
JSON can be safely read - no eval
JSON-P only eval
JSONP is GET only
Thursday, 12 Sept...
CORS
http://en.wikipedia.org/wiki/Cross-
origin_resource_sharing
Allows servers to specify who/what can access
endpoint di...
CORS
Thursday, 12 September 13
Oy, they’re my sisters yer lookin atNOT THESE:
Thursday, 12 September 13
CORS
Trivial to consume: plain web calls, direct.
Complexity: on the server/config side.
Browser support: complete(ish):
ht...
How it works
Most work is between browser and server, via http
headers.
“Pre flight checks”:
Browser passes Origin header t...
How it works
browser server
http OPTIONS (Origin: http://boo.com)
Access-Control-Allow.... etc
direct http GET (as allowed...
How it works
“Pre flight checks”:
Performed by browser, opaque to client app.
Browser enforces. You don’t see them.
Uses “O...
Security Theatre?
“Pre flight checks”:
Can be just an annoyance.
Access-Control-Allow-Origin: *
Downside: allows any script...
Common pattern
Access-Control-Allow-Origin: $origin-from-request
The returned value is really echoing back what Origin
was...
Middleware
All app server environments have a way to do the
Right Thing with CORS headers:
Rack-cors: ruby
Servlet-filter: ...
Other CORS headers
Access-Control-Allow-Headers (headers to be
included in requests)
Access-Control-Allow-Methods: GET, PU...
Authorization
You can use per request tokens, eg OAuth
OpenID and OAuth based sessions will work
(browser has done redirec...
Authorization
requests
authorization
identity/auth
pre-flight
your app
browser
Thursday, 12 September 13
Debugging
Pesky pre-flight checks are often opaque - may
show up as “cancelled” requests without a reason.
Use chrome://net...
Debugging
Following screen cap shows it working...
note the match between Origin and Access-control -
if you don’t see tho...
Thursday, 12 September 13
Thursday, 12 September 13
Debugging
t=1374052796709 [st=262] +URL_REQUEST_BLOCKED_ON_DELEGATE [dt=0]
t=1374052796709 [st=262] CANCELLED
t=1374052796...
My Minimal Setup
 Access-Control-Allow-Methods: GET, POST, PUT, DELETE
 Access-Control-Allow-Credentials: true
Access-Cont...
Servlet Filter
https://github.com/cloudbees/cors-plugin/blob/
master/src/main/java/org/jvnet/hudson/plugins/
cors/JenkinsC...
Thank you
Michael Neale
https://twitter.com/michaelneale
https://developer-blog.cloudbees.com
Thursday, 12 September 13
Upcoming SlideShare
Loading in …5
×

Cors michael

1,764
-1

Published on

Use CORS for cross domain apps from javascript (javascript apps that talk to many servers, from the browser)

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,764
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cors michael

  1. 1. CORS and Javascript Integration in the browser Michael Neale @michaelneale developer.cloudbees.com http://en.wikipedia.org/wiki/Cross- origin_resource_sharing Thursday, 12 September 13
  2. 2. Integration in the browser Lots of services, microservices Everything has an API JSON == lingua franca Why have servers that are just text pumps: Integrate into new apps in the browser Thursday, 12 September 13
  3. 3. For example Thursday, 12 September 13
  4. 4. CI serverApp service JSON !!111 repos Thursday, 12 September 13
  5. 5. but - same origin policy? http://en.wikipedia.org/wiki/Same-origin_policy Thursday, 12 September 13
  6. 6. same origin policy Thursday, 12 September 13
  7. 7. but - same origin policy? Web security model - not bad track record. Not going to change... so, how to work around: Thursday, 12 September 13
  8. 8. integration middleware? Thursday, 12 September 13
  9. 9. Overkill Thursday, 12 September 13
  10. 10. JSON-P All JSON world - add “padding”. JSON P: take pure json, make it a function call - then eval it. Single Origin policy doesn’t apply to resource loading Thursday, 12 September 13
  11. 11. jsonp: Most glorious hack ever Thursday, 12 September 13
  12. 12. JSON-P JSON: { “foo” : 42 } JSONP: callback({ “foo” : 42 }); Widely supported (both by servers and of course jquery makes it transparent) Thursday, 12 September 13
  13. 13. JSON-P What it is really doing: creating script tags, and making your browser “eval” the lot. Each time. Don’t think too hard about it... Thursday, 12 September 13
  14. 14. JSON-P Really misses the “spirit” of same-origin. Security holes: any script you bring in has access to your data/dom/private parts. How secure is server serving up json-p? Thursday, 12 September 13
  15. 15. JSON-P Also, JSON is not Javascript JSON can be safely read - no eval JSON-P only eval JSONP is GET only Thursday, 12 September 13
  16. 16. CORS http://en.wikipedia.org/wiki/Cross- origin_resource_sharing Allows servers to specify who/what can access endpoint directly Use plain JSON, ALL HTTP Verbs: PUT, DELETE etc Thursday, 12 September 13
  17. 17. CORS Thursday, 12 September 13
  18. 18. Oy, they’re my sisters yer lookin atNOT THESE: Thursday, 12 September 13
  19. 19. CORS Trivial to consume: plain web calls, direct. Complexity: on the server/config side. Browser support: complete(ish): http://enable-cors.org/ All verbs, all data types Thursday, 12 September 13
  20. 20. How it works Most work is between browser and server, via http headers. “Pre flight checks”: Browser passes Origin header to server: Origin: http://www.example-social-network.com Server responds (header) saying what is allowed: Access-Control-Allow-Origin: http://www.example-social-network.com Thursday, 12 September 13
  21. 21. How it works browser server http OPTIONS (Origin: http://boo.com) Access-Control-Allow.... etc direct http GET (as allowed by Access headers) ... pre- flight your app Thursday, 12 September 13
  22. 22. How it works “Pre flight checks”: Performed by browser, opaque to client app. Browser enforces. You don’t see them. Uses “OPTION” http verb. Thursday, 12 September 13
  23. 23. Security Theatre? “Pre flight checks”: Can be just an annoyance. Access-Control-Allow-Origin: * Downside: allows any script with right creds to pull data from you (do you want this? Think, as always) Thursday, 12 September 13
  24. 24. Common pattern Access-Control-Allow-Origin: $origin-from-request The returned value is really echoing back what Origin was - checked off against a whitelist: Server needs to know whitelist, how to check, return value dynamically. Not a static web server config. SAD FACE. Thursday, 12 September 13
  25. 25. Middleware All app server environments have a way to do the Right Thing with CORS headers: Rack-cors: ruby Servlet-filter: java Node: express middleware etc... (it isn’t hard, just not as easy as it should be) http://stackoverflow.com/questions/7067966/how-to-allow- cors-in-express-nodejs Thursday, 12 September 13
  26. 26. Other CORS headers Access-Control-Allow-Headers (headers to be included in requests) Access-Control-Allow-Methods: GET, PUT, POST, DELETE etc Access-Control-Allow-Credentials: boolean (lists always comma separated) Thursday, 12 September 13
  27. 27. Authorization You can use per request tokens, eg OAuth OpenID and OAuth based sessions will work (browser has done redirect “dance” - Access- Control-Allow-Credentials: true -- needed to ensure cookies/auth info flows with requests) Thursday, 12 September 13
  28. 28. Authorization requests authorization identity/auth pre-flight your app browser Thursday, 12 September 13
  29. 29. Debugging Pesky pre-flight checks are often opaque - may show up as “cancelled” requests without a reason. Use chrome://net-internals/#events Thursday, 12 September 13
  30. 30. Debugging Following screen cap shows it working... note the match between Origin and Access-control - if you don’t see those headers in response - something is wrong. Thursday, 12 September 13
  31. 31. Thursday, 12 September 13
  32. 32. Thursday, 12 September 13
  33. 33. Debugging t=1374052796709 [st=262] +URL_REQUEST_BLOCKED_ON_DELEGATE [dt=0] t=1374052796709 [st=262] CANCELLED t=1374052796709 [st=262] -URL_REQUEST_START_JOB --> net_error = -3 (ERR_ABORTED) This is it failing: look for “cancelled”. Could be due to incorrect headers returned, or perhaps Authorization failures (cookies, session etc) Thursday, 12 September 13
  34. 34. My Minimal Setup  Access-Control-Allow-Methods: GET, POST, PUT, DELETE  Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: $ORIGIN $ORIGIN = if (inWhitelist(requestOriginHeader) return requestOriginHeader INCLUDE PORTS IN Access-Control-Allow-Origin!! Thursday, 12 September 13
  35. 35. Servlet Filter https://github.com/cloudbees/cors-plugin/blob/ master/src/main/java/org/jvnet/hudson/plugins/ cors/JenkinsCorsFilter.java Thursday, 12 September 13
  36. 36. Thank you Michael Neale https://twitter.com/michaelneale https://developer-blog.cloudbees.com Thursday, 12 September 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×