Ionic-framework: bug: ion-img src property not working properly binding to sanitized value

Created on 14 Aug 2019 · 4Comments · Source: ionic-team/ionic-framework

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

triage

Source