俄羅斯：將審查iPhone等外國公司設備 保數據安全
iPhone和特斯拉都屬于在各自領域領頭羊的品牌，推出的產品也也都是數一數二的，但對于一些國家而言，它們的產品可靠性和安全性還是在限制范圍內。近日，俄羅斯聯邦通信、信息技術
在現代的Web 應用中，動態生成和渲染 HTML 字符串是很常見的需求。然而，不正確地渲染HTML字符串可能會導致安全漏洞，例如跨站腳本攻擊（XSS）。為了確保應用的安全性，我們需要采取一些措施來在安全的環境下渲染HTML字符串。本文將介紹一些安全渲染 HTML 字符串的最佳實踐，以幫助你有效地避免潛在的安全風險。
首先來看一下如何在 HTML、React、Vue、Angular 中渲染HTML字符串。
在HTML中渲染HTML字符串，可以使用原生JavaScript的innerHTML屬性或者創建元素節點并使用appendChild()方法來實現。
<id="targetElement"></div><script> const htmlString = "<h1>Hello, World!</h1>"; document.getElementById("targetElement").innerHTML = htmlString;</script>這將在<id="targetElement"></div>內部渲染出<h1>Hello, World!</h1>。
<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>這將在<id="targetElement"></div>內部渲染出<h1>Hello, World!</h1>。
可以通過使用dangerouslySetInnerHTML屬性在 React 中渲染HTML字符串。但是，正如這個屬性的名字所言，它存在安全風險，HTML 不會被轉義，可能會導致XSS問題，因此請慎重使用。
import React from 'react';const MyComponent = () => { const htmlString = '<p>Hello, <strong>React</strong>!</p>'; return ( <dangerouslySetInnerHTML={{ __html: htmlString }} />);}export default MyComponent;這里將要渲染的HTML字符串存儲在htmlString變量中，并將其傳遞給dangerouslySetInnerHTML屬性的__html屬性。React會將該字符串作為HTML內容插入到被渲染的組件中。
可以使用v-html指令在Vue中渲染HTML字符串。與在React中使用dangerouslySetInnerHTML類似，使用v-html時需要格外小心。
<template> <v-html="htmlString"></div></template><script>export default { data() { return { htmlString: '<p>Hello, <strong>Vue</strong>!</p>', }; },};</script>這里將要渲染的HTML字符串存儲在htmlString中，并通過v-html指令將其綁定到需要渲染的元素上（這里是<div>）。Vue會將htmlString中的字符串解析為HTML，并將其插入到被渲染的元素中。
可以使用[innerHTML]屬性在Angular中渲染 HTML 字符串。
<[innerHTML]="htmlString"></div>這里將要渲染的HTML字符串存儲在名為htmlString的變量中，并將其綁定到[innerHTML]屬性上。Angular會將htmlString中的字符串解析為HTML，并將其插入到相應的DOM節點中。
與其他框架相似，使用[innerHTML]屬性綁定時要特別小心。確保渲染的HTML字符串是可靠和安全的，避免直接從用戶輸入或不受信任的來源獲取HTML字符串，以防止XSS攻擊等安全問題。
另外，Angular也提供了一些內置的安全機制來幫助保護應用免受安全威脅。例如，通過使用Angular的內置管道（如DomSanitizer）對HTML字符串進行轉義和驗證，可以提高應用的安全性。
import { Component } from '@angular/core';import { DomSanitizer, SafeHtml } from '@angular/platform-browser';@Component({ selector: 'app-example', template: ` <[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); }}這里首先導入DomSanitizer和SafeHtml，這是Angular的內置服務和類型。然后，在組件中使用DomSanitizer通過調用bypassSecurityTrustHtml()方法對HTML字符串進行轉義和驗證。最后，將返回的SafeHtml對象綁定到[innerHTML]屬性上，以進行安全的HTML渲染。
通過使用DomSanitizer服務，Angular會對HTML字符串進行安全檢查，并只允許受信任的內容進行渲染，從而減少潛在的安全風險。
注意，在使用DomSanitizer時，確保只對受信任和經過驗證的HTML字符串進行操作，并避免直接從用戶輸入或不受信任的來源獲取HTML字符串。這樣可以確保應用的安全性，并防止潛在的XSS攻擊等安全問題。
從上面的例子中可以看到，在常見的框架以及在HTML中渲染HTML字符串都存在一定的安全風險。當將用戶提供的或不受信任的HTML字符串直接渲染到應用中時，可能會導致跨站腳本攻擊（XSS）等安全漏洞。因此，在處理和渲染HTML字符串時，需要采取適當的安全措施來防止潛在的安全問題。
那 HTML 中有沒有方法可以讓我們安全的渲染 HTML 字符串呢？有，它就是 HTML Sanitizer API。不過這個 API 目前仍然是實驗性的，在主流瀏覽器都支持之前，盡量不要在生產環境使用。下面先來看看這個 API 是怎么用的，為未來該 API 普遍可用做準備。
HTML Sanitizer API 在 2021 年初的草案規范中首次被宣布。它為網站上動態更新的HTML提供原生瀏覽器支持，可以從中刪除惡意代碼。可以使用 HTML Sanitizer API 在將不安全的 HTML 字符串和 Document 或 DocumentFragment 對象插入到 DOM 中之前對其進行清理和凈化。
構建獨立的 API 來進行清理的主要目標是：
HTML Sanitizer API 的出現旨在提供一種方便且安全的方式來處理和凈化 HTML，以減少潛在的安全風險，并提高用戶代理的安全性。
Sanitizer API 帶來了一系列新功能，用于字符串的凈化過程：
使用 Sanitizer API 非常簡單，只需使用 Sanitizer() 構造函數實例化 Sanitizer 類，并配置實例即可。
對于數據的凈化，該 API 提供了三個基本方法。讓我們看看應該如何以及何時使用它們。
Element.setHTML() 用于解析和凈化字符串，并立即將其插入到 DOM 中。這適用于已知目標 DOM 元素并且 HTML 內容以字符串形式存在的情況。
const $= 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 的目標元素中。也就是說，希望實現得到與 target.innerHTML = value 相同的效果，但避免 XSS 風險。
Sanitizer.sanitizeFor() 用于解析、凈化和準備字符串，以便稍后添加到 DOM 中。當 HTML 內容以字符串形式存在，并且已知目標 DOM 元素類型（例如 div、span）時，此方法最適用。
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()的第一個參數描述了此結果所用于的節點類型。
在使用 sanitizeFor() 方法時，解析 HTML 字符串的結果取決于其所在的上下文/元素。例如，如果將包含 <td> 元素的 HTML 字符串插入到 <table> 元素中，則是允許的。但如果將其插入到 <div> 元素中，它將被移除。因此，在使用 Sanitizer.sanitizeFor() 方法時，必須將目標元素的標簽指定為參數。
sanitizeFor(element, input)這里也可以使用 HTML 元素中的 .innerHTML 來獲取字符串形式的清理結果。
sanitizer.sanitizeFor("div", user_input).innerHTML // <em>Hello There</em><img src="">當已經有一個用戶可控的 DocumentFragment 時，可以使用 Sanitizer.sanitize() 方法對 DOM 樹節點進行凈化。
const sanitizer = new Sanitizer()const $userDiv = ...;$div.replaceChildren(s.sanitize($userDiv));除此之外，Sanitizer API 還通過刪除和過濾屬性和標簽來修改 HTML 字符串。例如，Sanitizer API：
默認情況下，Sanitizer 實例僅用于防止 XSS 攻擊。但是，在某些情況下，可能需要自定義配置的清理器。接下來，下面來看看如何自定義 Sanitizer API。
如果想創建自定義的清理器配置，只需要創建一個配置對象，并在初始化 Sanitizer API 時將其傳遞給構造函數即可。
const config = { allowElements: [], blockElements: [], dropElements: [], allowAttributes: {}, dropAttributes: {}, allowCustomElements: true, allowComments: true};// 清理結果由配置定制new Sanitizer(config)以下配置參數定義了清理器應如何處理給定元素的凈化結果。
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 參數可以定義允許或刪除哪個屬性。
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 參數允許或拒絕使用自定義元素。
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>注意：如果創建的 Sanitizer 沒有任何參數且沒有明確定義的配置，則將應用默認配置值。
目前，瀏覽器對 Sanitizer API 的支持有限，并且規范仍在制定中。該 API 仍處于實驗階段，因此在生產中使用之前應關注其變化進展。
圖片
到這里我們就知道了，原生 API 和常用的前端框架都沒有提供可用的方式來安全的渲染HTML。在實際的開發中，我們可以借助已有的第三方庫來安全的渲染 HTML，下面就來介紹幾個常用給的庫。
DOMPurify 是一款流行的JavaScript庫，用于在瀏覽器環境下進行HTML凈化和防止跨站腳本攻擊（XSS）。它通過移除惡意代碼、過濾危險標簽和屬性等方式來保護網頁免受XSS攻擊的威脅。DOMPurify使用了嚴格的解析和驗證策略，并提供了可配置的選項，以便開發人員根據自己的需求進行定制。它可以輕松地集成到現有的Web應用程序中，并且被廣泛認為是一種安全可靠的HTML凈化解決方案。
可以通過以下步驟來使用 DOMPurify：
npm install dompurifyimport DOMPurify from 'dompurify';import React from 'react';const MyComponent = () => { const userInput = '<script>alert("XSS");</script><p>Hello, World!</p>'; const cleanedHtml = DOMPurify.sanitize(userInput); return <dangerouslySetInnerHTML={{ __html: cleanedHtml }}></div>;};這里通過在React組件的dangerouslySetInnerHTML屬性中傳遞凈化后的HTML內容來顯示安全的HTML。
DOMPurify提供了一些選項和配置，可以使用這些選項來自定義DOMPurify的行為：
import DOMPurify from 'dompurify';// 創建自定義的白名單（允許的標簽和屬性）const myCustomWhiteList = DOMPurify.sanitize.defaults.allowedTags.concat(['custom-tag']);const myCustomAttributes = ['data-custom-attr'];// 創建自定義選項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>這里定義了一個自定義的白名單myCustomWhiteList，包含了DOMPurify默認的允許標簽，并添加了一個名為custom-tag的自定義標簽。我們還定義了一個包含自定義屬性data-custom-attr的對象myCustomAttributes。然后，創建了一個自定義選項myOptions，通過覆蓋ALLOWED_TAGS和ATTRIBUTES來應用自定義的白名單和屬性規則。最后，使用DOMPurify.sanitize()方法，并傳入用戶輸入的HTML和自定義選項myOptions，DOMPurify 會根據自定義規則進行過濾和凈化。
可以根據需要定義自己的白名單（允許的標簽）和屬性，并在自定義選項中使用它們來自定義DOMPurify的行為。
js-xss是一個JavaScript庫，用于防御和過濾跨站腳本攻擊（XSS）。它提供了一組方法和函數，可以凈化和轉義用戶輸入的HTML內容，以確保在瀏覽器環境中呈現的HTML是安全的。
js-xss庫使用白名單過濾器的概念來防御XSS攻擊。它定義了一組允許的HTML標簽和屬性，同時還提供了一些選項和配置來定制過濾規則。使用js-xss，可以對用戶提交的HTML內容進行凈化，刪除或轉義所有潛在的危險代碼，只保留安全的HTML標簽和屬性。
可以通過以下步驟來使用 js-xss：
npm install xssimport xss from 'xss';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 <dangerouslySetInnerHTML={{ __html: cleanedHtml }} />;};export default MyComponent;這里在MyComponent組件中使用了dangerouslySetInnerHTML屬性來渲染HTML內容。通過調用xss()函數并傳入用戶輸入的HTML，我們可以將其過濾和凈化，并將結果設置為組件的內容。
js-xss庫提供了一些選項和配置，可以使用這些選項來定義自定義的過濾規則：
import xss from 'xss';// 創建自定義WhiteList過濾規則const myCustomWhiteList = { a: ['href', 'title', 'target'], // 只允許'a'標簽的'href', 'title', 'target'屬性 p: [], // 允許空白的'p'標簽 img: ['src', 'alt'], // 只允許'img'標簽的'src', 'alt'屬性};// 創建自定義選項const myOptions = { whiteList: myCustomWhiteList, // 使用自定義的WhiteList過濾規則};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>這里定義了一個自定義的WhiteList過濾規則myCustomWhiteList，并將其傳遞給定義的選項myOptions。然后，調用xss()函數時傳入用戶輸入的HTML和自定義選項，js-xss庫會根據自定義的規則進行過濾和凈化。
sanitize-html 是一個用于凈化和過濾HTML代碼的JavaScript庫。它被設計用于去除潛在的惡意或不安全的內容，以及保護應用程序免受跨站腳本攻擊（XSS）等安全漏洞的影響。它提供了一種簡單而靈活的方式來清理用戶輸入的HTML代碼，以確保只有安全的標簽、屬性和樣式保留下來，并且不包含任何惡意代碼或潛在的危險內容。
sanitize-html使用一個白名單（配置選項）來定義允許的標簽、屬性和樣式，并將所有不在白名單內的內容進行過濾和刪除。它還可以處理不匹配的標簽、標簽嵌套問題和其他HTML相關的問題。
可以通過以下步驟來使用 sanitize-html：
npm install sanitize-htmlimport sanitizeHtml from 'sanitize-html';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> <dangerouslySetInnerHTML={{ __html: cleanedHtml }}></div> </div> );}這里在組件內部定義了用戶輸入的HTML代碼，并使用sanitizeHtml函數對其進行凈化。然后，使用dangerouslySetInnerHTML屬性將經過凈化的HTML代碼渲染到頁面上。
可以使用sanitize-html提供的sanitize函數并傳遞一個配置對象作為參數來自定義sanitize-html的配置，配置對象可以包含一系列選項，用于定義過濾規則和允許的HTML標簽和屬性等。
import sanitizeHtml from 'sanitize-html';const customConfig = { allowedTags: ['b', 'i', 'u'], // 允許的標簽 allowedAttributes: { a: ['href'] // 允許的a標簽屬性 }, allowedSchemes: ['http', 'https'], // 允許的URL協議 allowedClasses: { b: ['bold', 'highlight'], // 允許的b標簽的class i: ['italic'] // 允許的i標簽的class }, transformTags: { b: 'strong', // 將b標簽轉換為strong標簽 i: 'em' // 將i標簽轉換為em標簽 }, nonTextTags: ['style', 'script', 'textarea', 'noscript'] // 不允許解析的標簽};const userInput = '<b class="bold">Hello</b> <i class="italic">World</i> <a ;const cleanedHtml = sanitizeHtml(userInput, customConfig);這里創建了一個名為customConfig的配置對象，其中包含了一些自定義的過濾規則和選項。這個配置對象定義了允許的標簽、允許的屬性、允許的URL協議、允許的CSS類名、標簽的轉換規則以及不允許解析的標簽等。
然后，將用戶輸入的HTML代碼作為第一個參數傳遞給sanitizeHtml函數，并將customConfig作為第二個參數傳遞。sanitizeHtml函數將根據配置對象中定義的規則對HTML代碼進行過濾和凈化，并返回經過凈化后的HTML代碼。
本文鏈接：http://www.tebozhan.com/showinfo-26-5702-0.html前端如何安全的渲染HTML字符串?
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 時間序列去趨勢化和傅里葉變換
下一篇： 九個你不知道的 CSS 偽元素
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號