PhoneGap external hosts wildcard - javascript

I'm using a js library inside a PhoneGap application for iPhone. I don't know what other external sites my js library contacts, so I need a way of whitelisting all connections, just for testing. How do I do that?
My app just silently fails, it doesn't continue from where the library is initiated.
(when I run the app in a browser it works perfectly)

Try setting the value of the ExternalHosts property in Phonegap.plist to *

i think you need to add the domain names to PhoneGap.plist file or Cordova.plist.
And your App is running fine in browser. So in Browser source-code you can check-out for the external links present in your code.
Which ever file you want to access/link through internet, that server domain you need to add in plist file. suppose i have added jquery like this
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
now i need to add code.jquery.com in PhoneGap.plist-> ExternalHosts array as string.

Related

Script tag is loading from file:/// instead of http://

I am working with a simple HTML test page. I am opening it with Chrome version 40.0.2214.115. In order to test the code, I am loading a js file from my workplace.
However, the file which I loaded tries to load other js files through script tags, but does not specify http:// . This causes an error in the console, as it defaults to the file:/// protocol and is unable to load file://the/restof/theurl.js
I downloaded the file locally, and loaded it from there, adding http:// to all url's, so it would ACTUALLY use the HTTP protocol.
This worked fine. However, those links load OTHER files that also do not specify http://
Is there any way I can have the browser imply http:// to unspecified script tags, and avoid downloading and editing EVERY file just to test a small HTML page?
I think the easiest way to prevent problems like this is to actually use a very small server (like something provided by node.js or the like or lighttpd).
Obviously your files are not supposed to be delivered via the plain file protocol, so you should just use a http server. That way you can be sure they work as intended and you don't have to fiddle around with your browser on a deeper level.
If you launch chrome with the below flags this should work. Obviously not possible for production environments, but for testing it should be okay.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
Consider using a simple local file server. If you are unsure how to, since you are developing in JavaScript, you can easily create a simple file server using Node.js which written in JS using simple middleware like node-static.

Angular facnybox not a function

I am trying to implement fancy box functionality. I've created a plunker and it works on plunker
Plunker but in my host I got
Error: $.fancybox is not a function .link/<#file:///C:/Users/h166622/Desktop/Angular/js/core/directives.js:99:6
How it could be?
It seems you are linking your stylesheets and some javascript with only "//domain.com/xxxxx". Doing it this way is great for production sites, or even sites configured locally with the use of virtual hosts. If you were to copy/paste the code and just open the .html file in your browser, it loads that file locally, thus links that do not specify a header (i.e. http or https) will try to find those links locally as well.
http: //cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css
http: //cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js
The use of // insted of http:// is what is known as protocol-relative URLs. This way, if a browser is viewing a page through an *HTTPS** protocol, the asset will also be loaded using an HTTPS protocol. Same applies to general HTTP protocols.
So unless you configure a virtual host to do local site development, I would change those links. Another thing to note, is that your application is linked to app.js linking to a local file when viewing a .html file is usually fine so long as both exist within the same directory. Otherwise, you'll need to include and edit your application javascript through the use of inline <script type="text/javascript"> ... </script> tag.

Cloudflare - PHP and Javascript Includes not Working

Since implementing Cloudflare some of my includes aren't working.
One specific example: Inside the includes folder, I have a sub folder "texter". Here I have a php page that references a Javascript library in the same folder. The page receives a GET request with variables, then parses on the parameters to an external 3rd party API.
When Cloudflare is disabled/paused the mini app works.
I'm using Page Rules to disable Cloudflare activity for my includes folder but it's still not working.
e.g. Pattern: *mysite.com/includes/* - With all rules and chache set to disabled.
How can I get my web app running while Cloudflare is also running? Am I on the right track? Thanks in advance.
Edit: I'm using htaccess to limit direct access to these directories... could this cause an issue?
Hmmm...this goes away with us paused? Do you have something like Rocket Loader turned on in your performance settings (can potentially impact jQuery or JavaScript).
Do any error messages appear at all?

Trick a browser into loading <script> or <link rel="stylesheet"> URLs from local setup/server?

I'm debugging a CSS/JS problem on a live website, and in this situation it is unfeasible to clone the entire production system onto a local machine to fiddle with 2 lines of code.
I would LOVE it if there were a simple way to trick a browser (FF, Chrome, anything - I'm not fussy) into loading the live site but redirecting certain internal URLs to a local webserver. Any ideas?
eg. I want to load the entire live website, except one specific Javascript file. The attempt to access http://...production.../js/map.js should be rerouted to http://localhost/debug/js/map.js, which I can edit locally until the problem is fixed.
Edit re-read your issue, if you aren't happy to find/edit the SQL database for the file in question, you could always just add an adblock rule against it, and manually run your own script from console/greasemonkey it in.
Answer to question in the title:
HTML5 has a feature called an "application cache" just for this. It involves adding a manifest attribute to your <html> tag.
<html manifest="what_to_cache.appcache">
Then in what_to_cache.appcache,
CACHE MANIFEST
http://...production.../js/map.js
Future requests of items listed in the manifest will thereafter be loaded from the cache, if available, even if the user is offline. The file is stored in an SQL database for that website, so you can thereafter edit the database.
You can do this with fiddler.
Use the AutoResponder to intercept URLs and return content from local file or different server.
http://fiddler2.com/
I have found a Chrome extension which, despite its bugs, achieves precisely this behaviour. DevTools Redirect: https://chrome.google.com/webstore/detail/devtools-redirect/jmhdebkkippcccflcoddckhjjfgnfhnp
This allows developers to specify JS or CSS files to redirect, and a new URL to grab them from (eg. http://localhost/.../debug.js).
For future readers I would like to answer this question. Have a look at
Requestly - A Chrome Extension to modify Network Requests.
You can setup a Redirect Rule Request following these steps:
Select Redirect Request Rule Type
Create a new Redirect Rule
Disclaimer: I have created this So you can blame me if you do not find this helpful :)

PhoneGap on iPhone wont load external scripts

I am currently writing a simple application using PhoneGap (iOS) and running it in the simulator. The problem is that external URLs seem to refuse to load. For example using a CDN for jQuery
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.7.min.js"></script>
Will not make $/jQuery available. The same problem is happening for weinre when trying to use it. Is there something I need to change to enable this to work?
Have you added the domains of the external links to the ExternalHosts entry in PhoneGap.plist ?
There is a fairly new whitelisting system in PhoneGap that is causing a bit of confusion with external links
From - http://wiki.phonegap.com/ :
"Also, the latest code has the new white-list feature. If you are referencing external hosts, you will have to add the host in PhoneGap.plist under the "ExternalHosts" key. Wildcards are ok. So if you are connecting to "http://phonegap.com", you have to add "phonegap.com" to the list (or use the wildcard "*.phonegap.com" which will match subdomains as well)."

Categories

Resources