Firefox扩展使用静态innerHTML遭AMO拒绝，如何合规处理？

问题场景 #

我在Firefox扩展的content-script.js中使用innerHTML插入硬编码的多层嵌套div、span标签（仅包含id、class等属性，无script/a标签，实际内容后续通过代码填充），代码示例如下：

const myHtml = `..........`;
let elm = document.createElement('div');
elm.id = 'injectedWrapper';
elm.innerHTML = myHtml;

但即使HTML内容是常量，AMO仍发出警告：

Due to both security and performance concerns, this may not be set using dynamic values which have not been adequately sanitized.

我查过HTML Sanitizer API，但目前Firefox对其支持有限。作为内容脚本，不想引入额外JS库，也不想用大量createElement写冗余代码，请问有没有合适的方法净化HTML以满足AMO要求？

可行解决方案 #

方法一：利用空HTML文档做原生净化 #

借助浏览器原生的HTML解析机制，创建独立空文档来过滤不安全内容，无需额外依赖：

const myHtml = `..........`;
// 创建空HTML文档
const sanitizeDoc = document.implementation.createHTMLDocument('');
// 将硬编码HTML插入空文档body
sanitizeDoc.body.innerHTML = myHtml;
// 提取净化后的节点集合
const sanitizedNodes = sanitizeDoc.body.children;

// 构建目标元素并插入净化内容
let elm = document.createElement('div');
elm.id = 'injectedWrapper';
while (sanitizedNodes.length > 0) {
  elm.appendChild(sanitizedNodes[0]);
}

空文档环境不会执行脚本，浏览器会自动过滤掉不安全的元素与属性，AMO会认可这种代码级的净化逻辑。

方法二：使用<template>标签解析静态HTML #

<template>标签的解析机制天生安全，不会渲染内容也不会执行脚本，能自动处理不安全代码：

const myHtml = `..........`;
const template = document.createElement('template');
template.innerHTML = myHtml;

// 克隆模板内的安全内容到目标元素
let elm = document.createElement('div');
elm.id = 'injectedWrapper';
elm.appendChild(template.content.cloneNode(true));

这种方式代码简洁，完全依赖浏览器原生API，既避免了innerHTML的直接风险，又不用写大量createElement代码。

方法三：添加注释告知AMO审核人员 #

如果你的HTML确实是完全硬编码、无任何动态内容，可以在代码中添加明确注释，说明内容的安全性，AMO审核人员会酌情忽略警告：

// AMO审核说明：myHtml为完全硬编码的静态HTML，仅包含div/span及合法属性，无动态内容或不安全元素
const myHtml = `..........`;
let elm = document.createElement('div');
elm.id = 'injectedWrapper';
elm.innerHTML = myHtml;

此方法依赖人工审核判断，适合确定无风险的场景，是最省事的处理方式。

内容的提问来源于stack exchange，提问作者lex