Load socket.io with cordova android build - android

I have a small chat app project that I created with node.js, express and socket.io. And installed those modules with npm. App is working on the desktops as expected. I'm trying to built the android version of the app with cordova. And when i run cordova run android it opens the app on my phone and load the main ui with no problem and however it really doesn't work (functions) and I get this error in Chrome developer console remote devices, when i add socket.io js file like this in index.html
<script src="/socket.io/socket.io.js"></script>
socket.io.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
Since app is running on port 3000 on localhost then I tried add the socket.io js script like this in the index.html
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
And then this error occurs
Refused to load the script 'http://localhost:3000/socket.io/socket.io.js' because it violates the following Content Security Policy directive: "script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'".
This is the Content-Security-Policy meta tag
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />

If you want to import the socket.io file from the app storage remove the first slash and ensure that the file are present inside the www folder.
For android check in platforms/android/app/src/main/assets/www the content of that folder is the content of your app. Check there if your socket.io file is present and with the correct path.

Related

Monaca (cordova) compiled Android app is unable to make AJAX requests

All ajax requests are getting executed properly when I use the monaca debugger app of either ios or android. They are also working fine with the ios app compiled using monaca build.
However the android app (compiled using monaca build) is just not able to make ajax requests (something like a CORS error).
I have the following
<access origin="*"/>
<allow-navigation href="*"/>
lines in the config.xml file
and
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
in my index.html file
Can anyone suggest a fix for this pls?

Cordova XHR requests failing by prefixing url with file:///

My app is working just fine after cordova run browser, but it cannot connect to my backend server when deployed to iOS using cordova run ios (local resources load properly).
Debugger tells me the problem may be that it prefixes all XHR requests to backend server with file:///var, so that instead of http://my-backend.com/rest It tries to connect to file:///varhttp://my-backend.com/rest.
I have whitelist plugin installed, <access origin="*" /> in my config and this line in index.html when deploying to iOS:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; content-src *">
If it's important, on front end I use Angular with ngCordova and Restangular plugin for handling AJAX requests. I use Cordova 6.2.0.
So the question is, how do I get rid of this file:///var prefix?
EDIT:
As it turns out, there's a similar error on Android device, but the prefix is file:///android_asset
EDIT 2:
My AJAX calls are made with Restangular. I have default url set like this:
RestangularProvider.setBaseUrl("http://my-backend.com"), and example call looks like this: Restangular.one('session/check').get()

Cordova and ajax not found rest service

Do you know why when you place the application on the mobile device and try to download JSON, jquery mobile (ajax) returns me the error 404, and if the same device in browser (chrome) json response is visible?
Does the application in Cordova can block access to the services of rest?
Cordova: 6.1.0
Android-cordova: 5.1.1
Device: Nexus
Service: GET
Because the whitelist blocks external calls on default
add this plugin, if is not added yet
https://github.com/apache/cordova-plugin-whitelist
And add this meta tag to your html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"/>

ajax response not working after android apk build from build.phonegap.com server

I have called ajax into my cordova phonegap android project.ajax response come from external url. When build apk from eclipse,it working fine but after upload the project zip to build.phonegap.com server and generate apk.this apk not give ajax response. I have add ' and
' into my config.xml page where ajax response come from http://example.com/subdomain.
You will likely need to set an appropriate Content-Security-Policy meta tag in the head of your index.html. It is likely that your local Cordova/Phonegap version with Eclipse is older than the one on PhoneGap Build, and doesn't require this.
Cordova 5 and newer require the Content-Security-Policy meta tag, and by default don't allow external Ajax requests.
You will need to configure your connect-src clause to allow * (all servers) or list out those you want to connect to.
Example:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://myserver.mydomain.com">
Changing myserver.mydomain.com for * (for all servers) or a space separated list of URLs if you want to limit where your app can go get data from.
There's a blog post here that helps explain this in detail.

cordova-plugin-whitelist working on Android but not iOS (Phonegap Build)

I'm working on a JavaScript app wrapped in Cordova and built with Phonegap Build. We're including cordova-plugin-whitelist from npm in our build and have added <access origin="*" /> to our config.xml and an open CSP (<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">) in our index.html. The app works fine on Android and talks to our server without issues, but on iOS all requests fail immediately as if the whitelist plugin isn't letting traffic through.
I've tried a number of different build configurations in case something broke in a particular version of Cordova, but haven't been able to get this to work at all. I've had a similar issue with other Phonegap/Cordova apps in the past but was able to solve it with the whitelist plugin/CSP/access rule.
This issue has also been difficult to debug since the Safari Developer Tools won't connect to the iOS device and I'm having to alert the responses I'm seeing. It looks like the response coming back has a status code 0 and an empty body, which I'm assuming just means unreachable.
You may well need to set the connect-src in your Content-Security-Policy, for example:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://YOUR_HOST">
Additionally for Xcode 7 / iOS 9 you will need to adjust the ATS settings to allow connections to non https backends if you aren't using SSL:
Here's a working example of the change to your app's info .plist:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
(Note you can also configure this to selectively allow non https connections).
And here's a script you could use as a pre build hook for iOS to do this automatically:
#!/bin/bash
echo "Adjusting plist for App Transport Security exception."
val=$(/usr/libexec/plistbuddy -c "add NSAppTransportSecurity:NSAllowsArbitraryLoads bool true" platforms/ios/PROJECTNAME/PROJECTNAME-Info.plist 2>/dev/null) echo "Done"
Just swap out PROJECTNAME for the name of your project.
Change your access tag to:
<access origin="https://yourdomain.com" requires-certificate-transparency='false' allows-arbitrary-loads-in-web-content='true'/>
It will update the Info.Plist file accordingly in the NsAppTransportSecurity entry.
Source: https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/#ios-whitelisting

Categories

Resources