Angular 中如何顯示 HTML 文本

我們都知道，如果使用兩個大括號{{ }}, 可以將 .ts 中的變量在網頁上作顯示, 但是在進行數據綁定時默認是以文本的形式輸出，也就是說, 如果變量中有 HTML 標籤的話，默認是不轉譯的，直接以標籤的形式顯示，這樣防止了XSS腳本注入攻擊。

XSS攻擊指的是通過對網頁註入可執行客戶端代碼且成功地被瀏覽器執行，來達到攻擊的目的，形成了一次有效XSS攻擊，一旦攻擊成功，它可能會獲取到用戶的一些敏感信息、改變用戶的體驗、誘導用戶等非法行為。


AngularJS 提供了 ng-bind-html 指令來動態綁定HTML文本，但是; 這個指令 (ng-bind-html ) 在 Angular 2.0 以後已經不再支持了, 而是改用 innerHtml 屬性賦值的方式。


.ts

htmlData: string = '';

this.htmlData = '<div>this system test</div>';




.html

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



實際使用時發現 HTML 片段中的樣式 CSS 會被忽略




解決方法：

可使用 DomSanitizer 將其轉化一下。這裡定義了一個 Pipe，具體如下：

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

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

則可以實現對展示內容的自定義樣式。

htmlStr = `

<h1>innerHtml內容</h1>
<h2 style="color: #1b75bb;">自定義樣式</h2>
<div htmlstr="" innerhtml="" safehtml="">
`;