Run phonegap app on chrome with Cross Domain Pages - javascript

I'm developing a phonegap app for android and I need to be able to run the app on chrome. My app doesn't have any phone functionality yet. Is all Javascript, HTML and CSS.
The problem is I'm fetching some info of my server but I'm having trouble debbuging the javascript, so I wanted to test te app on the browser so I can use the developer tools, but the ajax call wont work on Chrome (It does on the phone).
Any ideas?

You need to run Chrome with the flag --disable-web-security. You can either run chrome.exe --disable-web-security from the command line (in the appropriate directory) or edit the shortcut and add it. (Assuming you're on Windows)

If running in chrome is for testing only, jprofit's solution should be good enough. However, if users need to run it, they won't start chrome with those options :) In that case, you have two solutions
Use JSONP ans script tags (this could be a lot of work and error handling is poor)
Route your calls through a proxy on the local server http://developer.yahoo.com/javascript/howto-proxy.html, http://www.daniweb.com/web-development/php/code/216729

The simplest solution for me has been to use a proxy (as #juan-mendes suggests).
I use a tiny NodeJS server called Sleight, which runs locally ( http://phonegap.com/2010/01/20/introducing-sleight/ ).

Related

webcam permission request doesnt work with local files

When experimenting some things with WebRTC. I looked at some examples and downloaded one from github. This wasn't working at all. At the right side of the url, there was an icon that indicated that my webcam was blocked. I clicked on it and said that it could use my webcam. Then chrome said to reload the page so i did that. And everything was the same as in the beginning. But when I loaded the same site through jsfiddle, it asked me with a pop-up for webcam access (the same way as every other application does) and that worked without a flaw. I tested some other browsers and it was all the same. Does anyone have a suggestion how to solve this problem? Thank you!
In order to use the web cam API, the file must be run from a server. When tyou run it from JSFiddle, it runs on a server, and thus works. It wont work if you run it as a file:/// in your browser, you must run a local web server on your computer and open the web app from there as http://
Running a server
Well running a webserver could be very complex, and requires knoweldege in using softwares like apache or ISS. Luckily enough, for develpers just seeking a simple, straight forward webserver for client side development, there are a couple of easy solutions:
Windows: use a software called WAMP - it automaticaly runs apache on your machiene and creates a folder on your computer in which you can put all the website content. http://www.wampserver.com/en/
Mac: simillar to WAMP, mac has a piece of software called XAMP that does pretty much the same thing. http://www.apachefriends.org/en/xampp.html
Both are pretty simple, but I think will be enough for simple front end development.
Chrome blocked my webcam on a site where I denied access multiple times (because I was testing).
You might need to visit chrome://settings/contentExceptions#media-stream and clear your settings.

able to run my backbone js project on localhost,not able to run locally in chrome browser

I am able to run my backbone js project on localhost, but when i run index.html page directly it is giving access-control-allow-origin error only in chrome browser, in firefox it is working fine in both the cases.
I assume that you have ajax requests to sync the Backbone Models with the server, and when you say "on localhost" you mean "with a server running on my localhost and my browser connects to 127.0.0.1:<someport>", and when you say, "run index.html directly" you mean "launch it in the browser as file://path/to/index.html, correct?
If I recall correctly, Chrome does not allow you to access file: URLs via ajax as if they were network requests. Firefox did that for some release (cannot recall which at the moment), but there was pushback, it was made an option, then they reenabled it (based on my recollection).
Just run it with a server locally, using nodejs or thin or whatever language your server is written in.

Problems with Chrome path

I am using jquery and running a html file on my local machine (no server).
The following works on firefox but not on chrome:
$('#result').load('test.html');
It seem to be something wrong with the path.
Anyone know how to sort this out without having to add an absolute path please?
Thanks
Ajax requests cannot be sent cross-domain. On your local machine, every request is cross-domain to the browser, so no Ajax can be used at all. Chrome is a bit more strict than Firefox here. There is no solution, you will just have to upload it to a web server or install something like Apache on your local machine for testing purposes.
Typically, AJAX requests cannot be sent cross-domain, however, if you're just looking to access a local file, you could try enabling one of Chrome's secret flags. Specifically:
--allow-file-access-from-files
With any luck, you should be able to get things working by changing your chrome shortcut to the following:
chrome.exe --allow-file-access-from-files
I'm not sure if that flag is enabled in all builds of Chrome (I am presently running chromium 10), but it definitely works: I've been using it to enable file-save access in TiddlyWiki.

How to force Chrome/Firefox/Opera to do crossdomain requests from localhost?

Hy,
So I've got this problem: I'm trying to develop an HTML file on my localhost, and all the browsers I have installed are preventing me to send cross-domain requests.
What I'm trying to do is to convert a script I wrote in Python (with Mechanize, pyquery and lxml) to Javascript, the reasons don't really matter (I thought in Javascript it would be easier to simulate something).
Cross-domain requests from local files used to work, and are still working on the latest Safari (stable), but I can't install Safari on this machine (it's a Linux box).
EDIT
I discovered the escalated privileges of Firefox, e.g.:
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
// among others
Problem is, I'm also trying to access the content loaded in an iFrame ... as I said, I'm trying to simulate a browser session, like I would with a library like Mechanize, but from Javascript. My script still works in Safari.
So how to force Chrome / Firefox / Opera to bypass all security restrictions from locally stored files?
I'm interested in a browser command-line option, I would even consider a patch to the browser (I'm the user, not trying to distribute this to anyone else).
Thanks,
I'm unsure whether or not you have control of the content in the IFrames but since you are speaking of local files I guess you do. This article on Ajaxian should cover your use case.
Since you are targeting grade A browsers (e.i. not IE) you could use html5 window.postMessage instead of IFrames.
Cheers, Jon.
I have no working knowledge of Python Mechanize lib.
Why don't you start a simple http server instead to solve your problem?
import sys
import BaseHTTPServer
from SimpleHTTPServer import SimpleHTTPRequestHandler
HandlerClass = SimpleHTTPRequestHandler
ServerClass = BaseHTTPServer.HTTPServer
Protocol = "HTTP/1.0"
if sys.argv[1:]:
port = int(sys.argv[1])
else:
port = 8000
server_address = ('127.0.0.1', port)
HandlerClass.protocol_version = Protocol
httpd = ServerClass(server_address, HandlerClass)
sa = httpd.socket.getsockname()
print "Serving HTTP on", sa[0], "port", sa[1], "..."
httpd.serve_forever()
This python code will start a simple http server listening on port 8000 or the first argument and handles all files in the folder from this script.
I'm not sure if this works when the page is on localhost, but it might be worth a try: http://www.asual.com/jquery/address/
That jQuery plugin lets you make cross-domain requests from any domain... Perhaps it might work with localhost? Haven't tested it though.

