Angular에서 innerHTML 속성 바인딩을 사용하는 방법

소개

Angular 2+는 HTML을 렌더링하는 [innerHTML] 속성 바인딩을 지원합니다. 달리 보간을 사용하는 경우 문자열로 처리됩니다.

이 문서에서는 [innerHTML]을 사용하는 방법과 사용에 대한 몇 가지 고려 사항을 제공합니다.

전제 조건

이 기사를 따라 하려면 다음이 필요합니다.

• Angular 속성 바인딩에 익숙하면 도움이 될 수 있습니다.

1단계 — innerHTML 사용

이 문서의 목적을 위해 일반 텍스트와 HTML 엔터티 및 요소의 혼합으로 구성된 문자열이 포함된 구성 요소로 작업한다고 가정합니다.

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example &amp; <strong>Bold Text Example</strong>';
}

이 문자열에 보간법을 사용하는 템플릿을 고려해 보겠습니다.

<div>{{ htmlStr }}</div>

컴파일 후 이 코드는 결과를 생성합니다.

일반 텍스트 예제 & 굵은 텍스트 예시

HTML 엔터티 및 HTML 요소는 렌더링되지 않습니다.

이제 이 문자열에 [innerHTML] 속성 바인딩을 사용하는 템플릿을 고려해 보겠습니다.

<div [innerHTML]="htmlStr"></div>

재컴파일 후 이 코드는 다음과 같은 결과를 생성합니다.

일반 텍스트 예시 및 굵은 텍스트 예시

HTML 엔터티와 HTML 요소가 렌더링되는지 확인합니다.

2단계 - 제한 이해

HTML 렌더링은 일반적으로 XSS(Cross-Site Scripting)를 도입할 가능성이 있습니다. 렌더링된 HTML에는 보안 문제를 나타내는 악성 스크립트가 포함될 수 있습니다.

XSS를 해결하는 한 가지 방법은 HTML 요소 및 속성의 종류를 알려진 "안전한\ 요소 및 속성 집합으로 제한하는 것입니다.

백그라운드에서 [innerHTML]은 승인된 HTML 요소 및 속성 목록을 사용하는 Angular의 DomSanitizer를 사용합니다.

참고: 승인된 HTML 요소 및 속성의 전체 목록은 html_sanitizer.ts에서 확인할 수 있습니다.

이렇게 하면 [innerHTML] 값이 <script> 및 <style> 태그와 style 속성을 사용하지 못하도록 제한됩니다. [innerHTML] 사용을 선택할 때 이 제한 사항을 염두에 두십시오.

결론

이 기사에서는 Angular 2+의 [innerHTML] 속성 바인딩을 소개했습니다. 문자열에 포함된 HTML 마크업을 렌더링하게 됩니다.

Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하세요.