ionic-team / ionic-team/ionic-framework

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

Open
#19,091 9 comments 6 reactions 0 assignees View on GitHub
package: angular type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
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
```

Contributor guide

Open the contributing guide

Research direction

Start with core/src/components/img/img.tsx and reproduce the issue using the linked StackBlitz example, comparing ion-img with the native img binding for a sanitized URL. Done means ion-img displays the sanitized URL without the SafeValue error, while preserving the existing virtual-scroll behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.