Angular2의 입력을 검사합니다.

Angular2의 입력을 검사합니다.

이 질문에는 이미 다음과 같은 답이 있습니다.

각도 HTML 바인딩 (24개 답변)

마감됨7년 전에.

제 데이터베이스에서 제3자(안전하지 않을 수 있는) HTML 콘텐츠를 가져와 제 HTML 문서에 삽입하려고 합니다.

어떻게 하면 안전하게(XSS에 대한 보호) 할 수 있습니까?

Angular1.x에는 다음과 같은 것이 있었습니다.$sce입력을 삭제하려면 Angular2에서 어떻게 해야 합니까? Angular2는 기본적으로 자동으로 삭제하는 것으로 알고 있습니다. 맞나요?

다음과 같은 방법으로는 작동하지 않습니다.

<div class="foo">
    {{someBoundValueWithSafeHTML}} // I want HTML from db here
</div>

angular2 앱에 일반 HTML을 삽입하려면 다음을 사용할 수 있습니다.[innerHtml]지시의

<div [innerHtml]="htmlProperty"></div>

이것은 독자적인 구성 요소와 지침을 가진 HTML에서는 작동하지 않을 것입니다. 적어도 당신이 예상하는 방식으로는 작동하지 않습니다.

하지만 안전하지 않은 HTML 경고가 표시되면 신뢰해야 합니다.HTML주입하기 전에 먼저.당신은 그런 것을 위해 그것을 사용해야 합니다.예를 들면.<h3>요소가 안전한 것으로 간주됩니다.안<input>요소가 아닙니다.

export class AppComponent  {

    private _htmlProperty: string = '<input type="text" name="name">';

    public get htmlProperty() : SafeHtml {
       return this.sr.bypassSecurityTrustHtml(this._htmlProperty);
    }

    constructor(private sr: DomSanitizer){}
}

템플릿을 다음과 같이 유지합니다.

<div [innerHtml]="htmlProperty"></div>

하지만 약간의 경고:

경고: 신뢰할 수 없는 사용자 데이터를 사용하여 이 메서드를 호출하면 응용 프로그램이 XSS 보안 위험에 노출됩니다!

이 기술을 더 사용할 계획이라면 이 작업을 수행하기 위해 a를 작성해 볼 수 있습니다.

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
    name: 'trustHtml'
})
export class TrustHtmlPipe implements PipeTransform  {    
   constructor(readonly sr: DomSanitizer){}  

   transform(html: string) : SafeHtml {
      return this.sr.bypassSecurityTrustHtml(html); 
   } 
} 

만약 당신이 이런 파이프를 가지고 있다면, 당신의AppComponent이것으로 변경됩니다.당신의 선언 배열에 파이프를 추가하는 것을 잊지 마세요.NgModule:

@Component({
   selector: 'app',
   template: `<div [innerHtml]="htmlProperty | trustHtml"></div>`
})
export class AppComponent{

    public htmlProperty: string = '<input type="text" name="name">';

} 

또는 a를 작성하여 동일하게 할 수 있습니다.

@Directive({
   selector: '[trustHtml]'
})
export class SanitizeHtmlDirective {

    @Input()
    public set trustHtml(trustHtml: string) {
      if (this._trustHtml !== trustHtml) {
        this._trustHtml = trustHtml;
        this.innerHtml = this.sr.bypassSecurityTrustHtml(this.trustHtml);
      }
    }

    @HostBinding('innerHtml')
    innerHtml?: SafeHtml;

    private _trustHtml: string;

    constructor(readonly sr: DomSanitizer){}
}

만약 당신이 이런 지시를 가지고 있다면, 당신의AppComponent이것으로 변경됩니다.지침을 선언 배열에 추가하는 것을 잊지 마십시오.NgModule:

@Component({
   selector: 'app',
   template: `<div [trustHtml]="htmlProperty"></div>`
})
export class AppComponent{

    public htmlProperty: string = '<input type="text" name="name">';

} 

언급URL : https://stackoverflow.com/questions/34467000/sanitize-input-in-angular2