Question

使用innerHTML似乎不安全，还有另一种从数组中注入或插入HTML的技术吗？

让我说我有一个包含html内容的数组，例如：

        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"
            }
        ];

组件模板

        <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>

但是，上面的技术渲染了html标签

如果我使用innerHTML很有用，比如：

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

但是将应用暴露给XSS安全风险！

建议??

Answer 1

Angular清理使用[innerHTML]添加的HTML。您需要使用DomSanitizer以这种方式将潜在危险的内容放入DOM中。

另见

不使用innerHTML angular2插入html

1 个答案: