Search jQuery

jQuery Forum

AJAX/Same Origin / why does this solution fail?

in jQuery Mobile • 6 years ago

I code on a WAMP server and latest jQuery and jQuery Mobile app works fine when tested via latest Firefox, jquery, jquery mobile and with Apache/MySQL Zend serving content.

I thought I had a bright idea, it does not work and hoped someone might edukate me as to why it does not work like I expected.

My "bright idea": Instead of my jquery mobile app being served from my web server, I called it directly from the filesystem. Afterall, I expect to bundle it and stick it into an app store, and have it talk across the internet to my server. Hence why I separate the two for some testing.

My jQuery Mobile app which works just fine when called from the server, fails when called from the filesystem. In firefox, I get "NS_ERROR_DOM_BAD_URI: Access to restricted URI denied" which I believe is a security limitation enforcing same origin policy.

So...

If I am to wrap my code into an app (ie PhoneGap) I should expect the same security limitation from occuring, or no?

Has anyone walked this narrow path, and if so, how was it safely/cleanly resolved for you? How does your packaged jquery mobile app log on to a remote server using ajax for example?

All help appreciated...

Replies(1)

watusiware

Re: AJAX/Same Origin / why does this solution fail?

6 years ago

The filesystem directory from which you start it is considered the origin.

In addition to the problem you face above, some browsers won't let you traverse upward in the directory, either, so if you, for example, link with <data-ajax="false"> at a lower directory, now the browser won't let you navigate back up. That's because the document reload moved your origin down in the filesystem.

Different browsers act differently. In some/all cases, you can defeat the restriction with a hidden setting. You will have to research each browser. I know you can do it with Chrome. Safari (by default) does not complain about the upward traversal.

Some browsers aren't happy with Ajax from a filesystem.

PhoneGap proxies Ajax requests internally, so there is no problem. You can do Ajax to your site, even though the browser origin is the sandbox filesystem.

To clarify, the JQM Ajax page requests will (normally) go to the sandbox filesystem. If you do some additional Ajax to the net (maybe to use some API), or load some pages from your website, then PhoneGap takes care of that by proxying those requests. You need to configure PhoneGap with an XML file to say which site(s) you want to allow to go cross-origin. You can use * if you want.

I've only done one Phonegap project. I used a static site generator (Middleman). Really, I wouldn't do a PhoneGap project (or any other sort of static site) without using a SSG or some other similar workflow.

From the same source files, I create a website, webapp, and PhoneGap version of the project. It also gives you the power of using any kind of templates you want, so then it is easy, for example, to change the structure of all of your headers, without having to do some huge search-and-replace edit on potentially hundreds of files. (For appearance, of course, use CSS, but sometimes you want to change HTML structure...)

Then you can use tools like Sass too, and have it integrated into your build process. Since you can pick and choose from many template languages, you can use, for example MarkDown for text, and Slim for HTML, and even mix them int he same source file.

One of the things I do with Middleman, then, is to have it write appropriate link URLs for each type of product build. For PhoneGap, I forget if I use relative URLs, or absolute. For desktop test then I use file:// with absolute paths, and then there can be no problem.

Top Reply

Response title

Attachments

jQuery Forum

AJAX/Same Origin / why does this solution fail?

Replies(1)

Re: AJAX/Same Origin / why does this solution fail?

Statistics

Tags

Actions