Angular中innerHTML標籤的樣式不起作用詳解

一隻小彩筆發表於2019-06-17
AngularHTML

1.背景

         在最近angular的專案中,需要用到[innerHTML]標籤來指定一個div的樣式： 

1 //HTML部分
2 <div class="contents" [innerHTML]="contents"></div>
3 
4 //TS部分
5 contents = '<p>商品資訊欄位<br><span style="color:red;">商品資訊介紹</span></p>';

        但是上面的樣式並不起作用，在Chorme中檢視原始碼，發現style標籤的樣式在Angular編譯的時候被遮蔽掉。這是為什麼呢？客觀別急，請往下看。

2.解決方案

       先說解決方案，最後再分析出現這種問題的原因。修改上面的TS：

 //  在使用的頁面引入DomSanitizer 
 import { DomSanitizer } from '@angular/platform-browser';


//構造方法裡注入sanitizer物件
    constructor( private sanitizer: DomSanitizer
    ) { }

// 對HTML程式碼做處理
    this.contents= this.sanitizer.bypassSecurityTrustHtml("<p>W3商品資訊欄位<br><span style="color:red;">商品資訊介紹</span></p>");

　　這樣雖然可以解決問題，但是這樣做還不夠：

  • 程式碼冗餘繁雜：如果我們的contents內容過大，這樣我們的程式碼就顯得很亂，影響可讀性和美觀；
  • 不能複用：如果其他ts中也要用到innerHTML標籤，又要重新寫一遍上面的TS內容，沒有複用性；

      基於以上兩點，我們用自定義管道（pipe）來優化以上程式碼，使用ng generate pipe safe-html命令來生成一個pipe，並做適當的修改：

//  對safe-html.pipe.ts做適當修改

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);
    }
}

// 在使用innerHTML標籤的屬性裡使用以上safeHtml管道
<div class="contents" [innerHTML]="contents|safeHtml"></div>

3.原因及原理

           所以，為什麼會出現上面的問題呢？原來，Angular中預設將所有輸入值視為不受信任。當我們通過 property，attribute，樣式，類繫結或插值等方式，

   將一個值從模板中插入到DOM中時，Angular會自幫我們清除和轉義不受信任的值。在開頭的例子中，span標籤裡的樣式被遮蔽了，不信請看：

   　　

  Angular 在編譯的時候，會自動清理 HTML 輸入並轉義不安全的程式碼，因此在這種情況下，style被遮蔽，樣式失效。這時候如果需要將樣式片段渲染出來，

 就需要用到DomSanitizer了。DomSanitizer 可以把值淨化為在不同 DOM 上下文中的安全內容，來幫我們防範跨站指令碼攻擊（XSS）類的安全問題。

 

參考：https://angular.cn/api/platform-browser/DomSanitizer#description

　　

相關文章