在現(xiàn)代的Web 應(yīng)用中，動(dòng)態(tài)生成和渲染 HTML 字符串是很常見(jiàn)的需求。然而，不正確地渲染HTML字符串可能會(huì)導(dǎo)致安全漏洞，例如跨站腳本攻擊（XSS）。為了確保應(yīng)用的安全性，我們需要采取一些措施來(lái)在安全的環(huán)境下渲染HTML字符串。本文將介紹一些安全渲染 HTML 字符串的最佳實(shí)踐，以幫助你有效地避免潛在的安全風(fēng)險(xiǎn)。

一、常見(jiàn)渲染方式

首先來(lái)看一下如何在 HTML、React、Vue、Angular 中渲染HTML字符串。

HTML

在HTML中渲染HTML字符串，可以使用原生JavaScript的innerHTML屬性或者創(chuàng)建元素節(jié)點(diǎn)并使用appendChild()方法來(lái)實(shí)現(xiàn)。

1. 使用innerHTML屬性：可以通過(guò)獲取要渲染HTML的目標(biāo)元素，并將HTML字符串賦值給其innerHTML屬性來(lái)渲染HTML字符串。例如：

<div id="targetElement"></div>

<script>
  const htmlString = "<h1>Hello, World!</h1>";
  document.getElementById("targetElement").innerHTML = htmlString;
</script>

這將在<div id="targetElement"></div>內(nèi)部渲染出<h1>Hello, World!</h1>。

2. 創(chuàng)建元素節(jié)點(diǎn)和appendChild()方法：可以使用document.createElement()方法創(chuàng)建元素節(jié)點(diǎn)，并使用appendChild()方法將該節(jié)點(diǎn)添加到父元素中。例如：

<div id="targetElement"></div>

<script>
  const htmlString = "<h1>Hello, World!</h1>";
  const parentElement = document.getElementById("targetElement");
  const tempElement = document.createElement("div");
  tempElement.innerHTML = htmlString;

  while (tempElement.firstChild) {
    parentElement.appendChild(tempElement.firstChild);
  }
</script>

這將在<div id="targetElement"></div>內(nèi)部渲染出<h1>Hello, World!</h1>。

React

可以通過(guò)使用dangerouslySetInnerHTML屬性在 React 中渲染HTML字符串。但是，正如這個(gè)屬性的名字所言，它存在安全風(fēng)險(xiǎn)，HTML 不會(huì)被轉(zhuǎn)義，可能會(huì)導(dǎo)致XSS問(wèn)題，因此請(qǐng)慎重使用。

import React from 'react';

const MyComponent = () => {
  const htmlString = '<p>Hello, <strong>React</strong>!</p>';

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlString }} />
);
}

export default MyComponent;

這里將要渲染的HTML字符串存儲(chǔ)在htmlString變量中，并將其傳遞給dangerouslySetInnerHTML屬性的__html屬性。React會(huì)將該字符串作為HTML內(nèi)容插入到被渲染的組件中。

Vue

可以使用v-html指令在Vue中渲染HTML字符串。與在React中使用dangerouslySetInnerHTML類(lèi)似，使用v-html時(shí)需要格外小心。

<template>
  <div v-html="htmlString"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlString: '<p>Hello, <strong>Vue</strong>!</p>',
    };
  },
};
</script>

這里將要渲染的HTML字符串存儲(chǔ)在htmlString中，并通過(guò)v-html指令將其綁定到需要渲染的元素上（這里是<div>）。Vue會(huì)將htmlString中的字符串解析為HTML，并將其插入到被渲染的元素中。

Angular

可以使用[innerHTML]屬性在Angular中渲染 HTML 字符串。

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

這里將要渲染的HTML字符串存儲(chǔ)在名為htmlString的變量中，并將其綁定到[innerHTML]屬性上。Angular會(huì)將htmlString中的字符串解析為HTML，并將其插入到相應(yīng)的DOM節(jié)點(diǎn)中。

