Setting to SafeHTML - Angular 2

Question

I have a div which id is "carID".

I need to do something like this:

magic(){
  //Safe Html is imported previously in the component
  document.getElementById('carID'): SafeHtml
}

So basically what I need is to change the type of my div to SafeHtml

Pipe

I have a Pipe:

import { Pipe, PipeTransform } from '@angular/core';
import * as jQuery from 'jquery';
import { escape } from 'querystring';
import { TestExecutionComponent } from './test-execution/test-execution.component';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

//import * as angular from '../angular.js';
//CAMBIAR a string
@Pipe({
  name: 'formatXml'
})
export class FormatXmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}

  testExecutionComponent: TestExecutionComponent;

  transform(xml: String): SafeHtml {
    var formatted = '';
    var reg = /(>)(<)(\/*)/g;
    xml = xml.replace(reg, '$1\r\n$2$3');
    var pad = 0;
    jQuery.each(xml.split('\r\n'), function (index, node) {
      var indent = 0;
      if (node.match(/.+<\/\w[^>]*>$/)) {
        indent = 0;
      } else if (node.match(/^<\/\w/)) {
        if (pad != 0) {
          pad -= 1;
        }
      } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
        indent = 1;
      } else {
        indent = 0;
      }

      var padding = '';
      for (var i = 0; i < pad; i++) {
        padding += '  ';
      }

      formatted += padding + node + '\r\n';
      pad += indent;
    });

    var escaped = formatted.replace(/&/g, '&amp;').replace(/</g, '<').replace(/>/g, '&gt;').replace(/ /g, '&nbsp;').replace(/\n/g, '<br />');
    // https://stackoverflow.com/questions/39240236/insert-xml-into-dom-in-angular-2
    let safeEscaped = this.sanitized.bypassSecurityTrustHtml(escaped);

    return safeEscaped;
    //let safeEscaped = this.sanitized.bypassSecurityTrustHtml(escaped);

//return safeEscaped;
  }
}

where I use bypassSecurityTrustHtml with the string.

Component

  <div id="carDiv" class="table-responsive">
                <table class="table table-bordred table-striped ">
                  <tbody *ngIf="cars">
                    <tr *ngFor="let car of cars; let i = index;">
                      <td *ngIf="i==_rowToShow" [innerHTML]="car.ID| formatXml"></td>
                    </tr>
                  </tbody>
                </table>
              </div>

My code is working. I call from the HTML file to my Pipe, and I get the answer. The problem is that when I print it on the div, the string keeps being the same (no format).

I have read that I need to:

• First: Use bypassSecurityTrustHtml on the string
• Second: Print it on a SafeHtml

The post that I am checking is the following: Here

I have made the 1st step, so I guess that right now what I need is to use SafeHtml for the Div.How can I do it?

Answer 1

update

The last 2 lines should be

let safeEscaped = this.sanitized.bypassSecurityTrustHtml(escaped);

return safeEscaped;

original

This might do what you want

class MyComponent {
  constructor(private sanitizer:DomSanitizer){}

    magic(){
      var safe = this.sanitizer.bypassSecurityTrustHtml(document.getElementById('carID').outerHTML);
    }
}

but depending on what the fetched element contains this might be security wise Harakiri with run-up.

Answer 2

Check out this open-source sanitize HTML library for sanitizing the HTML content.

sanitize-html

sanitize-HTML provides a simple HTML sanitizer with a clear API.

sanitize-HTML is tolerant. It is well suited for cleaning up HTML fragments such as those created by CKEditor and other rich text editors. It is especially handy for removing unwanted CSS when copying and pasting from Word.

e.g:

<div [innerHTML]="senitizeHtmlContent(htmlContent)"></div>

senitizeHtmlContent(value){

  const html = sanitizeHtml(value);

  return html;

}