I am using the INLINE_RUNTIME_CHUNK=false variable in my create-react-app build and it's setting a CSP directive at build time (building on Heroku) for img-src of 'self' data:. I need to modify this to host profile pics coming in from the IDP i'm using, so that img-src directive needs to be changed.
How can I change this as part of the build process? Or should I override the whole CSP string with a meta tag in index.html? Is there a way to configure this on the build step as part of the heroku-postinstall command?
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 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.
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>