Angular Security - Sanitization

string안에html tag가있고그것을화면에tag를적용하고싶으면

 

[innerHTML] 속성을사용하면된다.

 

ex) <td[innerHtml]="content?.reply">

 

 

Angular가innerHTML 속성을 이용해 출력한 결과는 불완전하다.

왜냐하면 Angular가 이들 요소를 잠재적인 위험 요소로 판단해 새니티제이션을 적용했기 때문이다.

새티니제이션은데이터내의잠재된위험요소를제거하는기능이다.

 

! angular 에서 팝업 및 데이터가 수시로 바뀌는 innerHTMLdmf 사용하는 경우에 

id 및 name에 대한 security에대한 경고가 콘솔에 나온다. 

그럴경우 새티니제이션을 예외적으로 허용 해줘야하는데 그 메서드가 bypassSecurityTrustHtml(v)이다.

 import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {
constructor(private _sanitizer:DomSanitizer) {
  }
transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

파이프를만들어준후사용해야한다.

 

 <td[innerHtml]="content?.reply | sanitizeHtml">

<!-- 2018년 8월 16일 추가 -->

sanitization의 사용 목적은 XSS(Cross-Site-Scripting) 공격을 예방하기 위함이다.

Angular에서는 Sanitization And Security Contexts의 다음과 같이 정의한다.

• HTML is used when interpreting a value as HTML, for example, when binding to innerHtml.
• Style is used when binding CSS into the style property.
• URL is used for URL properties, such as <a href>.
• Resource URL is a URL that will be loaded and executed as code, for example, in <script src>.

그리고 Sanitization을 사용하기 위해 위에서와 같이 DomSanitizer를 불러와 사용하는데 다음과 같은 함메서드들이 있다.

• bypassSecurityTrustHtml
• bypassSecurityTrustScript
• bypassSecurityTrustStyle
• bypassSecurityTrustUrl
• bypassSecurityTrustResourceUrl

좀 더 자세한 정보는 Angular에 있다.