CORS

What is CORS?
What is happening behind the scenes?
Best practices to configure various CORS headers

Transcript

5. • • •
6. ➢ ➢ • • • •
7. • • •
9. A request is a same-origin request when the client origin and the server origin are exactly the same. Otherwise the request is a cross-origin request.
11. While very, very ancient browsers do not support making requests across different origins, in the current interconnected day and age, all modern browsers have support for Cross Origin requests. This makes it all the more important that we pay attention to how we handle requests coming in to Zoomcar outside of our domains.
12. ◦ Accept Accept-Language Width Content-Language Content-Type DPR Content-Language Save-Data Viewport-Width The only allowed values for the Content-Type header are: application/x-www-form-urlencoded, multipart/form-data, text/plain
13. Cache-Control Content-Language Content-Length Content-Type Expires Last-Modified Pragma Access-Control-Expose-Headers
15. • • GET /api/posts HTTP/1.1 User-Agent: Chrome Host: 127.0.0.1:9999 Accept: */* Origin: http://localhost:8080 HTTP/1.1 200 OK Access-Control-Allow-Origin: *
16. • Origin header is always present on cross-origin requests • Value of the Access-Control-Allow-Origin header can be either a wildcard or an origin value • Access-Control-Allow-Origin: * • Access-Control-Allow-Origin: http://localhost:8080 • * header doesn’t necessarily mean that it’s publicly accessible. There may be additional forms of authentication on the resource
17. • Access-Control-Allow-Origin • Access-Control-Allow-Origin ◦
19. • The browser sends a preflight request to ask the server for permission to make the actual request when using non simple methods or adding custom headers • protects servers from receiving unexpected requests. • takes the form of an HTTP OPTIONS method with an Origin and Access-Control-Request-Method header. • The server can grant permissions to use certain HTTP methods by using the Access-Control-Allow-Methods header. The server can also grant permission to use certain HTTP headers by using the Access-Control-Allow-Headers header. • The preflight result cache is a performance optimization that helps reduce the number of preflight requests made to a particular endpoint.
20. • The Access-Control-Allow-Credentials header can be used in conjunction with withCredentials property to include cookies on cross-origin requests. • The Access-Control-Expose-Headers header can be used to expose response headers to the client.
21. fetch( ‘https://www.zoomcar.com/sensitiveAPI’, { method: ‘POST’, // is GET if not specified headers: { ‘someCustomHeader’: ‘secretValue’, }, body: ‘Request Data’, } ) .then(response => response.json()) .then(parsedResponse => { if (data.status === ‘ok’) { // Success handler } }) .catch(error => { //Error handler }) let xhr = new XMLHttpRequest(); // XDomainRequest for IE8/9 if (!(‘withCredentials’ in xhr)) { alert(‘Browser does not support CORS.’); return; } xhr.open(‘POST’, ‘https://www.zoomcar.com/sensitiveAPI’ ); // Custom headers not supported in XDomainRequest xhr.setRequestHeader( ‘someCustomHeader’ , ‘secretValue’); xhr.onload = function() { var data = JSON.parse(xhr.responseText); if (data.status == ‘ok’) { // Success handler } else { // Error handler } }; xhr.send( ‘Request Data’ );
23. • ◦ ◦ • ◦ true ◦ ◦ • ◦ ◦ HTTP ◦ HEAD OPTIONS GET POST PUT PATCH DELETE
24. • ◦ ◦ HTTP ◦ • ◦ ◦ ◦ maxAge • ◦ ◦
25. only indicate which clients are allowed to make cross-origin requests. It shouldn’t also be used to protect a site’s content