Not allowed to load local resource

[RazaGR]

Not able to get the image to work, receive below error in chrome debug: Not allowed to load local resource : content://com.android.contacts/contacts/8/photo

also tried application here but no success, https://github.com/janpio/ionic-native-contacts

also noticed someone had same issue but got resolved by removing the webview plugin, But I require that plugin https://github.com/apache/cordova-plugin-contacts/issues/165

code:

   getContacts() {
    this.contacts.find(
      ["displayName", "phoneNumbers","photos"],
      {multiple: true, hasPhoneNumber: true}
      ).then((contacts) => {
        for (var i=0 ; i < contacts.length; i++){
          if(contacts[i].displayName !== null) {
            var contact = {};
            contact["name"]   = contacts[i].displayName;
            contact["number"] = contacts[i].phoneNumbers[0].value;
            if(contacts[i].photos != null) {
              console.log(contacts[i].photos);
              contact["image"] = this.sanitizer.bypassSecurityTrustUrl(contacts[i].photos[0].value);
              console.log(contact);
            } else {
              contact["image"] = "assets/dummy-profile-pic.png";
            }
            this.contactList.push(contact);
          }
        }
    });
  }

my ionic info:

$ ionic info
✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.8.6
   @angular-devkit/schematics    : 0.8.6
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.0.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 10 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/me/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v8.11.3 (/usr/local/bin/node)
   npm               : 6.3.0
   OS                : macOS
   Xcode             : Xcode 10.0 Build version 10A255

and package.json

{
  "name": "test",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~6.1.1",
    "@angular/core": "~6.1.1",
    "@angular/forms": "~6.1.1",
    "@angular/http": "~6.1.1",
    "@angular/platform-browser": "~6.1.1",
    "@angular/platform-browser-dynamic": "~6.1.1",
    "@angular/router": "~6.1.1",
    "@ionic-native/base64": "^5.0.0-beta.21",
    "@ionic-native/camera": "^5.0.0-beta.21",
    "@ionic-native/contacts": "^5.0.0-beta.21",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/diagnostic": "^5.0.0-beta.21",
    "@ionic-native/fcm": "^5.0.0-beta.21",
    "@ionic-native/ionic-webview": "^5.0.0-beta.21",
    "@ionic-native/native-storage": "^5.0.0-beta.21",
    "@ionic-native/network": "^5.0.0-beta.21",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/sqlite": "^5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "4.0.0-beta.13",
    "@ionic/pro": "2.0.3",
    "com-badrit-base64": "^0.2.0",
    "cordova-android": "7.0.0",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-fcm-with-dependecy-updated": "^2.2.6",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.2.0",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.5.0",
    "cordova.plugins.diagnostic": "^4.0.10",
    "core-js": "^2.5.3",
    "rxjs": "6.2.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.8.5",
    "@angular-devkit/build-angular": "~0.8.5",
    "@angular-devkit/core": "~0.8.5",
    "@angular-devkit/schematics": "~0.8.5",
    "@angular/cli": "~6.2.5",
    "@angular/compiler": "~6.1.1",
    "@angular/compiler-cli": "~6.1.1",
    "@angular/language-service": "~6.1.1",
    "@ionic/angular-toolkit": "^1.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-contacts": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-fcm-with-dependecy-updated": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-network-information": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova.plugins.diagnostic": {},
      "com-badrit-base64": {},
      "cordova-plugin-ionic-webview": {}
    },
    "platforms": [
      "android"
    ]
  }
}

[RazaGR]

I found this on webview https://developer.chrome.com/multidevice/webview/overview

If you are currently using content:// URLs to load files from a content provider in your application, note that these URLs only work when accessed from local content. That is, web content hosted outside your application is not allowed to access files built into your application.

what does this mean?

[RazaGR]

Well since thew newer webview doesn't support content:// URLs I have created a PR, it converts all content:// URLs to base64 image.

PR here https://github.com/apache/cordova-plugin-contacts/pull/182

[Bramzor]

@Divxtaman Thanks for the PR but it does not seem to work for me. Also its not a good solution as pulling all the content of the pictures over cordova will probably only slow it down. That is why local storage is used. I put some time into this issue and indeed, it seems that the new webview (cordova-plugin-ionic-webview) does not allow the browser to access files on the device itself. Security wise this is a good thing, but it blocks using content:// on android or using /var/... on iOS. So actually both Android and iOS are blocked by this. I figured out that there is already a PR request for this and already merged (https://github.com/ionic-team/cordova-plugin-ionic-webview/pull/242) that will solve this issue by rewriting the URLs to a proxy that will allow you to access the local content. I was not able to try this PR yet but it should solve the issue. Currently I'm using a workaround for iOS which is putting 'http://localhost:8080/file' in front of the photo which does work. For android I currently just ignore the photo.

[timbru31]

We are archiving this repository following Apache Cordova's Deprecation Policy. We will not continue to work on this repository. Therefore all issues and pull requests are being closed. Thanks for your contribution.