mixuala commented 5 years ago

Bug Report

Ionic version:

[x] 4.x

Current behavior: ionImg (used together with ionVirtualScroll) does not work with src values that have been sanitized using safeUrl = domSanitizer.bypassSecurityTrustUrl(url);. It throws and error like "capacitor://localhost/SafeValue must use [property]=binding: capacitor://localhost/_capacitor_file_/Users/user/Library/.../Library/Caches/img/C409D956-DE09-406D-A7EF-3207DF705B64-L0-001~100x100.JPG (see http://g.co/ng/security#xss)

<ion-virtual-scroll>
    <img [src]="safeUrl">                               <!-- OK -->
    <ion-img [src]="safeUrl"></ion-img>     <!-- ERROR -->
</ion-virtual-scroll>

This probably happens because ionImg outputs IMG.src without using [src]=binding.

<Host class={getIonMode(this)}>
        <img
          decoding="async"
          src={this.loadSrc}
          alt={this.alt}
          onLoad={this.onLoad}
          onError={this.loadError}
        />
      </Host>
    );

see: https://github.com/ionic-team/ionic/blob/master/core/src/components/img/img.tsx

Expected behavior: It should display the sanitized url, the same as the HTMImageElement.

Steps to reproduce: see above

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.3 (/Users/michael/.nvm/versions/node/v8.9.4/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Capacitor:

   Capacitor CLI   : 1.0.0
   @capacitor/core : 1.0.0

Cordova:

   Cordova CLI       : 8.0.0
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (1 plugins total)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   ios-deploy : 2.0.0
   NodeJS     : v8.9.4 (/Users/michael/.nvm/versions/node/v8.9.4/bin/node)
   npm        : 6.9.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.3 Build version 10G8

omardoma commented 5 years ago

Hey guys, any updates on this? I am facing it now as well

digaus commented 4 years ago

Having the same issue... cannot use ion-img because of that.

Taylorsuk commented 4 years ago

This is an issue for me now too. It makes it impossible to use Pipes to transform urls which is quite common for dom sanitisation.

Avareto commented 4 years ago

Same problem here. Must be an easy fix. Please, fix it.

harikvpy commented 3 years ago

Me too

JoshuvaGeorge03 commented 3 years ago

any updates on this issue?

Flingor commented 3 years ago

Have the same problem. Anything new?

liamdebeasi commented 3 years ago

Thanks for the issue. I can reproduce the issue. The problem here is that using one of the sanitizer methods to eject from the sanitizer returns an object, not the url string.

As a result, when you pass the bypassed value to ion-img, ion-img receives an object and so the image does not load. Angular unwraps this automatically, but it looks like there needs to be something else done so that it will work with ion-img.

satya319 commented 2 years ago

till now , this bug is not fixed. already 2yrs to be over lol.

ionic-team / ionic-framework

bug: ion-img src does not work when bypassing angular sanitizer for a url #19091

Bug Report