Sanitizer

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

Sanitizer 接口是 HTML Sanitizer API 的一部分,它定义了一个配置对象,用于指定在将 HTML 字符串插入 ElementShadowRoot 时,或者在将 HTML 字符串解析为 Document 时,哪些元素、属性和注释是允许的或应该被移除的。

Sanitizer 实例本质上是 SanitizerConfig 的一个包装器,可以在相同的 清理方法 中作为配置的替代项传递。

请注意,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 的构造如下所示。

js
const sanitizer = new Sanitizer();

XSS 安全的 清理方法 在未传递任何选项时会自动创建相同的 sanitizer。

创建空的 sanitizer

要创建一个空的 sanitizer,向构造函数传递一个空对象。生成的 sanitizer 配置如下所示。

js
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> 元素替换为其内部内容(这是一种“允许”,因为您明确指定了要保留的某些实体)。最后,我们指定保留注释。

js
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。我们还移除了注释。

js
const sanitizer = new Sanitizer({ removeElements: ["span", "script"] });
sanitizer.removeElement("h6");
sanitizer.removeAttribute("lang");
sanitizer.setComments(false);

规范

规范
HTML Sanitizer API
# sanitizer

浏览器兼容性