Cordova-plugin-ionic-webview: convertFileSrc - ERROR TypeError: Object(...) is not a function

[tobiasmuecksch]

In a component I'm trying to convert a file src string.

import { WebView } from '@ionic-native/ionic-webview/ngx';

// ...

constructor(
    protected webView: WebView
) {}

// ...

protected fixURL(url: string): string {
    if (this.platform.is('cordova')) {
        return this.webView.convertFileSrc(url);
    } else {
        return url;
    }
}

// ...

The problem is, that this.webView.convertFileSrc(url) throws this error:

### Version:

• cordova-plugin-ionic-webview: 2.1.4

• @ionic-native/ionic-webview: ^5.0.0-beta.21

  Ionic Info:

Ionic:

ionic (Ionic CLI) : 4.2.1 (/Users/tmuecksch/.npm-global/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.11

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : android 7.1.1, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.1.4, (and 19 other plugins)

System:

ios-deploy : 2.0.0
NodeJS : v10.11.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.0 Build version 10A255

[tobiasmuecksch]

I've been able to workaround this, by copying the convertFileSrc method from the following file to my component class and using it instead of the WebView Wrapper:

https://github.com/ionic-team/cordova-plugin-ionic-webview/blob/master/src/www/util.js

Strange 😮

[sood279]

How to get window.WEBVIEW_SERVER_URL + '/_file_'

[tobiasmuecksch]

@sood279 I don't understand. Is this a question or a statement?

[sagedsamir]

same problem, any solution
and when i use normalizeURL it do nothing return the path without any change
any help will be appreciated

[francoisduchemin]

I have the same issue.

When I use the following it works fine:

private win: any = window;
this.win.Ionic.WebView.convertFileSrc();

[iamravisankar]

private win: any = window; this.win.Ionic.WebView.convertFileSrc();

save my day...:)

[afaneh262]

I have the same issue.

When I use the following it works fine:

private win: any = window;
this.win.Ionic.WebView.convertFileSrc();

Awesome, it's helpful!

[jcesarmobile]

I can't reproduce on an Ionic 4 app with "@ionic-native/ionic-webview": "^5.0.0-beta.22" and "@ionic-native/core": "5.0.0-beta.21".
Tested on both cordova-plugin-ionic-webview 2.3.1 and 3.0.0 for iOS and Android

[FatManiac]

@jcesarmobile You say that you can't reproduce on ionic 4 but i think the concerned project is on ionic 3

[tobiasmuecksch]

I can confirm, that the issue is fixed with the latest version of the webview plugin.

Tested with Ionic 3

EDIT: untrue statement. I'm still using the workaround.

[princeraizadha]

Resolved Please check my Answer

https://github.com/ngx-translate/core/issues/824#issuecomment-459329784

[leiamac]

@tobiasmuecksch How did you tested it? I did it yesterday and still have the same problem.

[tobiasmuecksch]

@leiamac I've upgraded cordova-plugin-ionic-webview to Version 3.1.1 and @ionic-native/ionic-webview to version ^5.0.0-beta.21

This is my code for converting and sanitizing image urls:

protected fixURL(url: string): string | SafeUrl {
    if (this.platform.is('cordova')) {
        const win: any = window;
        const fixedURL = win.Ionic.WebView.convertFileSrc(url);

        return this.sanitizer.bypassSecurityTrustUrl(fixedURL);
    } else {
        return url;
    }
}

