如何对网页中用户自定义HTML区域进行沙箱隔离或严格限制？

针对你担心用户HTML语法错误（比如多余的</div>）破坏主页面的问题，以下几个方案可以替代iframe实现隔离或修复：

1. 使用Shadow DOM做完全隔离 #

Shadow DOM是浏览器原生的DOM隔离机制，能将用户的HTML封装在独立的DOM子树中，和主页面的DOM完全隔绝——就算用户的HTML结构混乱，也只会影响Shadow内部，不会污染主页面的DOM结构。

实现步骤很简单：

• 先在页面上准备一个用于放置用户内容的容器元素，比如<div id="user-content"></div>
• 给这个容器附加Shadow根，然后将用户的HTML插入到Shadow根里：

const container = document.getElementById('user-content');
const shadowRoot = container.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = 用户输入的HTML内容;

注意：Shadow DOM默认会隔离样式，如果你希望主页面的样式能影响用户内容，可以通过::part或者CSS变量来实现样式穿透，或者直接在Shadow内部引入样式。

2. 利用浏览器DOM自动修复语法错误 #

浏览器在解析HTML时会自动修正不规范的结构（比如多余的闭合标签、未闭合的标签），你可以先把用户的HTML放到一个临时的、脱离文档流的DOM元素里，让浏览器完成修复，再把修复后的内容插入到目标容器中。

示例代码：

const tempDiv = document.createElement('div');
tempDiv.innerHTML = 用户输入的HTML内容;
// 清空目标容器，然后插入修复后的内容
const targetContainer = document.getElementById('user-content');
targetContainer.innerHTML = '';
while (tempDiv.firstChild) {
  targetContainer.appendChild(tempDiv.firstChild);
}

这个方案的好处是简单易用，不需要依赖特殊API，缺点是浏览器的自动修复逻辑可能和用户预期略有差异，但至少能保证主页面的DOM结构不会被破坏。

3. 使用HTML Sanitizer API处理并修复 #

如果你需要更可控的处理逻辑，可以使用浏览器的HTML Sanitizer API（部分现代浏览器支持），它不仅能过滤潜在的不安全内容，还能自动修正HTML结构错误，生成符合规范的DOM内容。

示例代码：

const sanitizer = new Sanitizer(); // 默认配置即可处理结构错误
const targetContainer = document.getElementById('user-content');
// 将用户输入的HTML处理后插入容器
targetContainer.setHTML(用户输入的HTML内容, { sanitizer });

注意：如果需要兼容旧浏览器，可以使用第三方的HTML sanitize库（比如DOMPurify），这类库也具备结构修复的能力，同时兼容性更好。

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