[v3] Cors problems when using images with file URI from the Camera plugin and with Cropper.js

[peterpeterparker]

Ionic version:

Ionic-Angular v4-RC
Ionic-Native v5.0.0-beta.21

Current behavior:
I try to migrate from v2.3.1 to v3.0.0 and face problems when I use the camera plugin an try to take or upload an image from the gallery respectively I'm not able to display any images from that source anymore

I followed the migration's guide (no custom property, use convertFileSrc and allow-navigation set to *) and furthermore added app-file: to my csp rules img-src and connect-src

I face the two following errors:

1. When I parse the result of the camera to an image tag, I get the following csp error

Refused to load unsafe:app-file:///Users/...-790013700987/tmp/cdv_photo_002.jpg because it does not appear in the img-src directive of the Content Security Policy.

2. When I parse the result of the camera in Cropper.js library (https://github.com/fengyuanchen/cropperjs) I get the following error:

Cross origin requests are only supported for HTTP.
XMLHttpRequest cannot load app-file:///Users...08DAB8373B8F/tmp/cdv_photo_003.jpg due to access control checks.

I tried to set cross-origin: "anonymous" as attribute to all <img/> but it didn't helped

Expected behavior:
As with v2.3.1, I want to be able to use this stack in order to display and manipulate images in my app

Related code:

Camera code: https://github.com/fluster/fluster-app/tree/master/src/app/modals/core/photo-picker

CSP: https://github.com/fluster/fluster-app/blob/master/src/index.html

Config.xml: https://github.com/fluster/fluster-app/blob/master/config.xml

Demo repo

The 2nd problem could be reproduced with the following simple demo repo: https://github.com/peterpeterparker/ionic-webview-camera-cropperjs

[peterpeterparker]

1. The "Refused to load unsafe:" error could be solved, if using Angular, while using the DomSanitizer

For example:

import {DomSanitizer, SafeUrl} from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {
}

sanitize(url: string): SafeUrl {
     return this.sanitizer.bypassSecurityTrustUrl(url);
}

<img [src]="sanitize(imgURI)"/>

[peterpeterparker]

I have put together a simple demo repo to reproduce the above 2nd error: https://github.com/peterpeterparker/ionic-webview-camera-cropperjs

The error doesn't occurs with Webview v2.3.1 respectively in my app in store but does occurs with Webview v3.0.0

The problem occurs at the following line of Cropper.js when the library try to load the image while using xhr: https://github.com/fengyuanchen/cropperjs/blob/6759d59e288b22095d91656f0868b6a676f638bd/src/js/cropper.js#L162

[pengkobe]

hello. is there any updates?

[Bramzor]

Problem is that on v3.0.0 the webserver is disabled and even in v2.3.1 with the security alert it tells you to disable the webserver. Does it help to whitelist app-file in config.xml?

[Ionitron]

🎉 This issue has been resolved in version 3.1.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[azad47808]

I have the same problem in the ionic 4 project.