CODEWITHSUNDEEP
angularangular-dom-sanitizer
Tom
Tom

Reputation: 1507

Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG

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...

Upvotes: 39

Views: 70409

Answers (5)

Devesh Choudhary
Devesh Choudhary

Reputation: 7

  constructor(private sanitizer: DomSanitizer) {
this.signInFields = signInFields.map(link => ({
  ...link,
  icon: link.icon ? this.sanitizer.bypassSecurityTrustHtml(link.icon) : undefined
}));
}

It worked for me.

Upvotes: 0

KK Nebula
KK Nebula

Reputation: 129

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: enter image description here

Upvotes: 1

Eric
Eric

Reputation: 646

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.

Upvotes: 0

micronyks
micronyks

Reputation: 55443

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>";
  }
}

Upvotes: 56

Andrei Zhytkevich
Andrei Zhytkevich

Reputation: 8099

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

Upvotes: 0

Related Questions