與其他框架相似，使用[innerHTML]屬性綁定時(shí)要特別小心。確保渲染的HTML字符串是可靠和安全的，避免直接從用戶(hù)輸入或不受信任的來(lái)源獲取HTML字符串，以防止XSS攻擊等安全問(wèn)題。

另外，Angular也提供了一些內(nèi)置的安全機(jī)制來(lái)幫助保護(hù)應(yīng)用免受安全威脅。例如，通過(guò)使用Angular的內(nèi)置管道（如DomSanitizer）對(duì)HTML字符串進(jìn)行轉(zhuǎn)義和驗(yàn)證，可以提高應(yīng)用的安全性。

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

@Component({
  selector: 'app-example',
  template: `
    <div [innerHTML]="getSafeHtml()"></div>
  `,
})
export class ExampleComponent {
  htmlString: string = '<p>Hello, <strong>Angular</strong>!</p>';

  constructor(private sanitizer: DomSanitizer) {}

  getSafeHtml(): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(this.htmlString);
  }
}

這里首先導(dǎo)入DomSanitizer和SafeHtml，這是Angular的內(nèi)置服務(wù)和類(lèi)型。然后，在組件中使用DomSanitizer通過(guò)調(diào)用bypassSecurityTrustHtml()方法對(duì)HTML字符串進(jìn)行轉(zhuǎn)義和驗(yàn)證。最后，將返回的SafeHtml對(duì)象綁定到[innerHTML]屬性上，以進(jìn)行安全的HTML渲染。

通過(guò)使用DomSanitizer服務(wù)，Angular會(huì)對(duì)HTML字符串進(jìn)行安全檢查，并只允許受信任的內(nèi)容進(jìn)行渲染，從而減少潛在的安全風(fēng)險(xiǎn)。

注意，在使用DomSanitizer時(shí)，確保只對(duì)受信任和經(jīng)過(guò)驗(yàn)證的HTML字符串進(jìn)行操作，并避免直接從用戶(hù)輸入或不受信任的來(lái)源獲取HTML字符串。這樣可以確保應(yīng)用的安全性，并防止?jié)撛诘腦SS攻擊等安全問(wèn)題。

二、HTML Sanitizer API

從上面的例子中可以看到，在常見(jiàn)的框架以及在HTML中渲染HTML字符串都存在一定的安全風(fēng)險(xiǎn)。當(dāng)將用戶(hù)提供的或不受信任的HTML字符串直接渲染到應(yīng)用中時(shí)，可能會(huì)導(dǎo)致跨站腳本攻擊（XSS）等安全漏洞。因此，在處理和渲染HTML字符串時(shí)，需要采取適當(dāng)?shù)陌踩胧﹣?lái)防止?jié)撛诘陌踩珕?wèn)題。

那 HTML 中有沒(méi)有方法可以讓我們安全的渲染 HTML 字符串呢？有，它就是 HTML Sanitizer API。不過(guò)這個(gè) API 目前仍然是實(shí)驗(yàn)性的，在主流瀏覽器都支持之前，盡量不要在生產(chǎn)環(huán)境使用。下面先來(lái)看看這個(gè) API 是怎么用的，為未來(lái)該 API 普遍可用做準(zhǔn)備。

是什么？

HTML Sanitizer API 在 2021 年初的草案規(guī)范中首次被宣布。它為網(wǎng)站上動(dòng)態(tài)更新的HTML提供原生瀏覽器支持，可以從中刪除惡意代碼?？梢允褂?HTML Sanitizer API 在將不安全的 HTML 字符串和 Document 或 DocumentFragment 對(duì)象插入到 DOM 中之前對(duì)其進(jìn)行清理和凈化。

構(gòu)建獨(dú)立的 API 來(lái)進(jìn)行清理的主要目標(biāo)是：

• 減少 Web 應(yīng)用中跨站腳本攻擊的攻擊面。
• 保證 HTML 輸出在當(dāng)前用戶(hù)代理中的安全性。
• 提高清理器的可用性并使其更方便使用。

HTML Sanitizer API 的出現(xiàn)旨在提供一種方便且安全的方式來(lái)處理和凈化 HTML，以減少潛在的安全風(fēng)險(xiǎn)，并提高用戶(hù)代理的安全性。

