Cross-domain requests with CORS
•
3 likes•3,754 views
The future of the web is cross-domain, not same origin. Introduction to CORS requests and how they are handled by the browser and the web server.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to Cross-domain requests with CORS
Similar to Cross-domain requests with CORS (20)
More from Vladimir Dzhuvinov
More from Vladimir Dzhuvinov (8)
Recently uploaded
Recently uploaded (20)
Cross-domain requests with CORS
- 1. Cross-domain requests with CORS Vladimir Dzhuvinov @dzhuvinov
- 2. History ● 1989 The web and HTTP get invented ● 1994 Netscape Navigator ● 1995 JavaScript ● 1999 IE 5 brings XMLHttpRequest ● 2000+ The web becomes dynamic :-)
- 3. Dynamic web 2.0 vs same origin policy Browser * renders HTML * executes JS HTTP server (the origin) http://alice.org Web Service http://bob.com serves HTML page XHR allowed XHR denied
- 4. The future of the web is cross-domain, not same origin
- 5. The first approach at solving the cross-domain problem ● JSONp ● Ugly hack ● Relies on dynamic loading of <script> tags from servers that are not on the same domain
- 6. What web gurus decided to do ● Create a new standard protocol for cross-domain XHR: – Define origin: RFC 6454 – Define cross-domain requests: W3C Cross-Origin Resource Sharing (CORS) – Extend existing XMLHttpRequest object ● A 9 year effort!
- 8. The web origin concept Examples of same origin: http://hackafe.org:8080/files/hello-world?q=123 ORIGIN Defined in RFC 6454, published 2011, by Adam Barth / Google Defined by matching: * schema * host * port http://hackafe.org:8080/files/hello-world http://hackafe.org:8080/files/ http://hackafe.org:8080
- 9. For CORS to work HTTP servers must opt-in CORS web service http://bob.com Browser * script XHR “Yes, I'm willing to serve CORS requests!”
- 10. Simple CORS request ● Methods: – GET – HEAD – POST ● Request headers: – Accept – Accept-Language – Content-Language – Content-Type: ● text/plain ● application/x-www-form-urlencoded ● multipart/form-data
- 11. Simple CORS request 1. JS originating from http://alice.org: var client = new XMLHttpRequest() client.open("GET", "http://bob.com/hello") client.onreadystatechange = function() { /* do something */ } client.send() 2. HTTP Request browser → CORS server: GET /hello HTTP/1.1 Host: http://bob.com Origin: http://alice.org 3. HTTP Response CORS server → browser: HTTP/1.1 200 OK Access-Control-Allow-Origin: http://alice.org Content-Type: text/plain Hello world!
- 12. Preflight request ● For methods other than GET, HEAD and POST ● For credentials, such as cookies, HTTP basic and tokens ● For request headers such as Content-Type: application/json ● To expose non-simple response headers to the JavaScript, e.g. X-Custom-Header
- 13. Preflight request with HTTP OPTIONS 1. HTTP Request browser → CORS server: OPTIONS /hello HTTP/1.1 Host: http://bob.com Origin: http://alice.org Access-Control-Request-Method: PUT Access-Control-Request-Headers: Content-Type, Authorization 2. HTTP Response CORS server → browser: HTTP/1.1 200 OK Access-Control-Allow-Origin: http://alice.org Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: Content-Type, Authorization Access-Control-Expose-Headers: X-Custom-Header Access-Control-Allow-Credentials: true Access-Control-Max-Age: 3600
- 14. Handling CORS on the server side Servlets CORS Filter Cross-origin resources Java Web Server Incoming HTTP requests JSP Static files http://software.dzhuvinov.com/cors-filter.html You don't need to code anything, use existing CORS filters or modules
- 15. How to detect CORS support in the browser function browserSupportsCors() { if ("withCredentials" in new XMLHttpRequest()) return true; else if (typeof XDomainRequest == "object") return true; else return false; }
- 16. CORS support
- 17. Share cookies var xhr = new XMLHttpRequest(); var url = 'http://bar.other/resources/credentialed-content/'; xhr.open('GET', url, true); xhr.withCredentials = true; xhr.onreadystatechange = handler; xhr.send();
- 18. Thank you! Q + A?