Failed to load resource: unsupported URL only on iOS #266

RameshkrishnanV · 2019-01-10T12:05:26Z

Hi, i'm using this plugin version 2.3.1
and i getting this error
Failed to load resource: unsupported URL
unsafe:ionic-asset:///var/mobile/Containers/Data/Application/4554564-564554-5646545/tmp/cdv_photo_014.jpg

only on iOS platform. please help me to fix this
config.xml

"name="WKPort" value="8080""
name="UseScheme" value="true"
allow-intent href="itms:"
allow-intent href="itms-apps:"

Bramzor · 2019-01-13T06:07:37Z

Problem is the UseScheme. When it is set to false, the url will be file:///var/mobile.... to load those files on both iOS 10 and 11. When set to true, the url I mentioned works on iOS 10 but not on iOS 11 as it replaced file:// with ionic-asset:// and it is seen as unsecure. Maybe whitelisting it is the solution?

Bramzor · 2019-01-13T07:37:34Z

Noticed that ionic-asset:// was missing but even when adding

<allow-navigation href="ionic-asset://*" /

it didnt solve it yet.

kohlia · 2019-01-16T20:25:33Z

Did you find a solution to this

Bramzor · 2019-01-16T20:28:20Z

Did you find a solution to this

No, so I had to change UseScheme to false so it would use the old webserver. (Although security advice is not to do this). The advantage of changing it back is that you get the same behavior on iOS 10 and iOS 11 while if you set UseScheme to true, you get different link on both iOS versions. But it can help till someone solves the ionic-asset issue.

kohlia · 2019-01-16T20:35:28Z

Yea I didn't find any solution to this either so just waiting

geshub · 2019-01-19T16:34:05Z

I also got the problem when UseScheme is set to true ( cordova-plugin-ionic-webview v2.3.1) with a custom port. I've tried everything to whitelist but i always got this on IOS11:
Refused to load unsafe:ionic://app/img/def_picture2.png because it does not appear in the img-src directive of the Content Security Policy.
Does anyone managed to configure allow-navigation and Content-Security-Policy to allow those files ? I don't want to go back to UseScheme set to false because of the security issue.

kohlia · 2019-01-22T16:30:41Z

<meta http-equiv="Content-Security-Policy" content="default-src 'self' ionic: data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src 'self'; img-src ionic: 'unsafe-inline'">

Worked for me

RameshkrishnanV · 2019-01-22T16:37:55Z

@Bramzor Actually u r right. UseScheme=true is not working for iOS.

Finally fixed the issue by setting preferences to the iOS
preference name="WKPort" value="8080"
preference name="UseScheme" value="false"

specifically set theses preference for iOS.

Thanks everyone!

geshub · 2019-01-22T16:53:46Z

@RameshkrishnanV why are you closing since Ionic explicitly told to use UseSheme = true and a different port for security ?

RameshkrishnanV · 2019-01-22T17:33:27Z

@geshub Hey ionic web view by default it takes useScheme as false. so its ok to use it in preferences
see this
https://github.com/ionic-team/cordova-plugin-ionic-webview/blob/2.x/README.md

geshub · 2019-01-22T17:38:05Z

@RameshkrishnanV yes but did you see the security notice ? https://ionic.zendesk.com/hc/en-us/articles/360015176994-2019-01-03-Security-Alert-for-cordova-plugin-ionic-webview

Bramzor · 2019-01-22T20:19:02Z

UseScheme = false is indeed a BAD idea but its the only way to work around the issue today. But we need to keep this issue open to track as it still requires a fix. Usescheme = false is a security risk today.

prescindivel · 2019-08-06T16:33:36Z

this.sanitize.bypassSecurityTrustResourceUrl(window.Ionic.WebView.convertFileSrc(path))

this solved to me

elewin · 2019-08-06T18:30:33Z

this.sanitize.bypassSecurityTrustResourceUrl(window.Ionic.WebView.convertFileSrc(path))

this solved to me

Where are you setting that?

himalayaahuja · 2019-10-22T08:12:05Z

this.sanitize.bypassSecurityTrustResourceUrl(window.Ionic.WebView.convertFileSrc(path))
this solved to me

Where are you setting that?