Sanitizer API 帶來(lái)了一系列新功能，用于字符串的凈化過(guò)程：

• 用戶(hù)輸入的凈化：該 API 的主要功能是接受并將字符串轉(zhuǎn)換為更安全的形式。這些轉(zhuǎn)換后的字符串不會(huì)意外執(zhí)行 JavaScript，并確保您的應(yīng)用程序受到跨站腳本攻擊的保護(hù)。
• 瀏覽器維護(hù)：此庫(kù)已預(yù)先安裝在瀏覽器中，并將在發(fā)現(xiàn)錯(cuò)誤或新的攻擊向量時(shí)進(jìn)行更新。因此，現(xiàn)在擁有了一個(gè)內(nèi)置的凈化器，無(wú)需導(dǎo)入任何外部庫(kù)。
• 安全且簡(jiǎn)單易用：將凈化操作轉(zhuǎn)移到瀏覽器中使其更加便捷、安全和快速。由于瀏覽器已經(jīng)具有強(qiáng)大而安全的解析器，它知道如何處理 DOM 中的每個(gè)活動(dòng)元素。與瀏覽器相比，用 JavaScript 開(kāi)發(fā)的外部解析器可能成本較高，并且很快就會(huì)過(guò)時(shí)。

怎么用？

使用 Sanitizer API 非常簡(jiǎn)單，只需使用 Sanitizer() 構(gòu)造函數(shù)實(shí)例化 Sanitizer 類(lèi)，并配置實(shí)例即可。

對(duì)于數(shù)據(jù)的凈化，該 API 提供了三個(gè)基本方法。讓我們看看應(yīng)該如何以及何時(shí)使用它們。

• 使用隱含上下文對(duì)字符串進(jìn)行凈化 

Element.setHTML() 用于解析和凈化字符串，并立即將其插入到 DOM 中。這適用于已知目標(biāo) DOM 元素并且 HTML 內(nèi)容以字符串形式存在的情況。

const $div = document.querySelector('div');
const user_input = `<em>Hello There</em><img src="" notallow=alert(0)>`;
const sanitizer = new Sanitizer() // Our Sanitizer

$div.setHTML(user_input, sanitizer); // <div><em>Hello There</em><img src=""></div>

這里想將 user_string 中的 HTML 插入到 id 為 target 的目標(biāo)元素中。也就是說(shuō)，希望實(shí)現(xiàn)得到與 target.innerHTML = value 相同的效果，但避免 XSS 風(fēng)險(xiǎn)。

• 使用給定上下文對(duì)字符串進(jìn)行凈化

Sanitizer.sanitizeFor() 用于解析、凈化和準(zhǔn)備字符串，以便稍后添加到 DOM 中。當(dāng) HTML 內(nèi)容以字符串形式存在，并且已知目標(biāo) DOM 元素類(lèi)型（例如 div、span）時(shí)，此方法最適用。

const user_input = `<em>Hello There</em><img src="" notallow=alert(0)>`
const sanitizer = new Sanitizer()

sanitizer.sanitizeFor("div", user_input) // HTMLDivElement <div>

Sanitizer.sanitizeFor()的第一個(gè)參數(shù)描述了此結(jié)果所用于的節(jié)點(diǎn)類(lèi)型。

在使用 sanitizeFor() 方法時(shí)，解析 HTML 字符串的結(jié)果取決于其所在的上下文/元素。例如，如果將包含 <td> 元素的 HTML 字符串插入到 <table> 元素中，則是允許的。但如果將其插入到 <div> 元素中，它將被移除。因此，在使用 Sanitizer.sanitizeFor() 方法時(shí)，必須將目標(biāo)元素的標(biāo)簽指定為參數(shù)。

sanitizeFor(element, input)

這里也可以使用 HTML 元素中的 .innerHTML 來(lái)獲取字符串形式的清理結(jié)果。

sanitizer.sanitizeFor("div", user_input).innerHTML // <em>Hello There</em><img src="">

• 使用節(jié)點(diǎn)進(jìn)行凈化

