Element: setHTML() 方法
实验性功能：这是一项实验性技术，在生产环境使用前请仔细检查浏览器兼容性表。
Element 接口的 setHTML() 方法提供了一种XSS安全的方法来解析和清理HTML字符串，将其转换为 DocumentFragment，然后作为元素的子树插入到DOM中。
语法
|
|
参数
-
input定义要清理并注入元素的HTML字符串。 -
options（可选） 包含以下可选参数的对象：sanitizer一个Sanitizer或SanitizerConfig对象，定义输入中哪些元素将被允许或移除，或者是字符串 “default” 表示使用默认配置。 注意：如果要重复使用配置，通常Sanitizer比SanitizerConfig更高效。 如果未指定，则使用默认的清理器配置。
返回值
无（undefined）。
异常
TypeError如果options.sanitizer传入以下值时会抛出此异常：- 非规范化的
SanitizerConfig（包含"allowed"和"removed"配置设置） - 值不是 “default” 的字符串
- 不是
Sanitizer、SanitizerConfig或字符串的值
- 非规范化的
描述
setHTML() 方法提供了一种XSS安全的方法来解析和清理HTML字符串，将其转换为 DocumentFragment，然后作为元素的子树插入到DOM中。
setHTML() 会丢弃HTML输入字符串中在当前元素上下文中无效的任何元素，例如<table>外部的<col>元素。然后它会移除清理器配置不允许的任何HTML实体，并进一步移除任何XSS不安全的元素或属性——无论它们是否被清理器配置允许。
如果在 options.sanitizer 参数中未指定清理器配置，setHTML() 将使用默认的 Sanitizer 配置。此配置允许所有被认为是XSS安全的元素和属性，从而禁止被认为不安全的实体。
可以指定自定义清理器或清理器配置来选择允许或移除哪些元素、属性和注释。请注意，即使清理器配置允许不安全的选项，在使用此方法时它们仍将被移除（这会隐式调用 Sanitizer.removeUnsafe()）。
应将 setHTML() 用于将不受信任的HTML字符串插入元素，而不是使用 Element.innerHTML。除非有特定需要允许不安全的元素和属性，否则也应使用它而不是 Element.setHTMLUnsafe()。
请注意，由于此方法始终清理XSS不安全实体的输入字符串，因此不使用可信类型API进行保护或验证。
示例
基本用法
此示例展示了使用 setHTML() 清理和注入HTML字符串的一些方法。
setHTML() 实时示例
此示例提供了使用不同清理器调用方法时的"实时"演示。代码定义了按钮，您可以点击分别使用默认和自定义清理器来清理和注入HTML字符串。原始字符串和清理后的HTML会被记录，以便您可以在每种情况下检查结果。
HTML
HTML定义了两个用于应用不同清理器的<button>元素，另一个用于重置示例的按钮，以及一个用于注入字符串的<div>元素。
JavaScript
首先我们定义要清理的字符串，所有情况都将使用相同的字符串。这包含<script>元素和onclick处理程序，两者都被认为是XSS不安全的。我们还定义了重新加载按钮的处理程序。
接下来我们定义使用默认清理器设置HTML的按钮的点击处理程序。这应该在插入HTML字符串之前剥离所有不安全的实体。请注意，您可以在 Sanitizer() 构造函数示例中确切看到哪些元素被移除。
下一个点击处理程序使用仅允许<div>、<p>和<script>元素的自定义清理器来设置目标HTML。请注意，因为我们使用的是 setHTML 方法，<script> 也将被移除！
结果
点击"Default"和"allowScript"按钮分别查看默认和自定义清理器的效果。请注意，在这两种情况下，<script>元素和onclick处理程序都被移除，即使清理器明确允许它们。
规范
浏览器兼容性
[查看完整的浏览器兼容性表]
参见
Element.setHTMLUnsafe()ShadowRoot.setHTML()和ShadowRoot.setHTMLUnsafe()Document.parseHTML()和Document.parseHTMLUnsafe()- HTML Sanitizer API