you need to set up a custom pipe for this importing dom sanitizer from angular platform browser

d-loki · 2019-10-31T18:04:23Z

I encountered the same error and I solved it with

import { DomSanitizer } from '@angular/platform-browser';
import { WebView } from '@ionic-native/ionic-webview/ngx';

constructor ( private webview: WebView, private sanitizer: DomSanitizer)

this.sanitizer.bypassSecurityTrustResourceUrl( this.webview.convertFileSrc( imgPath ) );

Thanks to @prescindivel

this.sanitize.bypassSecurityTrustResourceUrl(window.Ionic.WebView.convertFileSrc(path))

this solved to me

kauawerle · 2019-11-19T13:33:23Z

Encontrei o mesmo erro e resolvi-o com
import { DomSanitizer } from '@angular/platform-browser';
import { WebView } from '@ionic-native/ionic-webview/ngx';

constructor ( private webview: WebView, private sanitizer: DomSanitizer)

this.sanitizer.bypassSecurityTrustResourceUrl( this.webview.convertFileSrc( imgPath ) );
Graças a @prescindivel

this.sanitize.bypassSecurityTrustResourceUrl(window.Ionic.WebView.convertFileSrc(path))
isso resolveu para mim

Can you show your html ?

d-loki · 2019-11-19T13:56:01Z

Here is my HTML code

<ion-content>
            <img class="picture" [src]="image.path">
            <p class="t-primary t-90 center" (click)="selectImage()">Ajouter une
                photo</p>
</ion-content>

And my code to take a picture

image: {
        name: string;
        path: string | SafeResourceUrl;
        filePath: string;
    };

constructor( 
                 private actionSheetController: ActionSheetController,
                 private camera: Camera,
                 private platform: Platform,
                 private filePath: FilePath,
                 private file: File,
                 private storage: Storage,
                 private webview: WebView,
                 private sanitizer: DomSanitizer, ) {
    }

pathForImage( img ) {
        if ( img === null ) {
            return '';
        } else {
            if ( this.platform.is( 'android' ) ) {
                return this.sanitizer.sanitize( SecurityContext.RESOURCE_URL,
                                                this.sanitizer.bypassSecurityTrustResourceUrl( this.webview.convertFileSrc( img ) ) );
            } else {
                return this.sanitizer.bypassSecurityTrustResourceUrl( this.webview.convertFileSrc( img ) );
            }
        }
    }

    async selectImage() {
        const actionSheet = await this.actionSheetController.create( {
                                                                         header: 'Select Image source',
                                                                         buttons: [
                                                                             {
                                                                                 text: 'Galerie ',
                                                                                 handler: () => {
                                                                                     this.takePicture( this.camera.PictureSourceType.PHOTOLIBRARY );
                                                                                 },
                                                                             },
                                                                             {
                                                                                 text: 'Appareil Photo',
                                                                                 handler: () => {
                                                                                     this.takePicture( this.camera.PictureSourceType.CAMERA );
                                                                                 },
                                                                             },
                                                                             {
                                                                                 text: 'Annuler',
                                                                                 role: 'cancel',
                                                                             },
                                                                         ],
                                                                     } );
        await actionSheet.present();
    }

    takePicture( sourceType: PictureSourceType ) {
        const options: CameraOptions = {
            quality: 40,
            sourceType,
            encodingType: this.camera.EncodingType.JPEG,
            saveToPhotoAlbum: false,
            correctOrientation: true,
            mediaType: this.camera.MediaType.PICTURE,
            targetHeight: 1000,
            targetWidth: 1000
        };

        this.camera.getPicture( options ).then( imagePath => {
            if ( this.platform.is( 'android' ) && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY ) {
                this.filePath.resolveNativePath( imagePath )
                    .then( filePath => {
                        const correctPath = filePath.substr( 0, filePath.lastIndexOf( '/' ) + 1 );
                        const currentName = imagePath.substring( imagePath.lastIndexOf( '/' ) + 1, imagePath.lastIndexOf( '?' ) );
                        this.copyFileToLocalDir( correctPath, currentName, this.createFileName() );
                    } );
            } else {
                const correctPath = imagePath.substr( 0, imagePath.lastIndexOf( '/' ) + 1 );
                const currentName = imagePath.substr( imagePath.lastIndexOf( '/' ) + 1 );
                this.copyFileToLocalDir( correctPath, currentName, this.createFileName() );
            }
        } );

    }

    createFileName() {
        const d = new Date(),
            n = d.getTime();
        return n + '.jpg';
    }

    copyFileToLocalDir( namePath, currentName, newFileName ) {
        this.file.copyFile( namePath, currentName, this.file.dataDirectory, newFileName ).then( success => {
            this.updateStoredImages( newFileName );
        }, error => {
            this.commonService.toast( 'Erreur pendant le stockage de l\'image' );
        } );
    }

    updateStoredImages( name ) {
        const filePath = this.file.dataDirectory + name;
        const resPath = this.pathForImage( filePath );
        this.image = {
            name,
            path: resPath,
            filePath,
        };
    }