當(dāng)已經(jīng)有一個(gè)用戶(hù)可控的 DocumentFragment 時(shí)，可以使用 Sanitizer.sanitize() 方法對(duì) DOM 樹(shù)節(jié)點(diǎn)進(jìn)行凈化。

const sanitizer = new Sanitizer()
const $userDiv = ...;
$div.replaceChildren(s.sanitize($userDiv));

除此之外，Sanitizer API 還通過(guò)刪除和過(guò)濾屬性和標(biāo)簽來(lái)修改 HTML 字符串。例如，Sanitizer API：

• 刪除某些標(biāo)簽（script、marquee、head、frame、menu、object 等），但保留內(nèi)容標(biāo)簽。
• 刪除大多數(shù)屬性。只會(huì)保留 <a> 標(biāo)簽上的 href 和 <td>、<th> 標(biāo)簽上的 colspans，其他屬性將被刪除。
• 過(guò)濾可能引起腳本執(zhí)行的字符串。

自定義

默認(rèn)情況下，Sanitizer 實(shí)例僅用于防止 XSS 攻擊。但是，在某些情況下，可能需要自定義配置的清理器。接下來(lái)，下面來(lái)看看如何自定義 Sanitizer API。

如果想創(chuàng)建自定義的清理器配置，只需要?jiǎng)?chuàng)建一個(gè)配置對(duì)象，并在初始化 Sanitizer API 時(shí)將其傳遞給構(gòu)造函數(shù)即可。

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// 清理結(jié)果由配置定制
new Sanitizer(config)

以下配置參數(shù)定義了清理器應(yīng)如何處理給定元素的凈化結(jié)果。

• allowElements：指定清理器應(yīng)保留在輸入中的元素。
• blockElements：指定清理器應(yīng)從輸入中刪除但保留其子元素的元素。
• dropElements：指定清理器應(yīng)從輸入中刪除，包括其子元素在內(nèi)的元素。

const str = `hello <b><i>there</i></b>`

new Sanitizer().sanitizeFor("div", str)
// <div>hello <b><i>there</i></b></div>

new Sanitizer({allowElements: [ "b" ]}).sanitizeFor("div", str)
// <div>hello <b>there</b></div>

new Sanitizer({blockElements: [ "b" ]}).sanitizeFor("div", str)
// <div>hello <i>there</i></div>

new Sanitizer({allowElements: []}).sanitizeFor("div", str)
// <div>hello there</div>

使用 allowAttributes 和 dropAttributes 參數(shù)可以定義允許或刪除哪個(gè)屬性。

const str = `<span id=foo class=bar style="color: red">hello there</span>`

new Sanitizer().sanitizeFor("div", str)
// <div><span id="foo" class="bar" style="color: red">hello there</span></div>

new Sanitizer({allowAttributes: {"style": ["span"]}}).sanitizeFor("div", str)
// <div><span style="color: red">hello there</span></div>

new Sanitizer({dropAttributes: {"id": ["span"]}}).sanitizeFor("div", str)
// <div><span class="bar" style="color: red">hello there</span></div>

AllowCustomElements 參數(shù)允許或拒絕使用自定義元素。

const str = `<elem>hello there</elem>`

new Sanitizer().sanitizeFor("div", str);
// <div></div>

new Sanitizer({ allowCustomElements: true,
                allowElements: ["div", "elem"]
              }).sanitizeFor("div", str);
// <div><elem>hello there</elem></div>

注意：如果創(chuàng)建的 Sanitizer 沒(méi)有任何參數(shù)且沒(méi)有明確定義的配置，則將應(yīng)用默認(rèn)配置值。

瀏覽器支持

目前，瀏覽器對(duì) Sanitizer API 的支持有限，并且規(guī)范仍在制定中。該 API 仍處于實(shí)驗(yàn)階段，因此在生產(chǎn)中使用之前應(yīng)關(guān)注其變化進(jìn)展。

圖片

三、第三方庫(kù)

