ionic-team / ionic-team/ionic-framework

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

Đang mở
#19,091 9 bình luận 6 reaction 0 người được giao Xem trên GitHub
package: angular type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend, mobile-dev
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.