kauawerle · 2019-11-19T13:58:21Z

path

Tanks :3

d-loki · 2019-11-19T14:15:50Z

What is your error?

kauawerle · 2019-11-19T14:18:25Z

What is your error?

he is don´t load image in ios ´-´

d-loki · 2019-11-19T14:26:31Z

What is your error?

he is don´t load image in ios ´-´

Can you send your HTML5 and TS code

This is my code for getPicture

 this.camera.getPicture( options ).then( imagePath => {
            if ( this.platform.is( 'android' ) && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY ) {
                this.filePath.resolveNativePath( imagePath )
                    .then( filePath => {
                        const correctPath = filePath.substr( 0, filePath.lastIndexOf( '/' ) + 1 );
                        const currentName = imagePath.substring( imagePath.lastIndexOf( '/' ) + 1, imagePath.lastIndexOf( '?' ) );
                        this.copyFileToLocalDir( correctPath, currentName, this.createFileName() );
                    } );
            } else {
                const correctPath = imagePath.substr( 0, imagePath.lastIndexOf( '/' ) + 1 );
                const currentName = imagePath.substr( imagePath.lastIndexOf( '/' ) + 1 );
                this.copyFileToLocalDir( correctPath, currentName, this.createFileName() );
            }
        } );

You can see that I am changing image path and after I use
this.sanitizer.bypassSecurityTrustResourceUrl( this.webview.convertFileSrc( img ) ); to display the image

kauawerle · 2019-11-20T12:46:53Z

What is your error?

he is don´t load image in ios ´-´

Can you send your HTML5 and TS code

This is my code for getPicture

 this.camera.getPicture( options ).then( imagePath => {
            if ( this.platform.is( 'android' ) && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY ) {
                this.filePath.resolveNativePath( imagePath )
                    .then( filePath => {
                        const correctPath = filePath.substr( 0, filePath.lastIndexOf( '/' ) + 1 );
                        const currentName = imagePath.substring( imagePath.lastIndexOf( '/' ) + 1, imagePath.lastIndexOf( '?' ) );
                        this.copyFileToLocalDir( correctPath, currentName, this.createFileName() );
                    } );
            } else {
                const correctPath = imagePath.substr( 0, imagePath.lastIndexOf( '/' ) + 1 );
                const currentName = imagePath.substr( imagePath.lastIndexOf( '/' ) + 1 );
                this.copyFileToLocalDir( correctPath, currentName, this.createFileName() );
            }
        } );

You can see that I am changing image path and after I use
this.sanitizer.bypassSecurityTrustResourceUrl( this.webview.convertFileSrc( img ) ); to display the image

Thanks, you , you helped me much

jemys89 · 2019-12-02T23:20:50Z

hey this work for me!

if(this.platform.is('ios')){
              imgPath = this.domSanitizer.bypassSecurityTrustResourceUrl((<any>window).Ionic.WebView.convertFileSrc(mediaUri));
       imgPath = urlnorm.changingThisBreaksApplicationSecurity.replace("ionic://localhost", "");
}else{
   imgPath = (<any>window).Ionic.WebView.convertFileSrc(mediaUri);
  }

razam217 · 2020-04-30T07:27:10Z

If anyone from ionic 1 wants the solution to this issue, please use this stackoverflow post to fix it.
https://stackoverflow.com/a/30034955