Can I disable SOP (Same Origin Policy) on any browser for development?

I want to develop JavaScript on my Windows machine. Do you know a browser where I can turn off Same Origin Policy so I can develop locally? Firefox would be optimal.
Or if you know a proxy I could use for a SOAP/WSDL site it would be great too.
I am trying to work with the JavaSCript SOAP Client.
UPDATE 6/2012: This used to work at the time of the writing, but obviously no more. Sorry.
In Firefox (might apply to other Gecko-based browsers as well) you can use the following JavaScript snippet to allow cross-domain calls:
if (navigator.userAgent.indexOf("Firefox") != -1) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
}
catch (e) {
alert("Permission UniversalBrowserRead denied -- not running Mozilla?");
}
}
It looks like there's an issue created in the Chromium issue tracker for achieving the same functionality, so you could try starting Chrome with the argument --disable-web-security. I don't know which builds this works on exactly, but at least Nokia's WRT Tools comes with a Chrome installation that does in fact allow loading content from other sites.
Unfortunately, using the following:
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
has been disabled in Firefox 5.
https://bugzilla.mozilla.org/show_bug.cgi?id=667312
Make a page on your local server that calls the remote server and answer the same as the remote server.
Example, javascript calls local server for a JSON. The local server makes the call to the remote server for that JSON. The local server receives the JSON from the remote server and send it to the javascript.
Using the Chromium 13.07, you can start it with security disabled:
/usr/bin/chromium-browser --disable-web-security
That's on Ubuntu 11, but change the location as your system.
All of the given answers are good ones when it comes to getting around the same origin policy in production.
For development, there is no convenient way to "disable" this security check. There are workarounds (see other answers) or hacks (you could use Greasemonkey to wrap up the JavaScript and use their GM_xmlhttprequest as a temporary measure), but no way to actually "turn it off" as you describe.
i run this command on mac, it works on me when i use google chrome to run my project.
open -a Google\ Chrome --args --disable-web-security --user-data-dir
I have no real experience with this, but FireFox 3.5 allows Cross-Site JS according to the W3C Cross-Origin Resource Sharing Draft.
See: https://developer.mozilla.org/En/HTTP_access_control
Firefox would be optimal.
If you can live with Internet Explorer, you may be able to use an .hta application
http://msdn.microsoft.com/en-us/library/ms536496(VS.85).aspx
(This is one of the ways the Selenium test automation tool deals with the issue)
In Chrome (& Chromium) 48 and above you should add the flag --user-data-dir like this:
chromium-browser --disable-web-security --user-data-dir
And it works.
You can also redirect a local port to the remote server and port via ssh.

Categories