insert html without using innerHTML angular2

Question

Seems not safe to use innerHTML, there is another technique to inject or insert HTML from an array?

let's said I've an array with html content, like:

        const ItemSections: ItemSection[] = [
            {
                heading: "Lorem",
                SectionHTML: `
                    <h3>Lorem ipsum dolor sit amet</h3>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>,
                id: "Lorem"
            },
            {
                heading: "ipsum",
                SectionHTML: `
                    <h3>Ipsum amet</h3>
                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>,
                id: "ipsum"
            }
        ];

template of component

        <section class="row" *ngFor="let section of lItemSection">
                    <aside class="col-md-4 col-xs-12">
                        <h3>{{section.heading}}</h3>
                    </aside><!-- /col -->
                    <aside class="col-md-8 col-xs-12">
                         <p>{{section.SectionHTML}}</p>
                    </aside><!-- /col -->
        </section>

However, the technique above render html tags

if I use the innerHTML works great, like:

                        <div [innerHTML]="section.SectionHTML"></div>

but exposes the app to XSS security risks!

suggestions??

Looks like your `SectionHTML` is comming from as data from some service call. Make sure when capturing those data validate it properly before saving it to database. Then you can use innerHTML. — Partha Sarathi Ghosh, Mar 20 '17 at 13:07
at the moment is called from the actual component, not from a service call — jcdsr, Mar 20 '17 at 13:09
That means it is static on component. Then you can easily use innerHTML I belive. Any way your component is in client side. So it does not matter I think. — Partha Sarathi Ghosh, Mar 20 '17 at 13:13

score -1 · Answer 1 · edited May 23 '17 at 10:31

-1

Angular sanitizes HTML added using [innerHTML]. You need to use DomSanitizer to get potentially dangerous content into the DOM this way.

insert html without using innerHTML angular2

1 Answers1