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

Improve this question
6
  • Try the url to only be assets/graphic.svg. Commented Aug 16, 2020 at 10:40
  • Tried this.. same error and loads entire mobile app into the object that should contain the svg on both occasions Commented Aug 16, 2020 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.) Commented Aug 16, 2020 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 Commented Aug 16, 2020 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)? Commented Aug 17, 2020 at 7:23
Related questions
9
angular 2 missing domsanitizer when try to start
3
DomSanitizer error "URL Segment: 'null'"
1
bypasssecuritytrust from DomSanitizer not working (Angular 2)
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.