到這里我們就知道了，原生 API 和常用的前端框架都沒(méi)有提供可用的方式來(lái)安全的渲染HTML。在實(shí)際的開(kāi)發(fā)中，我們可以借助已有的第三方庫(kù)來(lái)安全的渲染 HTML，下面就來(lái)介紹幾個(gè)常用給的庫(kù)。

DOMPurify

DOMPurify 是一款流行的JavaScript庫(kù)，用于在瀏覽器環(huán)境下進(jìn)行HTML凈化和防止跨站腳本攻擊（XSS）。它通過(guò)移除惡意代碼、過(guò)濾危險(xiǎn)標(biāo)簽和屬性等方式來(lái)保護(hù)網(wǎng)頁(yè)免受XSS攻擊的威脅。DOMPurify使用了嚴(yán)格的解析和驗(yàn)證策略，并提供了可配置的選項(xiàng)，以便開(kāi)發(fā)人員根據(jù)自己的需求進(jìn)行定制。它可以輕松地集成到現(xiàn)有的Web應(yīng)用程序中，并且被廣泛認(rèn)為是一種安全可靠的HTML凈化解決方案。

可以通過(guò)以下步驟來(lái)使用 DOMPurify：

1. 首先，安裝DOMPurify庫(kù)。可以通過(guò)運(yùn)行以下命令來(lái)安裝它：

npm install dompurify

2. 在需要使用的組件文件中，引入DOMPurify庫(kù)：

import DOMPurify from 'dompurify';

3. 在組件的適當(dāng)位置，使用 DOMPurify 來(lái)凈化HTML字符串，下面以 React 為例：

import React from 'react';

const MyComponent = () => {
  const userInput = '<script>alert("XSS");</script><p>Hello, World!</p>';
  const cleanedHtml = DOMPurify.sanitize(userInput);

  return <div dangerouslySetInnerHTML={{ __html: cleanedHtml }}></div>;
};

這里通過(guò)在React組件的dangerouslySetInnerHTML屬性中傳遞凈化后的HTML內(nèi)容來(lái)顯示安全的HTML。

DOMPurify提供了一些選項(xiàng)和配置，可以使用這些選項(xiàng)來(lái)自定義DOMPurify的行為：

import DOMPurify from 'dompurify';

// 創(chuàng)建自定義的白名單（允許的標(biāo)簽和屬性）
const myCustomWhiteList = DOMPurify.sanitize.defaults.allowedTags.concat(['custom-tag']);
const myCustomAttributes = ['data-custom-attr'];

// 創(chuàng)建自定義選項(xiàng)
const myOptions = {
  ALLOWED_TAGS: myCustomWhiteList,
  ATTRIBUTES: {
    ...DOMPurify.sanitize.defaults.ALLOWED_ATTR,
    'custom-tag': myCustomAttributes,
  },
};

const userInput = '<script>alert("XSS");</script><p>Hello, World!</p><custom-tag data-custom-attr="custom-value">Custom Content</custom-tag>';

const cleanedHtml = DOMPurify.sanitize(userInput, myOptions);

console.log(cleanedHtml);
// 輸出: <p>Hello, World!</p><custom-tag data-custom-attr="custom-value">Custom Content</custom-tag>

這里定義了一個(gè)自定義的白名單myCustomWhiteList，包含了DOMPurify默認(rèn)的允許標(biāo)簽，并添加了一個(gè)名為custom-tag的自定義標(biāo)簽。我們還定義了一個(gè)包含自定義屬性data-custom-attr的對(duì)象myCustomAttributes。然后，創(chuàng)建了一個(gè)自定義選項(xiàng)myOptions，通過(guò)覆蓋ALLOWED_TAGS和ATTRIBUTES來(lái)應(yīng)用自定義的白名單和屬性規(guī)則。最后，使用DOMPurify.sanitize()方法，并傳入用戶(hù)輸入的HTML和自定義選項(xiàng)myOptions，DOMPurify 會(huì)根據(jù)自定義規(guī)則進(jìn)行過(guò)濾和凈化。

可以根據(jù)需要定義自己的白名單（允許的標(biāo)簽）和屬性，并在自定義選項(xiàng)中使用它們來(lái)自定義DOMPurify的行為。

