CORS for HTML5 Hybrid App

Question

I have read lot of things about CORS and how allowing Access-Control-Allow-Origin: * is security vulnerability to web server. But none of the article explained about how we can allow HTML5 hybrid application to access web services hosted on some domain which disallowed the wildcard char *

My question is: as far as my knowledge HTML5 hybrid app does not run on any specific domain that can we set as a whitelisted domain at the Access-Control-Allow-Origin lists. Then how we can still access the web service data from the hybrid APP request data through ajax call over web server which disallowing * under Access-Control-Allow-Origin tag?

Answer 1

When running on a device, your app will run in the browser, but will run from the local filesystem (from a location similar to file://path/to/index.html). Therefore, an origin does not exist. The browser will not do any preflight OPTIONS request, nor will it block calls to the API because of cross origin issues, simply because there is no origin.

For this reason, you can configure your server to only allow same origin requests, to keep things secure. Calls made from the device will still be allowed. However, when you run your app in the browser on your local dev machine (for testing purposes), you might run into CORS issues, because in this case there is an origin. You can solve this by allowing your local domain to access the API (remember to remove it in production), by using a browser plugin to disable CORS, or by using a proxy.