Cannot bind SafeUrl to SVGImageElement

🐞 bug report

Affected Package

The issue is likely caused by package @angular/core

Is this a regression?

No. If it is a regression, I'm not aware of it.

Description

I have a template that is a more complex version of this:

<svg xmlns="http://www.w3.org/2000/svg" id="svg">
    <image [attr.href]="aSafeUrl"></image>
</svg>

At runtime, no image is shown, no error is in the JavaScript console, and the DOM look like this (simplified):

<svg xmlns="http://www.w3.org/2000/svg" id="svg">
    <image href="SafeValue must use [property]=binding: app://localhost/path/image.png (see http://g.co/ng/security#xss)"></image>
</svg>

Is suspect that the proper binding for SafeUrls to SVGImageElement.href is missing.

When I use an [href] binding instead of [attr.href] Angular tells me that I’m trying to bind to a readonly property.

Context

This is part of an Apache Cordova project targeting the latest iOS version. iOS/cordova-ios@6 considers the file: protocol to be unsafe, so we use the synthetic app://localhost protocol and host. That’s probably why Angular deems the URLs to be unsafe. We wrap them using DomSanitizer.bypassSecurityTrustUrl(), but it seems that we can only use SafeUrls with specific bindings, which don’t exist for SVGImageElements. We use SVGs to support taking notes on images.

🔬 Minimal Reproduction

🔥 Exception or Error

SafeValue must use [property]=binding: app://localhost/path/image.png (see http://g.co/ng/security#xss)

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.7
Node: 12.16.3
OS: darwin x64

Angular: 9.1.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.7
@angular-devkit/build-angular     0.901.8
@angular-devkit/build-optimizer   0.901.8
@angular-devkit/build-webpack     0.901.8
@angular-devkit/core              9.1.7
@angular-devkit/schematics        9.1.7
@angular/cli                      9.1.7
@angular/http                     4.4.7
@ngtools/webpack                  9.1.8
@schematics/angular               9.1.7
@schematics/update                0.901.7
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.43.0

Anything else relevant?

We don’t use the Angular CLI for building.

[crisbeto]

It might be worth trying to bind to xlink:href instead.

[Chiff]

I’ve found a “workaround”. You can simply put unsanitized URL into [attr.href] or [attr.xlink:href] on SvgImage element. I have tested this with the Base64 image.

//ts
imgSrc = apiCall().response; // data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAEYAAABkCAYAA..

//html
<image [attr.href]="imgSrc" ... ></image>

// result
<image x="0" y="0" href="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAEYAAABkCAYAA..." width="2480" height="3507"></image>