js-xss

js-xss是一個(gè)JavaScript庫(kù)，用于防御和過(guò)濾跨站腳本攻擊（XSS）。它提供了一組方法和函數(shù)，可以?xún)艋娃D(zhuǎn)義用戶(hù)輸入的HTML內(nèi)容，以確保在瀏覽器環(huán)境中呈現(xiàn)的HTML是安全的。

js-xss庫(kù)使用白名單過(guò)濾器的概念來(lái)防御XSS攻擊。它定義了一組允許的HTML標(biāo)簽和屬性，同時(shí)還提供了一些選項(xiàng)和配置來(lái)定制過(guò)濾規(guī)則。使用js-xss，可以對(duì)用戶(hù)提交的HTML內(nèi)容進(jìn)行凈化，刪除或轉(zhuǎn)義所有潛在的危險(xiǎn)代碼，只保留安全的HTML標(biāo)簽和屬性。

可以通過(guò)以下步驟來(lái)使用 js-xss：

1. 安裝js-xss庫(kù)：通過(guò)npm或yarn安裝js-xss庫(kù)。

npm install xss

2. 導(dǎo)入js-xss庫(kù)：在React組件文件中導(dǎo)入js-xss庫(kù)。

import xss from 'xss';

3. 使用js-xss過(guò)濾HTML內(nèi)容：在需要過(guò)濾HTML的地方，調(diào)用js-xss的方法來(lái)凈化HTML。

import React from 'react';
import xss from 'xss';

const MyComponent = () => {
  const userInput = '<script>alert("XSS");</script><p>Hello, World!</p>';
  const cleanedHtml = xss(userInput);

  return <div dangerouslySetInnerHTML={{ __html: cleanedHtml }} />;
};

export default MyComponent;

這里在MyComponent組件中使用了dangerouslySetInnerHTML屬性來(lái)渲染HTML內(nèi)容。通過(guò)調(diào)用xss()函數(shù)并傳入用戶(hù)輸入的HTML，我們可以將其過(guò)濾和凈化，并將結(jié)果設(shè)置為組件的內(nèi)容。

js-xss庫(kù)提供了一些選項(xiàng)和配置，可以使用這些選項(xiàng)來(lái)定義自定義的過(guò)濾規(guī)則：

import xss from 'xss';

// 創(chuàng)建自定義WhiteList過(guò)濾規(guī)則
const myCustomWhiteList = {
  a: ['href', 'title', 'target'], // 只允許'a'標(biāo)簽的'href', 'title', 'target'屬性
  p: [], // 允許空白的'p'標(biāo)簽
  img: ['src', 'alt'], // 只允許'img'標(biāo)簽的'src', 'alt'屬性
};

// 創(chuàng)建自定義選項(xiàng)
const myOptions = {
  whiteList: myCustomWhiteList, // 使用自定義的WhiteList過(guò)濾規(guī)則
};

const userInput = '<script>alert("XSS");</script><p>Hello, World!</p><a  target="_blank">Example</a>';

const cleanedHtml = xss(userInput, myOptions);

console.log(cleanedHtml);
// 輸出: <p>Hello, World!</p><a  target="_blank">Example</a>

這里定義了一個(gè)自定義的WhiteList過(guò)濾規(guī)則myCustomWhiteList，并將其傳遞給定義的選項(xiàng)myOptions。然后，調(diào)用xss()函數(shù)時(shí)傳入用戶(hù)輸入的HTML和自定義選項(xiàng)，js-xss庫(kù)會(huì)根據(jù)自定義的規(guī)則進(jìn)行過(guò)濾和凈化。

sanitize-html

sanitize-html 是一個(gè)用于凈化和過(guò)濾HTML代碼的JavaScript庫(kù)。它被設(shè)計(jì)用于去除潛在的惡意或不安全的內(nèi)容，以及保護(hù)應(yīng)用程序免受跨站腳本攻擊（XSS）等安全漏洞的影響。它提供了一種簡(jiǎn)單而靈活的方式來(lái)清理用戶(hù)輸入的HTML代碼，以確保只有安全的標(biāo)簽、屬性和樣式保留下來(lái)，并且不包含任何惡意代碼或潛在的危險(xiǎn)內(nèi)容。

