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?

Why would you need to do that?

Günter Zöchbauer
– Günter Zöchbauer

2018-01-26 13:44:43 +00:00
Commented Jan 26, 2018 at 13:44 — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 26, 2018 at 13:44
Sorry, can't make sense of your comment.

Günter Zöchbauer
– Günter Zöchbauer

2018-01-26 13:48:23 +00:00
Commented Jan 26, 2018 at 13:48 — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 26, 2018 at 13:48

Günter Zöchbauer · Accepted Answer · 2018-01-26 14:00:24Z

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.

edited Jan 26, 2018 at 14:00

answered Jan 26, 2018 at 13:47

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

bellotas Over a year ago

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 --> stackoverflow.com/questions/39240236/… . So I have already the string, now I need the HTML Div

Günter Zöchbauer Over a year ago

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 Over a year ago

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.

bellotas Over a year ago

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

Günter Zöchbauer Over a year ago

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

|

Safyan Yaqoob · Accepted Answer · 2022-04-04 12:32:58Z

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;

}

answered Apr 4, 2022 at 12:32

Safyan Yaqoob

5523 silver badges14 bronze badges

Collectives™ on Stack Overflow

Setting to SafeHTML - Angular 2

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related