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

I have build a lot of hybrid apps using phonegap, jquery and ajax. You can set your CORS in php files or in .htaccess files as follow and it will work.

For .htaccess file use this

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Alternatively, you can integrate the code below at very first top of all .php files to be access via cross domain. Just know that symbol * makes all domain accessible as well

<?php
header('Access-Control-Allow-Origin: *');  
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
?>

Answer 2

Sorry for being late. Okay either of the code below will do it for you. give me a shout if you are still having issues Thanks

in .htaccess file

Header set Access-Control-Allow-Origin: http://yourdomain-you-are-connecting-from.com


or in php



header("Access-Control-Allow-Origin: http://yourdomain-you-are-connecting-from.com");

Answer 3

Ok, your app is a static one right. its not hosted online right. your app is not making any ajax, jquery or json call to the server right. the app is not making any database call to a remote server right. if your app is not making any call to any of the above remotely then there is no need to be bothered about cross domain.

Okay am asking you another question? when you click a url link in your app, does it work by taking you to the intended page. what happened.

Answer 4

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.