sanitize-html使用一個(gè)白名單（配置選項(xiàng)）來(lái)定義允許的標(biāo)簽、屬性和樣式，并將所有不在白名單內(nèi)的內(nèi)容進(jìn)行過(guò)濾和刪除。它還可以處理不匹配的標(biāo)簽、標(biāo)簽嵌套問(wèn)題和其他HTML相關(guān)的問(wèn)題。

可以通過(guò)以下步驟來(lái)使用 sanitize-html：

1. 在項(xiàng)目中安裝sanitize-html庫(kù)：

npm install sanitize-html

2. 在組件中引入sanitize-html庫(kù)：

import sanitizeHtml from 'sanitize-html';

3. 在組件中使用sanitizeHtml函數(shù)來(lái)凈化和過(guò)濾HTML代碼。例如，您以將用戶(hù)輸入的HTML存儲(chǔ)在組件的狀態(tài)或?qū)傩灾校⒃阡秩緯r(shí)應(yīng)用sanitizeHtml函數(shù)：

import React from 'react';
import sanitizeHtml from 'sanitize-html';

function MyComponent() {
  const userInput = '<script>alert("XSS");</script><p>Hello, World!</p>';
  const cleanedHtml = sanitizeHtml(userInput);

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: cleanedHtml }}></div>
    </div>
  );
}

這里在組件內(nèi)部定義了用戶(hù)輸入的HTML代碼，并使用sanitizeHtml函數(shù)對(duì)其進(jìn)行凈化。然后，使用dangerouslySetInnerHTML屬性將經(jīng)過(guò)凈化的HTML代碼渲染到頁(yè)面上。

可以使用sanitize-html提供的sanitize函數(shù)并傳遞一個(gè)配置對(duì)象作為參數(shù)來(lái)自定義sanitize-html的配置，配置對(duì)象可以包含一系列選項(xiàng)，用于定義過(guò)濾規(guī)則和允許的HTML標(biāo)簽和屬性等。

import sanitizeHtml from 'sanitize-html';

const customConfig = {
  allowedTags: ['b', 'i', 'u'], // 允許的標(biāo)簽
  allowedAttributes: {
    a: ['href'] // 允許的a標(biāo)簽屬性
  },
  allowedSchemes: ['http', 'https'], // 允許的URL協(xié)議
  allowedClasses: {
    b: ['bold', 'highlight'], // 允許的b標(biāo)簽的class
    i: ['italic'] // 允許的i標(biāo)簽的class
  },
  transformTags: {
    b: 'strong', // 將b標(biāo)簽轉(zhuǎn)換為strong標(biāo)簽
    i: 'em' // 將i標(biāo)簽轉(zhuǎn)換為em標(biāo)簽
  },
  nonTextTags: ['style', 'script', 'textarea', 'noscript'] // 不允許解析的標(biāo)簽
};

const userInput = '<b class="bold">Hello</b> <i class="italic">World</i> <a ;

const cleanedHtml = sanitizeHtml(userInput, customConfig);

這里創(chuàng)建了一個(gè)名為customConfig的配置對(duì)象，其中包含了一些自定義的過(guò)濾規(guī)則和選項(xiàng)。這個(gè)配置對(duì)象定義了允許的標(biāo)簽、允許的屬性、允許的URL協(xié)議、允許的CSS類(lèi)名、標(biāo)簽的轉(zhuǎn)換規(guī)則以及不允許解析的標(biāo)簽等。

然后，將用戶(hù)輸入的HTML代碼作為第一個(gè)參數(shù)傳遞給sanitizeHtml函數(shù)，并將customConfig作為第二個(gè)參數(shù)傳遞。sanitizeHtml函數(shù)將根據(jù)配置對(duì)象中定義的規(guī)則對(duì)HTML代碼進(jìn)行過(guò)濾和凈化，并返回經(jīng)過(guò)凈化后的HTML代碼。