Angular 2 html injection output a string instead of html element

Question

i try to inject html content from a class but instead the result i get is a string instead of the html element, what am i doing wrong?

angular version : angular-cli: 1.0.0-beta.20-4

html content:

<div [ngStyle]=getStyles()>{{getData()}}</div>

getData() return value:

"<span style='color:#5999B6'>this.data</span>"

this.data is a string

how does your getData() function looks like? what are you actually returning? — Osman Cea
– Osman Cea, Commented Dec 29, 2017 at 12:52

Sandip Jaiswal · Accepted Answer · 2017-12-29 12:55:54Z

2

Angular don't allow direct injection of HTML in template for security reason. You need to sanitize your html. Follow following url to sanitize your HTML. https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90

Hope it will help

answered Dec 29, 2017 at 12:55

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

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

1 Comment

Supamiu Over a year ago

In fact, it does, I'm using it in production ^^. The issue is that the topic you linked asks to bypass the sanitization before injecting the string to template. If this string is linked to a user input, it'll lead to XSS injection for sure. The sanitizer is supposed to be here for that.

Supamiu · Accepted Answer · 2017-12-29 12:55:48Z

0

You want to bind html using innerHTML:

<div [ngStyle]="getStyles()" [innerHTML]="getData()"></div>

But BE CAREFUL, you have to have full control over the html returned by getData() to avoid XSS issues.

answered Dec 29, 2017 at 12:55

Supamiu

8,7417 gold badges47 silver badges79 bronze badges

Collectives™ on Stack Overflow

Angular 2 html injection output a string instead of html element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related