I have an AngularJS webapp. I want to port it to Ionic to create hybrid app. I have figured out that I need to put all my code in www folder after creating an Ionic app and need to include cordova.js to my scripts along with meta Content-Security-Policy.
I am able to see my homepage when I start the server using "ionic serve" command but the problem is that it is trying to fire REST call on localhost:8100 but my server is running on localhost:8080.
How do I tell the app to fire call to localhost:8080? Also what about the CORS? Will it get resolved by meta Content-Security-Policy?
Any step by step tutorial will be of a great help.
Thanks
For CORS include this in your index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
To Know more about whitelist plugin refer nicRobay blog and in your chrome add this extenstion.
Usually on give ionic serve command the terminal itself asks which port to use commonly you can use localhost:8080 if you get that an option.
To include the corodova refer `this' and add this line.
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
or you can use bower to install cordova.
I think I went in wrong direction and asked this question. In mobile app to make a rest call the host should be hardcoded or in someway hostname should be provided by the user.
The same webapp can't be ported to hybrid app as it is because relative urls need to be changed to absolute url.
Related
I've got reactJs app which is deployed both as web and mobile app.
Mobile app is based on Cordova (ver 7.1.0).
Everything works fine except local resources (ones located in www/subdirs) are not found, despite they are there.
What is even more strange, some resources e.g. fonts are found, some- were found before (i18n files), but all of a sudden disappeared. Moreover, hardcoded in html images are found as well:
<img src='images/foo.png'/>
but exactly the same code being dynamically added with reactjs fails to reach the image.
Those resources which were found get resolved to proper url: file:///android_asset/www/subdir/resource.png
Those which are not- resolved to wrong path: file://subdir/resource.png
i tried both leading slash, no leading slash, setting html base tag- nothing
Does anybody have any idea what am i doing wrong?
thank you in advance
UPDATE:
here's security policy:
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; connect-src *; style-src 'self' 'unsafe-inline'; media-src *">
Silly me! the browser worked like a charm and resolved all the resources exactly as it's supposed to. The problem was caused by react router which upon app load changed location from host/context/section to host/section so all resources which had to be loaded after that were resolved to incorrect path: host/section/resource instead of host/context/resource.
The solution is either fix initial location switch or add tab to the header
Now I'm trying to make login call to express rest API with passport Basic Strategy, and on browser everything working fine but from device from Phonegap it's not working. I tried to remove and add cordova-plugin-whitelist plugin. Added following tag to config.xml <allow-navigation href="http://*/*" />. And added to index.html <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> I made cors setup. But it didn't help. Also I found out that my requests contains "/proxy/" inside of call.
Here is example: http://192.168.1.189:3000/proxy/http%3A%2F%2F127.0.0.1%3A8080%2Fapi%2Fauth%2Flogin
is it ok? And here is what I'm getting from server:
Thanks in advance.
I spent some time for search and I found a solution:
In my ionic app.js file I just changed the following line:
const BASE_URL = 'http://127.0.0.1:8080/api';
to:
const BASE_URL = 'http://192.168.1.102:8080/api';
and it works for me.
I have this code.
<ion-item ng-repeat='item in videos' class="item-thumbnail-left item-text-wrap">
<img scr="http://placehold.it/80x80">
</ion-item>
I am trying to load an image from placehost.it but it is not loading the image.
I have added
<access origin="*" />
the above code to my config.xml file. But it is still not loading when I open it on chrome. I have also enabled COR. What shall I do?
Whitelisting the domains using cordova-plugin-whitelist solves the issue.
Add the plugin via CLI:
cordova plugin add cordova-plugin-whitelist
and then add the following line of code to your app's config.xml:
<allow-navigation href="http://*/*" />
and
this meta tag in your index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
EDIT: The reason for this issue:
From Cordova 4.0.0 for Android's update:
Whitelist functionality is revamped
You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist
Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)
Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are
using CSP.
This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate
plugin (not recommended).
Note: while not strictly part of this release, the latest default app
created by cordova-cli will include this plugin by default.
try to use ng-src becaue you are importing from website, not locally.
Cheers
Everything were going well last week and while i was running the application on device or emulating with Genymotion, all the calls to the api were working (Either returning the data or failing but at least showing something).
I was using
ionic run android
I add to update the global cordova ionic:
npm install -g cordova ionic
Since that all the $http requests are not even processing. I can't get any responses while the Api is still working fine and the CORS are perfectly set.
The only way i found is to use the option --livereload or -l :
ionic run -l android
I want to avoid using the livereload at any cost.
I started to create a project from scratch using ionic 1.0.0 and cordova lib 4.3.0.
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $http) {
alert('calling api');
// Create an anonymous access_token
$http
.get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret+'&grant_type=client_credentials')
.then(function(response){
alert(response.data.access_token);
});
})
So while using :
ionic serve
It is correctly alerting 'calling api' then the response (An OAuth access token for that example).
But while using :
ionic run android
It is only alerting 'calling api' but doesn't seem to process the http request.
Did anyone experience something similar? I'm getting big headaches on that.
With the update of Cordova 4.0.0, you will face an issue of not being able to make HTTP calls to RESTful APIs and load external resources, which include other HTMLs/video/audio/images.
Whitelisting the domains using cordova-plugin-whitelist solves the issue.
remove whitelist plugin if already installed:
cordova plugin remove cordova-plugin-whitelist
Add the whitelist plugin via CLI:
cordova plugin add cordova-plugin-whitelist
and then add the following line of code to your app's config.xml which is located in your application's root directory:
Reccomended in the documentation:
<allow-navigation href="http://example.com/*" />
or:
<allow-navigation href="http://*/*" />
and
this meta tag in your index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
The reason for this issue:
From Cordova 4.0.0 for Android's update:
Whitelist functionality is revamped
You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist
Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)
Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are
using CSP.
This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate
plugin (not recommended).
Note: while not strictly part of this release, the latest default app
created by cordova-cli will include this plugin by default.
It worked for me, when I tried the following…
In Config.xml, allow access & navigations to your domains:
<access origin="http://yourdomain1.com" />
<allow-navigation href="http://yourdomain1.com"/>
Then in index.html, add the Content-Security-Policy as below:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://yourdomain1.com data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *; script-src 'self' 'unsafe-eval' 'unsafe-inline';">
I faced the same issue with ionic app. In my case, the android app was running fine on my mobile but it was not making the http calls on other team members mobile.
After debugging the device using chrome://inspect#devices. I came to know the exact error.
During the HTTP call, the app was giving ERR_CLEARTEXT_NOT_PERMITTED error.
I used below link to allow sending the data in clear text format in AndroidManifest.xml file in my playpen.
https://forum.ionicframework.com/t/err-cleartext-not-permitted-in-debug-app-on-android/164101
If you are sending http request to a non https url, Then Make sure you have added
android:usesCleartextTraffic="true"
in AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application
...
android:usesCleartextTraffic="true"
...>
...
</application>
</manifest>
For alternative options check this answer
This is a network security related issue. To fix this, replace resource/android/xml/network_security_config.xml
With,
<?xml version="1.0" encoding="utf-8" ?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
<domain-config cleartextTrafficPermitted="true">
<domain>api.mydomain.in</domain>
</domain-config>
</network-security-config>
Initially I have used btford socket.io library for my ionic project, but I am having trouble working with it. Now I am trying to install socket.io directly to an ionic project. However I am not sure whether it should installed as an npm install which will store it in the node_modules folder, or should i store the library in ionicprj/www/lib ?
cordova-plugin-whitelist seems to be "mandatory" at present.
install it
cordova plugin add cordova-plugin-whitelist
configure config.xml
You can keep your current setup with * or change for more restrictive rules
add a html policy on index.html, you shall add a Policy also. To authorise everything, here it is :
<meta http-equiv="Content-Security-Policy" content="default-src *;
style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe eval'">
socket.io client library should go in www/lib/ to emit events from the ionic app. On the server you'll want socket.io as an npm module.
There's a helpful tutorial here: http://www.htmlxprs.com/post/6/creating-a-realtime-image-sharing-app-with-ionic-and-socketio-tutorial