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
Related
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?
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.
We have an app using Phonegap 3.6.3 and built with Phonegap build.
As part of this app, we need to download a file onto the device of the user. The file might be a .pdf, an image or any binary file.
We hope to download the file with a blob:file link in the app, and not use a plugin such as file-transfer.
The file is converted from Base64 data and a Blob object is created.
An objectURL is generated through window.URL.createObjectURL() and this is added to the href attribute of an a element.
The DOM contains the following
On desktop, this works without problems, but in the app packaged with cordova 3.6.3 it just fails silently.
I suspect it's related to whitelist functionality in cordova.
In the question https://stackoverflow.com/a/31945728/250787 others have solved the same problem with the cordova-plugin-whitelist.
Unfortunately, this plugin is only for cordova 4.0+
I've tried using the access origin element, but none of the statements appears to have an effect
<access origin="blob:*" launch-external="yes" />
<access origin="blob:*"/>
I already have a access origin to limit traffic to the main backend system of the app
<access origin="https://mobilbackend.mycompany.com/*"/>
How can this be solved?
Okay. blob: requires special additions to the whitelist system, of which you seem to have an incomplete understanding _OR_ are using outdated documentation. I can tell because launch-external="yes" has been removed from use.
You will need to use both the whitelist plugin and add a <meta (...) /> entry into the header of our .html pages.
You need to implement the cordova-plugin-whitelist.
This whitelist worksheet should help.
HOW TO apply the Cordova/Phonegap the whitelist system
NOTE DOING THIS WILL MAKE YOUR APP INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add this to your config.xml
<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add the following to your index.html and every .html page.
<meta http-equiv="Content-Security-Policy"
content="default-src * blob:;
style-src * 'self' 'unsafe-inline' 'unsafe-eval';
script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
I have added blob: into the CSP definition. However, this just opens up the app to allow the blob: URL. It is still not clear to me what you mean when you say "download the file", as blob: is not transport protocol. It is only intended to define a type of file.
I also recommend reading this whitelist worksheet, make sure to read 9. CSP (Content Security Policy)
Lastly, if you want to continue this discussion, please continue on Google Groups
So I created a solution that saves the blob and then opens it with the system viewer.
If you want it to be saved in a different location see: here.
By choosing this location you can have it download straight to the desired location.
If you open the file with the system viewer then there is often an option for the user to save the file.
// previously blob is defined as file,
//and file name is saved in data.FileName
var savedFile;
window.resolveLocalFileSystemURL( cordova.file.cacheDirectory, function( dir ) {
dir.getFile( data.FileName, { create:true }, function( file_ ) {
savedFile = file_;
saveFile();
});
});
function saveFile(str) {
if( !savedFile ) return;
savedFile.createWriter(function(fileWriter) {
fileWriter.write( file );
cordova.plugins.disusered.open( savedFile.nativeURL );
console.log( "file " + savedFile.nativeURL + " opened" );
}, function( e ){
throw( 'createWriter Error error' + JSON.stringify( e ) );
});
}
This uses the plugins of:
cordova plugin add cordova-plugin-file --save
cordova plugin add cordova-open --save
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