ionic-team / ionic-team/ionic-framework

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

Ouverte
#19,091 9 commentaires 6 réactions 0 personnes assignées Voir sur GitHub
package: angular type: bug
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

# 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)`

```html


```

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

{this.alt}

);
```
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

**Related code:**
https://stackblitz.com/edit/ionic-v4-angular-tabs-6um4j8

**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
```

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.