Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG

Question

I've been using DomSanitizer with an SVG in an html string.

Previous to the current version of Angular, this worked just fine:

this.domSanitizer.bypassSecurityTrustHtml(content);

Now I am getting an object back called

SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity

Is there now a new way to access the output of the DomSanitizer? Should I be receiving it as SafeHTML type or something? What's the point in having bypassSecurityTrustHtml if it still filters html?

Any answers on a postcard? Please...

@micronyks For some reasons it requires property binding `innerHTML="myData | pipeName" ` and does not work like this `innerHTML="useSanitizerFunc(myData)"` — Marian07, Jan 03 '23 at 17:45

score 55 · Accepted Answer · edited Jan 28 '18 at 00:39

55

DEMO : https://plnkr.co/edit/Qke2jktna55h40ubUl8o?p=preview

import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    console.log(this.sanitized.bypassSecurityTrustHtml(value))
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div [innerHtml]="html | safeHtml">
    </div>
  `,
})
export class App {
  name:string;
  html: safeHtml;
  constructor() {
    this.name = 'Angular2'
    this.html = "<svg> blah </svg>";
  }
}

edited Jan 28 '18 at 00:39

Hakim

3,225
5
37
75

answered Oct 04 '16 at 17:08

micronyks

54,797
15
112
146

I have changed your svg to other svg to make it work. – micronyks Oct 04 '16 at 17:15
Thanks. good idea about the pipe, I've set it up like that and works. Not actually doing anything functionally different but who's complaining? It works. – Tom Oct 05 '16 at 09:20
Who is complaining means? – micronyks Oct 05 '16 at 13:24
It means I'm not complaining! Thanks for the help – Tom Oct 05 '16 at 20:52
If it solves the problem, accept answer so future reader will be able to get help. – micronyks Oct 06 '16 at 02:03
Done. Thanks for help – Tom Oct 07 '16 at 10:37
This does not work when the SVG contains attributes that will be dynamically updated e.g. [attr.fill]="getColor()" instead of attr.fill="yellow" e.g. https://plnkr.co/edit/dCJEomWsXqOYG181iUus?p=preview – vijayvithal Sep 12 '17 at 11:46
I am also having same issue, functions are not calling, just binding the html objects. – user1892203 Sep 28 '17 at 12:28
Does the sanitizers still works in angular 7? I am trying to load a script and it get shown but it does not get executed... – Gerardo Jaramillo Mar 14 '19 at 19:27
1

Because SVG can pose a security threat, it is highly recommended to sanitize the SVG beforehand. E.g. using https://github.com/cure53/DOMPurify – user857990 Jul 04 '19 at 14:48

score 1 · Answer 2 · edited Jul 16 '21 at 02:15

For that issue you can visit here

We can add custom sanitized pipe and use globally. If your HTML is not sanitized properly then inner html ignore svg, third party url etc. so we can fix it like below:

hero.component.html:

<div [innerHTML]="htmlString | sanitizedHtml"></div>

hero.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
    htmlString: any;

    constructor() { }

    ngOnInit(): void {
        this.htmlString = `
        <div class="container">
            <header class="blog-header py-3">
            <div class="row flex-nowrap justify-content-between align-items-center">
                <div class="col-4 pt-1">
                <a class="text-muted" href="#">Subscribe</a>
                </div>
                <div class="col-4 text-center">
                <a class="blog-header-logo text-dark" href="#">Large</a>
                </div>
                <div class="col-4 d-flex justify-content-end align-items-center">
                <a class="text-muted" href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
                </a>
                <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
                </div>
            </div>
            </header>
        </div>`;
    }
}

sanitized-html.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'

@Pipe({
    name: 'sanitizedHtml'
})
export class SanitizedHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}

    transform(value: any): any {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Output:

Careful, with `bypassSecurityTrustHtml` you are not sanitizing your html but the name of your pipe is implying that you are! You should call it "UnsafeHtmlPipe" or run it through `DomSanitizer.sanitize()` if possible! — Christof, May 19 '22 at 15:29

score 0 · Answer 3 · answered Oct 04 '16 at 17:00

0

Use DomSanitizer.bypassSecurityTrustHtml:

constructor(private sanitizer: DomSanitizer) {
}

let html = this.sanitizer.bypassSecurityTrustHtml("<svg> blah </svg>");

More information: https://angular.io/docs/ts/latest/guide/security.html#bypass-security-apis

answered Oct 04 '16 at 17:00

Andrei Zhytkevich

8,039
2
31
45

1

This is what the OP stated that he is using in his question. – mark Oct 06 '16 at 19:40
this worked for me in my current version. My issue wasn't what OP stated but I got what I came looking for. Many solutions suggested to use @Pipe and adding DOMSanitizer safeHTML but that's what I wanted to try last. With your solution, I was able to use DomSanitizer within my component file. Thanks Andrei. – Akhil Dec 17 '19 at 06:43
Literally this is exactly what the OP says he is doing, and that it is not working... – dudewad Mar 06 '22 at 00:49

score 0 · Answer 4 · answered Aug 12 '20 at 17:06

This can also be done via object bracket notation:

let safeHtml = this.domSanitizer.bypassSecurityTrustHtml(content);
console.log(safeHtml["changingThisBreaksApplicationSecurity");

Had to do this because safeHtml.changingThisBreaksApplicationSecurity didn't work for me.

Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG

4 Answers4

Linked