Allow components to use unsafe image urls

[stasusov]

What is the expected behavior?

Allow components to use image urls that are not safe

What is the current behavior?

Images accessed by unsafe url are not displayed when used in <gallery-image><gallery-image>

What are the steps to reproduce?

https://stackblitz.com/edit/ngx-gallery-avkn7t

1. Add the "security bypassed" (with bypassSecurityTrustUrl()) "unsafe" url to [src]
2. use gallerize directive for the container of <img> tags
3. Click on one of the images. You can see Angular warnings in console, because url is not safe

What is the use-case or motivation for changing an existing behavior?

If developer passed image url through bypassSecurityTrustUrl(), it should be shown.

Which versions are you using for the following packages?

Angular: 6
Angular CDK: 6.4.7
Angular CLI: 6.0.0
Typescript: 2.7.2
Gallery: 3.3.1

[MurhafSousli]

Hi @stasusov It is not about the sanitizing I think, it could be caused of URL.createObjectURL I guess, I am not sure! is there another way to create a URL from the http response or store t as inline data instead.

[stasusov]

@MurhafSousli, thank you.

You are right, the createObjectUrl() generates an "unsafe" url, that is not inserted to the template by default. That's why in a demo (home.component.ts), I am explicitly make the url "trusted". But there is no such "trust" procedure in the ngx-gallery components, so any "unsafe" urls are removed. That's what the messages you can see in the console warning about and why no image is displayed on click. But, if we add this procedure, image is shown, because the url is safe for Angular now.

For example,
If we change the line
<ng-container [lazyImage]="src" (loaded)="loadedImage = $event" (error)="error.emit($event)">
to
<ng-container [lazyImage]="src" (loaded)="loadedImage = trustCss($event)" (error)="error.emit($event)">
and update the component with

trustCss(imageUrl: string) {
    return this._sanitizer.bypassSecurityTrustStyle(imageUrl);
}

images are shown correctly.

This is acceptable in terms of security in my case (using gallerize directive), because if url is unsafe, I'll receive a warning from Angular on the step of adding it (to the <img/> or background) to one of my templates. But I am not aware of the other cases of library usage (again, in terms of security), so I can't just make a PR with these changes.

Does this explanation make any sense?

UPD: I've just noticed that the same component (gallery-image) already uses sanitizer to bypass check for custom HTML, so the library is responsible for a safety issue. Maybe this can help you somehow.

[MurhafSousli]

Fixed in 4.0.0 beta