1

I want to enhance this text by making the color red:

free.booking = "<span class='start-property-text' style='color:#ff0000;'>Very bad!</span>"

On the page I inject it into html:

<span ng-bind-html="free.booking"></span>

But in the browser it only renders:

<span ng-bind-html="free.booking" class="ng-binding">
     <span class="start-property-text">Never had booking!</span>
</span>

What happened to my style='color:#ff0000;' ??

torbenrudgaard
  • 2,375
  • 7
  • 32
  • 53

1 Answers1

1

Use $sce of ngSanitize module. This is to make sure that the html can be trusted and to prevent any vulnerable XSS attacks.

free.booking = "<span class='start-property-text' style='color:#ff0000;'>Very bad!</span>"
free.booking = $sce.trustAsHtml(free.booking)

For more info: https://docs.angularjs.org/api/ng/service/$sce

Vivz
  • 6,625
  • 2
  • 17
  • 33
  • Vivz is it because it considers the style unsafe or? – torbenrudgaard Aug 23 '17 at 09:41
  • Yeah, it will consider the html as unsafe . You can refer https://stackoverflow.com/questions/9381926/insert-html-into-view and https://docs.angularjs.org/api/ng/service/$sce for more info – Vivz Aug 23 '17 at 09:44
  • Great Vivz - thanks for the info - and I understand the reason hehe - back in 2000 we used to hack sites by injecting javascript into their styles from the browser address bar. And do the usual login box trick where ASP noobs didnt filter the code, so you would add a "or 1=1" to their SQL user validation query haha :-D – torbenrudgaard Aug 23 '17 at 10:03
  • Hehe Great. Glad to be of help :) – Vivz Aug 23 '17 at 10:28