Sanitizer
Sanitizer 介面是 HTML Sanitizer API 的一部分，它定義了一個配置物件，用於指定在將 HTML 字串插入 Element 或 ShadowRoot 時，或者在將 HTML 字串解析為 Document 時，哪些元素、屬性和註釋是允許的或應該被移除的。
Sanitizer 例項本質上是 SanitizerConfig 的一個包裝器，可以在相同的 清理方法 中作為配置的替代項傳遞。
- 在
Element上的setHTML()或setHTMLUnsafe()。 - 在
ShadowRoot上的setHTML()或setHTMLUnsafe()。 - 靜態方法
Document.parseHTML()或Document.parseHTMLUnsafe()。
請注意，Sanitizer 被設計為更易於重用和修改。
建構函式
Sanitizer()實驗性-
建立並返回一個
Sanitizer物件，可以選擇使用SanitizerConfig定義自定義清理行為。
例項方法
Sanitizer.allowElement()實驗性-
將一個元素設定為允許透過 sanitizer 進行處理，可以選擇指定允許或不允許的屬性列表。
Sanitizer.get()實驗性-
以
SanitizerConfig字典例項的形式返回當前的Sanitizer配置。 Sanitizer.removeElement()實驗性-
將一個元素設定為由 sanitizer 移除。
Sanitizer.removeUnsafe()實驗性-
更新 sanitizer 配置，使其移除所有 XSS 不安全的 HTML。
Sanitizer.replaceElementWithChildren()實驗性-
將一個元素設定為由其子元素替換。
Sanitizer.allowAttribute()實驗性-
將一個屬性設定為允許在任何元素上使用。
Sanitizer.removeAttribute()實驗性-
將一個屬性設定為從任何元素中移除。
Sanitizer.setComments()實驗性-
設定是否允許或移除註釋。
Sanitizer.setDataAttributes()實驗性-
設定是否允許或移除元素上的 data 屬性。
示例
更多示例請參閱 HTML Sanitizer API 和各個方法。下面我們展示一些建立不同 sanitizer 配置的示例。
建立預設 sanitizer
預設 sanitizer 的構造如下所示。
const sanitizer = new Sanitizer();
XSS 安全的 清理方法 在未傳遞任何選項時會自動建立相同的 sanitizer。
建立空的 sanitizer
要建立一個空的 sanitizer，向建構函式傳遞一個空物件。生成的 sanitizer 配置如下所示。
const sanitizer = new Sanitizer({});
/*
{
"attributes": [],
"comments": true,
"dataAttributes": true,
"elements": [],
"removeAttributes": [],
"removeElements": [],
"replaceWithChildrenElements": []
}
*/
建立“允許” sanitizer
此示例演示瞭如何建立一個“允許” sanitizer：一種只允許部分屬性和元素的 sanitizer。
程式碼首先使用 Sanitizer() 建構函式建立一個 Sanitizer，並指定一個 SanitizerConfig，該配置允許 <div>、<p> 和 <script> 元素。
然後，示例使用 allowElement() 進一步允許 <span> 元素，使用 allowAttribute() 允許任何元素上的 id 屬性，並使用 replaceElementWithChildren() 方法將任何 <b> 元素替換為其內部內容（這是一種“允許”，因為您明確指定了要保留的某些實體）。最後，我們指定保留註釋。
const sanitizer = new Sanitizer({ elements: ["div", "p", "script"] });
sanitizer.allowElement("span");
sanitizer.allowAttribute("id");
sanitizer.replaceElementWithChildren("b");
sanitizer.setComments(true);
建立“移除” sanitizer
此示例演示瞭如何建立一個“移除” sanitizer，指定要從輸入中移除的專案。
程式碼首先使用 Sanitizer() 建構函式建立一個 Sanitizer，並指定一個 SanitizerConfig，該配置會移除 <span> 和 <script> 元素。然後，我們使用 removeElement() 將 <h6> 新增到要移除的元素列表中，並使用 removeAttribute() 從屬性列表中移除 lang。我們還移除了註釋。
const sanitizer = new Sanitizer({ removeElements: ["span", "script"] });
sanitizer.removeElement("h6");
sanitizer.removeAttribute("lang");
sanitizer.setComments(false);
規範
| 規範 |
|---|
| HTML Sanitizer API # sanitizer |
瀏覽器相容性
載入中…