1

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?

Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278
bellotas
  • 2,349
  • 8
  • 29
  • 60

2 Answers2

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.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • This is what I have previously done, but if I m not wrong, I need to use SafeHtml in the Html (not the string) like here --> https://stackoverflow.com/questions/39240236/insert-xml-into-dom-in-angular-2 . So I have already the string, now I need the HTML Div – bellotas Jan 26 '18 at 13:53
  • Have you tried it? I don't know what you try to accomplish. If you have tried things you should mention that in the question with the result and why and how is didn't what you require. – Günter Zöchbauer Jan 26 '18 at 13:55
  • Your question still doesn't tell how your posted code doesn't do what you want. My guess is what I posted in my updated answer. – Günter Zöchbauer Jan 26 '18 at 14:00
  • If I do that, the last return says that I should not return a SafeHtml, just and string. I have changed (just in case it worked) to __export class FormatXmlPipe implements PipeTransform {__ , but it does not work. I have also re-edited the question – bellotas Jan 26 '18 at 14:10
  • That's becaues `transform(xml: string): string {` is declared to return a `string`. If you change it to `transform(xml: string): SafeHtml {` you should be fine – Günter Zöchbauer Jan 26 '18 at 14:11
  • I print the same text plus "SafeValue must use [property]=binding" and the beggining – bellotas Jan 26 '18 at 14:54
  • Sorry, I don't get your last comment, but you probably want `` – Günter Zöchbauer Jan 26 '18 at 14:56
  • I get nothing. I have re-uploaded the question with with updated code. Now i have the **SafeHtml** in the pipe, and in **InnerHTML** – bellotas Jan 26 '18 at 15:06
  • If you add `console.log(escaped);` before `let safeEscaped = ...` does it print to the console what you expect to be added to the DOM? Can you create a http://stackblitz.com reproduction? – Günter Zöchbauer Jan 26 '18 at 15:27
  • Yes I get the value. I ll create it tomorrow morning. Thanks for your help – bellotas Jan 26 '18 at 15:42
0

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;

}
Safyan Yaqoob
  • 444
  • 3
  • 11