Monday, November 26, 2012

One week in Web Architecture (CORS, Reverse, Proxy, XMLHTTPRequest...)

Last week, I have done lots of testing of Web Architecture.
One colleague contacted me with an interesting idea:
- Deploying a Cloud Web infrastructure which allows an end-user, in a corporate network (LAN) to have access to local infrastructure.
I already posted some frustrations around Web development related to that architecture, but I have processed, and I would like to share with you some feedback.
I have made the most of two technologies to build my environment:

- HTTP Reverse Proxy
- CORS (Cross-Origin Resource Sharing)

CORS is a W3C spec that allows cross-domain communication from the browser. Indeed, my cloud server, located on a different domain, is considered to be cross-origin requests and by default are prohibited by user agent.

HTTP Reverse Proxy is useful, because my REST server doesn't support CORS, so I had to find a way to add CORS headers in the HTTP request.

Configuration of my Reverse proxy:

Header set Access-Control-Allow-Origin: "[Cloud Server hostname]"
Header set Access-Control-Allow-Methods: "POST,GET,OPTIONS,PUT,DELETE"
Header set Access-Control-Allow-Credentials: "true"
Header set Access-Control-Allow-Headers: "Origin,Content-Type,Accept,Authorization, X-Authorization"
ProxyPass /api  https://[Test Server Hostname]/api
ProxyPassReverse  /api  https://[Test Server Hostname]/api

I'm using a basic authentication for all my HTTP Request (GET, POST). And standard CORS requests do not send or set any cookies by default. In order to include cookies as part of the request, you need to set the XmlHttpRequest’s .withCredentials property to true. One element to take into acount: Do not set "Header set Access-Control-Allow-Origin" to * when you use authentication. It doesn't work...

At the end, that architecture works in most cases. It works with Internet Explorer 8, 9, Chrome and Safari. But, it doesn’t work on FF, due to the fact that Firefox requires OPTIONS request to be unauthenticated when cross-domain requests are used. I didn’t found a workaround, so if someone has an idea.
On IE, you need to adapt the security configuration. IE ignores Access-Control-Allow headers and by default prohibits cross-origin requests for Internet Zone. To enable cross-origin access go to Tools->Internet Options->Security tab, click on “Custom Level” button. Find the Miscellaneous -> Access data sources across domains setting and select “Enable” option.

And to conclude, let me share some interesting links that help me in my investigation: