How to get around the HTML sanitizer when inserting SVGs

Question

I'm trying to add buttons with svg-images to my Electron app using Angular2. I'm a complete Angular beginner and it feels like climbing a barbed wire fence right now.

I've finally managed to get it to insert the buttons but it's sanitizing away the svg images.

How do I insert the images without them being butchered?

Here's my code:

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

import { MenuBarButton } from './menu-bar-button';

const WINDOWBUTTONS: MenuBarButton[] = [
  { class: 'closeWindow',
    svg: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
      <line x1="61.6" y1="962" x2="961.6" y2="62" />
      <line x1="61.6" y1="62" x2="961.6" y2="962" />
    </svg>` },
  { class: 'maximizeWindow',
    svg: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
      <rect x="62" y="62" class="st0" width="900" height="900" />
    </svg>` },
  { class: 'unmaximizeWindow',
    svg: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
      <rect x="62" y="293.9" width="668.1" height="668.1"/>
      <polygon points="293.5 62.5 293.5 293.5 730.5 293.5 730.5 730.5 961.5 730.5 961.5 62.5 "/>
    </svg>` },
  { class: 'minimizeWindow',
    svg: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
      <line x1="62" y1="512.5" x2="962" y2="512.5" />
    </svg>` }
];

@Component({
  selector: 'window-buttons',
  template: `
  <div *ngFor="let btn of buttons" class="button {{btn.class}}" [innerHTML]="btn.svg">
  </div>
  `
})
export class WindowButtonsComponent {
  buttons = WINDOWBUTTONS;
}

Edit: Here's the code with the pipe thing. Originally I tried having it in a separate file but I wasn't sure how to properly include it so I moved it to the same file as I posted above.

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

import { MenuBarButton } from './menu-bar-button';

//New Pipe code
import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtml {
  constructor(private sanitizer:DomSanitizer){}

  transform(html: string) { //Error on this line
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}
//end of New Pipe code

const WINDOWBUTTONS: MenuBarButton[] = [
  <<<Same as above>>>
];

//Added '| safeHtml' to the template
@Component({
  selector: 'window-buttons',
  template: `
  <div *ngFor="let btn of buttons" class="button {{btn.class}}" [innerHTML]="btn.svg | safeHtml">
  </div>
  `
})
export class WindowButtonsComponent {
  buttons = WINDOWBUTTONS;
}

The error I get from typscript in full is this: Return type of public method from exported class has or is using name 'SafeHtml' from external module "D:/Dev/angularimgeviewer/node_modules/@angular/platform-browser/src/security/dom_sanitization_service" but cannot be named.

But it still seems to output a JS file. When I run it I get a wall of text in the console that just seem to say this in different ways:

zone.js:516 Unhandled Promise rejection: Template parse errors:

The pipe 'safeHtml' could not be found ("
  <div *ngFor="let btn of buttons" class="button {{btn.class}}" [ERROR ->][innerHTML]="btn.svg | safeHtml">
  </div>
  ")

Try a pipe like shown in http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax with `bypassSecurityTrustUrl` or `bypassSecurityTrustResourceUrl` — Günter Zöchbauer, Mar 01 '17 at 15:51
@GünterZöchbauer I'm getting `Property 'bypassSecurityTrustHtml' does not exist on type 'Sanitizer'` when trying that? — Blargmode, Mar 01 '17 at 16:19
Use `DomSanitizer` instead https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html — Günter Zöchbauer, Mar 01 '17 at 16:22
@GünterZöchbauer I'm stuck on `Return type of public method from exported class has or is using name 'SafeHtml' from external module "dom_sanitization_service" but cannot be named` on the transform line. — Blargmode, Mar 01 '17 at 17:05
@GünterZöchbauer I've added the code now, as well as a description of what's happening. — Blargmode, Mar 01 '17 at 18:09
Oh right, no I had not, It works now. Thanks for bearing with me! Still getting the typescript "error" but I guess I can ignore that since it works anyway. Btw I saw you changed your post to use DomSanitizer, but I think that's in '@angular/platform-browser' and not in core. — Blargmode, Mar 01 '17 at 18:50

How to get around the HTML sanitizer when inserting SVGs

0 Answers0