(Don't forget the imports)

[tobiasmuecksch]

lol. I just realized that I'm still using the work-around...

I'm sorry for my false statement.

[jcesarmobile]

Well, the problem seems to be that there is no @ionic-native/ionic-webview for 4.x and the one for 5.x is not compatible with Ionic 3.
So people on Ionic 3 will have to use the workaround.

[nasasutisna]

I have the same issue.

When I use the following it works fine:

private win: any = window;
this.win.Ionic.WebView.convertFileSrc();

nice , thank you. this really helped my problem

[phoenixsachin]

private win: any = window;
this.win.Ionic.WebView.convertFileSrc();

work like charm thanks buddy.

[APalau82]

I have the same issue.

When I use the following it works fine:

private win: any = window;
this.win.Ionic.WebView.convertFileSrc();

Does not work from my side with webview v4.1.0...
Still have issue while trying to display a local stored image...

Here is my code

private win: any = window;
this.img = this.win.Ionic.WebView.convertFileSrc(LocalString);

and on my html file
<img [src] = "img" />

Original local url is
file:///var/mobile/Containers/Data/Application/BDC18876-12A6-4DB7-A347-9DEF68C502A2/Library/NoCloud/130/130.jpg

Converted url became
ionic://localhost/_app_file_/var/mobile/Containers/Data/Application/BDC18876-12A6-4DB7-A347-9DEF68C502A2/Library/NoCloud/130/130.jpg

But image is still empty on my device. It does not render...

Anything to see with Content-Security-Policy maybe ?
Mine is
<meta http-equiv="Content-Security-Policy" content="default-src * data: blob:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: localhost:*>

Any help ?

[phoenixsachin]

try in html

[jcesarmobile]

If using angular you have to tell it to trust ionic scheme with dom sanitizer, there is an example in the comments

[APalau82]

If using angular you have to tell it to trust ionic scheme with dom sanitizer, there is an example in the comments

@jcesarmobile thanks that fixed my issue. Did not realize that we need to both convert and sanitize the url.

Nos it works fine with
<img [src]="fixURL(url)"/>

But image does not appear when it's in background... I have tried all these options, none of them display the image
<ion-card [style.backgroundImage]="'url(' + fixURL(url) + ')'"></ion-card>
<ion-card [style.background]="'url(' + fixURL(url) + ')'"></ion-card>
<ion-card [style.background-image]="'url(' + fixURL(url) + ')'"></ion-card>
<ion-card [ngStyle]="'url(' + fixURL(url) + ')'"></ion-card>

Error message in console
fixURL > SafeValue must use [property]=binding: ionic://localhost/_app_file_/var/mobile/Containers/Data/Application/B751E65D-DEAE-4292-BC08-3EAB25E76E1C/Library/NoCloud/135/135.jpg (see http://g.co/ng/security#xss)

Why working with image but not background-image...?

[APalau82]

try in html

I got this message SafeValue must use [property]=binding
It works with <img [src]="img"/>

[steinsleger]

I've been able to workaround this, by copying the convertFileSrc method from the following file to my component class and using it instead of the WebView Wrapper:

https://github.com/ionic-team/cordova-plugin-ionic-webview/blob/master/src/www/util.js

Strange open_mouth

Hi @tobiasmuecksch ! I'm new to Ionic/Angular/Cordova. Do you know -or any of you guys- how to obtain window.WEBVIEW_SERVER_URL in a particular class? Copying the convertFileSrc method literally it obviously won't work. Thanks a lot in advance.

[steinsleger]

I'm still stuck with this, any help will be highly appreciated. Thank you.

[Arxi]

@steinsleger have you been able to solve this?

edit: hmm, seems like window.WEBVIEW_SERVER_URL is available automatically when running the code on device (though I only tested Android 9 so far)

[steinsleger]

@Arxi unfortunately not :\
thx for the input about Android

[AnkushT27]

I have the same issue.

When I use the following it works fine:

private win: any = window;
this.win.Ionic.WebView.convertFileSrc();

How did you get the Ionic on the window object?

[niravtrivedi-youngsoft]

If using angular you have to tell it to trust ionic scheme with dom sanitizer, there is an example in the comments

@jcesarmobile thanks that fixed my issue. Did not realize that we need to both convert and sanitize the url.

Nos it works fine with
<img [src]="fixURL(url)"/>

But image does not appear when it's in background... I have tried all these options, none of them display the image
<ion-card [style.backgroundImage]="'url(' + fixURL(url) + ')'"></ion-card>
<ion-card [style.background]="'url(' + fixURL(url) + ')'"></ion-card>
<ion-card [style.background-image]="'url(' + fixURL(url) + ')'"></ion-card>
<ion-card [ngStyle]="'url(' + fixURL(url) + ')'"></ion-card>

Error message in console
fixURL > SafeValue must use [property]=binding: ionic://localhost/_app_file_/var/mobile/Containers/Data/Application/B751E65D-DEAE-4292-BC08-3EAB25E76E1C/Library/NoCloud/135/135.jpg (see http://g.co/ng/security#xss)

Why working with image but not background-image...?

Hi can you help for this
https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/385#issuecomment-682045753

Thanks !!