自定義

默認(rèn)情況下，Sanitizer 實(shí)例僅用于防止 XSS 攻擊。但是，在某些情況下，可能需要自定義配置的清理器。接下來，下面來看看如何自定義 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 沒有任何參數(shù)且沒有明確定義的配置，則將應(yīng)用默認(rèn)配置值。

瀏覽器支持

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

圖片

三、第三方庫

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

DOMPurify

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

可以通過以下步驟來使用 DOMPurify：

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

npm install dompurify

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

import DOMPurify from 'dompurify';

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

import React from 'react';

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

  return 
;
};

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

DOMPurify提供了一些選項(xiàng)和配置，可以使用這些選項(xiàng)來自定義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，通過覆蓋ALLOWED_TAGS和ATTRIBUTES來應(yīng)用自定義的白名單和屬性規(guī)則。最后，使用DOMPurify.sanitize()方法，并傳入用戶輸入的HTML和自定義選項(xiàng)myOptions，DOMPurify 會(huì)根據(jù)自定義規(guī)則進(jìn)行過濾和凈化。

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

js-xss

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

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

可以通過以下步驟來使用 js-xss：

1. 安裝js-xss庫：通過npm或yarn安裝js-xss庫。

npm install xss

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

import xss from 'xss';

1. 使用js-xss過濾HTML內(nèi)容：在需要過濾HTML的地方，調(diào)用js-xss的方法來凈化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屬性來渲染HTML內(nèi)容。通過調(diào)用xss()函數(shù)并傳入用戶輸入的HTML，我們可以將其過濾和凈化，并將結(jié)果設(shè)置為組件的內(nèi)容。

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

import xss from 'xss';

// 創(chuàng)建自定義WhiteList過濾規(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ī)則
};

const userInput = '
Hello, World!
Example';

const cleanedHtml = xss(userInput, myOptions);

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

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

sanitize-html

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

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

可以通過以下步驟來使用 sanitize-html：

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

npm install sanitize-html

1. 在組件中引入sanitize-html庫：

import sanitizeHtml from 'sanitize-html';

1. 在組件中使用sanitizeHtml函數(shù)來凈化和過濾HTML代碼。例如，您以將用戶輸入的HTML存儲(chǔ)在組件的狀態(tài)或?qū)傩灾校⒃阡秩緯r(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)過凈化的HTML代碼渲染到頁面上。

可以使用sanitize-html提供的sanitize函數(shù)并傳遞一個(gè)配置對(duì)象作為參數(shù)來自定義sanitize-html的配置，配置對(duì)象可以包含一系列選項(xiàng)，用于定義過濾規(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ī)則和選項(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)行過濾和凈化，并返回經(jīng)過凈化后的HTML代碼。

網(wǎng)站名稱：前端如何安全的渲染HTML字符串?
網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/djgcoge.html

其他資訊

• BreakingPoint推出助力財(cái)富1000企業(yè)鞏固網(wǎng)絡(luò)基礎(chǔ)架構(gòu)
• 你想看的都在這里了：八大領(lǐng)域245家新零售企業(yè)網(wǎng)絡(luò)安全狀況
• 設(shè)置無線路由器出現(xiàn)網(wǎng)絡(luò)異常
• 做百度喜歡的標(biāo)準(zhǔn)網(wǎng)站應(yīng)該符合的七大原則
• 虛擬主機(jī)注冊(cè)過程

快速導(dǎo)航

• 品牌網(wǎng)站定制
• 力比特機(jī)械
• 做網(wǎng)站
• 成都發(fā)電機(jī)維修
• 四川艾名斯
• 成都電動(dòng)叉車公司
• 溫江網(wǎng)站制作
• scxhyhdbf.cn
• 全網(wǎng)整合營銷推廣
• 成都主機(jī)租用
• 成都戶外大屏廣告

友情鏈接

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

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

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

聯(lián)系方式

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

公司名稱：四川綿陽平武網(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)站