menu

Questions & Answers

How to correctly "bypass" Angular Sanitization?

I have an input type=text where my user will type his own HTML template.
I have a button that opens a modal which shows the formatted html as a "preview html template".

Whenever the user Clicks on my preview_button, it opens a modal that shows the html the user typed before. This is part of the modal, this is how I'm inserting the html:

<div class="flexBox mg-2">
  <span [innerHTML]="my.element.text"></span>
</div>

Although it is working and showing the text correctly. It doesn't allow me to use style formatting. So If my user write this on the text_input

<h1 style="color:red;">Hello World</h1>

When the modal opens, I can see the text but not the color styling.

I found a few topics here suggesting to use this.sanitizer.bypassSecurityTrustHtml, but I also read its kind of dangerous and also it messes all my pages style up, so I can't use it.
And a few examples showing how to do this with a static html(on class constructor).

Any good/correct/safe way to do it when the html is dynamic?

Comments:
2023-01-18 19:42:03
I also read its kind of dangerous - bypassSecurityTrustHtml is no more dangerous than other methods of letting user write html
2023-01-18 19:42:03
also it messes all my pages style up - weird, it shouldn't happen
Answers(0) :