CORS, CAS, AJAX, JavaScript and Browser issues explained

CORSandCAS.md

Summary

CORS or Cross Origin Resource Sharing is a way to allow cross domain requests to be serviced by the browser. It was implemented by browser vendors as a response to requests to let client side script make webservice calls across domains. Point to note is that it is the called webservice that has to allow CORS by adding appropriate headers to the response: Access-Control-Allow-Origin Access-Control-Allow-Headers Access-Control-Allow-Methods

Terms

1. CAS: Central Authentication Service - aka Single Sign on
2. CORS: Cross Origin Resource Sharing

Scenario

Sign-on process requires:

1. Client side script to POST credential data to a webservice/API hosted on a domain that is different from the page making the request. E.g. Page on ui.mydomain.com, service on api.mydomain.com
2. The result of the POST is a redirect that the browser needs to follow (HTTP 302)

What happens

Modern browsers (e.g. Chrome) set the Origin header to null as the detect sensitive information being sent in the redirect. See here When the webservice/API responds, the browser checks for Access-Control-Allow-Origin, (If present: Access-Control-Allow-Headers, Access-Control-Allow-Methods)

1. If there is no Access-Control-Allow-Origin header: The browser blocks and does not load the response as it infers this as cross origin request that is not allowed
2. If there is Access-Control-Allow-Origin header, but has a value other than "*", the browser still blocks as it sees that the allowed origin does not match with requested origin (null)

References

1. CAS and jQuery AJAX: stackoverflow
2. Fetch API: Blog