How to use blob-urls as xlink:href attribute of SVG image-tags

Viewed 204

I need to display a simpile image inside of a svg-tag. The image is downloaded and accessable by a blob url like this "blob:http://localhost:4200/8e011a50-95a6-4063-baeb-e760b6fd98a2". The blob URL works on normal img without problems.

But in svg image tags it fails because of:

  • SafeValue must use [property]=binding: blob:http://localhost:4200/4baf011f-a23d-45a7-9be2-3a6a9109ffda (see http://g.co/ng/security#xss)

The Template looks like this:

....
<svg ...>
   <image [attr.xlink:href]="domSanitizer.bypassSecurityTrustUrl(blobstoreUrl)"></image>
   ...
</svg>
....

The component is constructing the blobstoreUrl itself:

@Component({...})
export class MyComponent {

   blobstoreUrl: string

   constructor(public domSanitizer: DomSanitizer) { }

   ngOnInit() {
     // do some calculation
     this.blobstoreUrl = "blob:http://localhost:4200/8e011a50-95a6-4063-baeb-e760b6fd98a2"
   }
}

In other posts i've found bypassSecurityTrustResourceUrl should fix it, but it doesn't.

error

I guess the problem is that [attr.xlink:href] is attribute binding but as the error tells us I have to use [property]=binding. But how to fix that?

0 Answers
Related