自定義

默認(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 there`

new Sanitizer().sanitizeFor("div", str)
// 
hello there

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

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

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

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

const str = `hello there`

new Sanitizer().sanitizeFor("div", str)
// 
hello there

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

new Sanitizer({dropAttributes: {"id": ["span"]}}).sanitizeFor("div", str)
// 
hello there

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

const str = `hello there`

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


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

注意：如果創(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

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

import DOMPurify from 'dompurify';

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

import React from 'react';

const MyComponent = () => {
  const userInput = '
Hello, World!
';
  const cleanedHtml = DOMPurify.sanitize(userInput);

  return 
;
};

這里通過(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 = '
Hello, World!
Custom Content';

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

console.log(cleanedHtml);
// 輸出: 
Hello, World!
Custom Content

這里定義了一個(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()方法，并傳入用戶輸入的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ù)，可以凈化和轉(zhuǎn)義用戶輸入的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ì)用戶提交的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

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

import xss from 'xss';

1. 使用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 = '
Hello, World!
';
  const cleanedHtml = xss(userInput);

  return 
;
};

export default MyComponent;

這里在MyComponent組件中使用了dangerouslySetInnerHTML屬性來(lái)渲染HTML內(nèi)容。通過(guò)調(diào)用xss()函數(shù)并傳入用戶輸入的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 = '
Hello, World!
Example';

const cleanedHtml = xss(userInput, myOptions);

console.log(cleanedHtml);
// 輸出: 
Hello, World!
Example

這里定義了一個(gè)自定義的WhiteList過(guò)濾規(guī)則myCustomWhiteList，并將其傳遞給定義的選項(xiàng)myOptions。然后，調(diào)用xss()函數(shù)時(shí)傳入用戶輸入的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)清理用戶輸入的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

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

import sanitizeHtml from 'sanitize-html';

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

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

function MyComponent() {
  const userInput = '
Hello, World!
';
  const cleanedHtml = sanitizeHtml(userInput);

  return (
    

      

    
  );
}

這里在組件內(nèi)部定義了用戶輸入的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 = 'Hello World 

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

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

分享標(biāo)題：前端如何安全的渲染HTML字符串?
網(wǎng)頁(yè)URL：http://www.5511xx.com/article/djgcoge.html

其他資訊

• 織夢(mèng)手機(jī)端
• 12123機(jī)動(dòng)車轉(zhuǎn)籍一直顯示信息有誤？（備案轉(zhuǎn)入之后提交的是新的網(wǎng)站負(fù)責(zé)人信息轉(zhuǎn)入之后的數(shù)據(jù)是原來(lái)的）
• ECS怎么用
• C#實(shí)現(xiàn)日歷樣式的下拉式計(jì)算器
• juniper查看所有配置

快速導(dǎo)航

• hzjierui.cn
• 卡多尼人工智
• scyucang.com
• 柔性防護(hù)網(wǎng)
• 成都響應(yīng)式網(wǎng)站建設(shè)公司
• 四川發(fā)電機(jī)維修
• 營(yíng)銷網(wǎng)站建設(shè)
• VI設(shè)計(jì)
• 佑馨產(chǎn)后護(hù)理
• 成都網(wǎng)站設(shè)計(jì)
• 成都茶葉包裝

友情鏈接

網(wǎng)站制作 網(wǎng)站建設(shè) 網(wǎng)絡(luò)推廣 網(wǎng)站推廣 小程序開(kāi)發(fā) 網(wǎng)站導(dǎo)航

網(wǎng)站建設(shè)

• 四川平武建站
• 網(wǎng)站導(dǎo)航

聯(lián)系方式

• 企業(yè)：四川綿陽(yáng)平武網(wǎng)站建設(shè)工作室
• 地址：成都市青羊區(qū)太升南路288號(hào)
• 電話：18980820575
• 網(wǎng)址：www.5511xx.com

公司名稱：四川綿陽(yáng)平武網(wǎng)站建設(shè)工作室 聯(lián)系電話：18980820575

網(wǎng)站備案號(hào)：蜀ICP備2024061352號(hào)-3

四川平武建站 四川平武網(wǎng)站建設(shè) 四川平武網(wǎng)站設(shè)計(jì) 四川平武網(wǎng)站制作 成都做網(wǎng)站