0

I am attempting to sanitize a url to use as the data attribute for an object tag to display an svg.

my.page.html

<object [id]="'chr'+index" [data]="SVGToView[0] | safe" type="image/svg+xml"></object>

my.page.ts

SVGToView:Array<any> = ['../../assets/graphic.svg'];

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string) {
    console.log(this.sanitizer.bypassSecurityTrustResourceUrl(url));
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

Throws error:

SafeResourceUrlImpl {changingThisBreaksApplicationSecurity: "../../assets/graphic.svg"}

The pipe works fine, the svg is fine (correct location and hardcoded it displays ok) Would you know why the Domsanitizer is not accepting this resource url? Thanks

Ray Andison
  • 276
  • 1
  • 10
  • Try the url to only be `assets/graphic.svg`. – Gunnar B. Aug 16 '20 at 10:40
  • Tried this.. same error and loads entire mobile app into the object that should contain the svg on both occasions – Ray Andison Aug 16 '20 at 10:51
  • Oh, I think, for 'dynamic' uses, it is actually `bypassSecurityTrustUrl`. (For binding I'm not quite sure, if you even need to sanitize or if this is done automatically.) – Gunnar B. Aug 16 '20 at 12:23
  • This is being used for resource urls (files in app assets directory) not for http urls, so the correct sanitizer is bypassSecurityTrustResourceUrl based on what docs I have read, and yes, it definitely needs to be sanitized, as it was throwing insecure url errors and otherwise, I wouldn't be here asking – Ray Andison Aug 16 '20 at 13:30
  • So, I tried this a bit myself. Basically reproduced your setup and this doesn't actually throw an error. It justs prints the `SafeResourceUrl`-object to the console, which has the property `changingThisBreaksApplicationSecurity`. I think, this is actually how it's meant to work. Do you actually reach a point where the svg doesn't show up (in that case there would be an actual error in the console in red font)? – Gunnar B. Aug 17 '20 at 07:23
  • Thanks @Gunnar B, appreciate you looking into this, I have it working without console.logging or errors if I directly apply the sanitization to each array entry (a url string), but not using the pipe, which gives unusual errors, I will update this further when I figure out why the pipe is doing this ;) – Ray Andison Aug 17 '20 at 13:49

0 Answers0