Cordova-plugin-ionic-webview: IOS 12, cann't open ionic://localhost/

[4550155]

IOS 12,cann't open:ionic://localhost/var/mobile/Containers/Data/Application/BE7C12F8-6134-405D-A7E5-7B8F5F1BC203/Library/Application%20Support/com.xxx.xxx/cordova-hot-code-push-plugin/2019.01.22-01.46.30/www//index.html

cordova-hot-code-push-plugin 1.5.3

[mdgs]

I have the same issue.

IOS: 12
cordova ios: 4.5.5
plugin: cordova-plugin-ionic-webview 3.1.1

Refused to load unsafe:ionic://localhost/assets/image.png because it does not appear in the img-src directive of the Content Security Policy.

enable almost all possibility

    <meta http-equiv="Content-Security-Policy" content="
                default-src * gap://ready file://* * data: blob: 'unsafe-inline' 'unsafe-eval' ws: wss:;
                img-src * ionic://* 'self' data: content:;
                script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
                style-src  'self' 'unsafe-inline' *;
                worker-src 'self' data: blob: *;
                media-src *;">

[videmort]

@mgds sanitize the images
In angularJS for example -->
$compileProvider.imgSrcSanitizationWhitelist(/^s*(https?|ftp|file|blob|ionic):|data:image//);

[mdgs]

@videmort, I implemented exactly as you suggested and it works now, since I use AngularJS
Thanks

[videmort]

@mdgs you are welcome

@jcesarmobile Maybe this detail should be written in the readme

[xiangxn]

this is a bug of "CDVWKWebViewEngine.m"
I have fixed it
The reason for this issue in "IONAssetHandler.m":

if ([scheme isEqualToString:IONIC_SCHEME]) {
        if ([stringToLoad hasPrefix:@"/_app_file_"]) {
            startPath = [stringToLoad stringByReplacingOccurrencesOfString:@"/_app_file_" withString:@""];
        } else {
            startPath = self.basePath;
            if ([stringToLoad isEqualToString:@""] || [url.pathExtension isEqualToString:@""]) {
                startPath = [startPath stringByAppendingString:@"/index.html"];
            } else {
                startPath = [startPath stringByAppendingString:stringToLoad];
            }
        }
    }

[fgilio]

I have this exact same issue, will @xiangxn patch get merged?

[bshafiee]

same issue, @mlynch can we get some 👀 on that PR pretty please?

[pedlop]

I solved this problem now to iOS WebView Ionic 4. We need to provide a safe URL:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-image',
  templateUrl: './image.page.html',
  styleUrls: ['./image.page.scss']
})
export class ImagePage implements OnInit {
   imagePath: SafeResourceUrl;

   constructor(
      private webview: WebView,
      private domSanitizer: DomSanitizer
   ) { }

   ngOnInit(): void {
      this.imagePath = this.domSanitizer.bypassSecurityTrustResourceUrl(
         this.webview.convertFileSrc(`file:///Users/pedlop/Downloads/myImage.jpg`)
      );

  }

[mlynch]

@bshafiee what PR are you referring to?

[fgilio]

@mlynch I think it's this one https://github.com/ionic-team/cordova-plugin-ionic-webview/pull/287

[bshafiee]

@mlynch I meant (#287) and I tried it and didn't solve my problem anyways 🤷‍♂️
context: I was using the camera plugin and was trying to convert the image file address on iOS 12, I gave up and just used the base64 data instead.

[aacassandra]

@pedlop thankyou its work for me

[kfyangyong]

@mgds sanitize the images
In angularJS for example -->
$compileProvider.imgSrcSanitizationWhitelist(/^s*(https?|ftp|file|blob|ionic):|data:image//);

one error，“image//”，should be
$compileProvider.imgSrcSanitizationWhitelist(/^s*(https?|ftp|file|blob|ionic):|data:image/);

[slyfalcon]

Still not solved, when I met with an old project build on ionic 1.3.3 , and run it on iOS 12, can someone give some hints?

[bbig979]

@slyfalcon my project is built on ionic 1.2.X , and successfully ran it on iOS 12. I used jQuery to strip off 'unsafe:' tags

1. let images load
2. sleep like 100 millisecond
3. strip-off all 'unsafe:' tags of images
4. walla

setTimeout(function () { $('img').each(function(){ $(this).attr('src', $(this).attr('src').replace('unsafe:', '')); }); }, 100);

Hacky, but works!

[fuentes010]

@pedlop is the right solution, this issue can be closed.
Our app downloads and stores images from a server.
So we have created a pipe to automate the process of rendering images, the only think you have to know is the relative path.

_Pipe_

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { File } from "@ionic-native/file";

@Pipe({name: 'convertFileSrc'})
export class ConvertFileSrcPipe implements PipeTransform {

  constructor(private domSanitizer: DomSanitizer, private file: File) {
  }

  transform(value: string) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(
        window.Ionic.WebView.convertFileSrc(`${this.file.dataDirectory}${value}`)
    );
  }

}

_Usage_

...

 <img [src]="'products/1234.png' | convertFileSrc">

...

[azizbohra]

100% working solution
Ionic 1
webview: cordova-plugin-ionic-webview 4.1.2

you need to sanitize the images in angularJS
for example:

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|ionic):|data:image/);

[azizbohra]

@kauawerle

` .config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $localStorageProvider, $httpProvider, $compileProvider) {

$httpProvider.interceptors.push('HttpRequestInterceptor');

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|ionic):|data:image/);

$ionicConfigProvider.views.forwardCache(false);
$ionicConfigProvider.views.maxCache(0);

});
`

[cheabkunthea]

100% working solution
Ionic 1
webview: cordova-plugin-ionic-webview 4.1.2

you need to sanitize the images in angularJS
for example:

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|ionic):|data:image/);

I follow to fix showing image on my ionic v1 app but cannot load image file: Log from iOS simulator: not set for url='unsafe:ionic://localhost. Please help to solve.