DomSanitizerのbypasssecuritytrustが機能しません（角2）

Question

私の問題は次のとおりです。私はサービスから、HTMLページ全体を返信する必要があります。これを行うと、私はクロスサイトスクリプティングの犠牲者になるかもしれないと考えているので、これはAngularの問題です。私がHTMLを取得したソースは信頼されているので、ホワイトリストにしたい、あるいは何らかの方法でサニタイザをバイパスしてユーザに表示したいと思っていました。

私はに走った問題は、私は取得ファイルには、「スタイル」と「スクリプト」タグDOMを操作するための、と私はバイパス機能を配置する方法に関係なく、何かが引っ掛かり呼び出し、全体が含まれていることです物が適切にレンダリングされません。 HTMLファイルを分離してそれを消去し、それを元に戻したり、別のものに戻したりする方法はありますか？

Answer 1

Angularの原則に反することは、を @angular/coreから使用して、コンポーネントまたはDOMのinnerhtmlにhtmlマークアップを追加することです。

サンプルappcomponent：

import { Component, ElementRef } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ``, 
}) 
export class AppComponent { 
    private htmlTemplate = ` 
    <div>Loading template</div> 
    <script type="text/javascript"> 
     console.log('loaded'); 
    </script> 
    `; 
    constructor(private elementRef: ElementRef) { } 

    ngAfterViewInit() { 
    let elem: Element = this.elementRef.nativeElement; 

    elem.innerHTML = this.htmlTemplate; 
    } 
} 

Answer 2

はこれを試してみてください：

import { DomSanitizer } from '@angular/platform-browser'; 
constructor(private sanitizer: DomSanitizer) { } 

//where you want to use the unsafe html 
const sanitizedHtml = this.sanitizer.bypassSecurityTrustResourceUrl(html);