Just place these two line of code in angular.config:
var imgSrcSanitizationWhitelist = /^\s*(https?|ftp|file|ionic):|data:image\//; $compileProvider.imgSrcSanitizationWhitelist(imgSrcSanitizationWhitelist);

creativitycomkw · 2020-07-15T13:14:53Z

100% working solution
ionic webview >= 4

this.profileImgSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.webview.convertFileSrc(imagePath));

Lyfei · 2023-04-14T03:27:45Z

100% working solution ionic webview >= 4

this.profileImgSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.webview.convertFileSrc(imagePath));

ionic 3, webview 4.2.1 , still error.

Bramzor mentioned this issue Jan 18, 2019

fix: Use a single scheme for all files #270

Merged

RameshkrishnanV closed this as completed Jan 22, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failed to load resource: unsupported URL only on iOS #266

Failed to load resource: unsupported URL only on iOS #266

RameshkrishnanV commented Jan 10, 2019 •

edited

Loading

Bramzor commented Jan 13, 2019 •

edited

Loading

Bramzor commented Jan 13, 2019 •

edited

Loading

kohlia commented Jan 16, 2019

Bramzor commented Jan 16, 2019

kohlia commented Jan 16, 2019

geshub commented Jan 19, 2019

kohlia commented Jan 22, 2019

RameshkrishnanV commented Jan 22, 2019

geshub commented Jan 22, 2019

RameshkrishnanV commented Jan 22, 2019

geshub commented Jan 22, 2019 •

edited

Loading

Bramzor commented Jan 22, 2019

prescindivel commented Aug 6, 2019

elewin commented Aug 6, 2019

himalayaahuja commented Oct 22, 2019

d-loki commented Oct 31, 2019

kauawerle commented Nov 19, 2019

d-loki commented Nov 19, 2019

kauawerle commented Nov 19, 2019

d-loki commented Nov 19, 2019

kauawerle commented Nov 19, 2019

d-loki commented Nov 19, 2019 •

edited

Loading

kauawerle commented Nov 20, 2019 •

edited

Loading

jemys89 commented Dec 2, 2019 •

edited

Loading

razam217 commented Apr 30, 2020 •

edited

Loading

creativitycomkw commented Jul 15, 2020

Lyfei commented Apr 14, 2023

Failed to load resource: unsupported URL only on iOS #266

Failed to load resource: unsupported URL only on iOS #266

Comments

RameshkrishnanV commented Jan 10, 2019 • edited Loading

Bramzor commented Jan 13, 2019 • edited Loading

Bramzor commented Jan 13, 2019 • edited Loading

kohlia commented Jan 16, 2019

Bramzor commented Jan 16, 2019

kohlia commented Jan 16, 2019

geshub commented Jan 19, 2019

kohlia commented Jan 22, 2019

RameshkrishnanV commented Jan 22, 2019

geshub commented Jan 22, 2019

RameshkrishnanV commented Jan 22, 2019

geshub commented Jan 22, 2019 • edited Loading

Bramzor commented Jan 22, 2019

prescindivel commented Aug 6, 2019

elewin commented Aug 6, 2019

himalayaahuja commented Oct 22, 2019

d-loki commented Oct 31, 2019

kauawerle commented Nov 19, 2019

d-loki commented Nov 19, 2019

kauawerle commented Nov 19, 2019

d-loki commented Nov 19, 2019

kauawerle commented Nov 19, 2019

d-loki commented Nov 19, 2019 • edited Loading

kauawerle commented Nov 20, 2019 • edited Loading

jemys89 commented Dec 2, 2019 • edited Loading

razam217 commented Apr 30, 2020 • edited Loading

creativitycomkw commented Jul 15, 2020

Lyfei commented Apr 14, 2023

RameshkrishnanV commented Jan 10, 2019 •

edited

Loading

Bramzor commented Jan 13, 2019 •

edited

Loading

Bramzor commented Jan 13, 2019 •

edited

Loading

geshub commented Jan 22, 2019 •

edited

Loading

d-loki commented Nov 19, 2019 •

edited

Loading

kauawerle commented Nov 20, 2019 •

edited

Loading

jemys89 commented Dec 2, 2019 •

edited

Loading

razam217 commented Apr 30, 2020 •

edited

Loading