使用srcdoc的沙箱模式iframe跨域无法自适应内容高度如何解决？

sandbox空值会强制iframe使用独立的唯一源，导致父页无法访问内部DOM，你只需要给sandbox增加allow-same-origin权限即可，不需要开放脚本执行权限，完全符合你禁用用户提交脚本的安全需求：

<iframe class="frame"
        srcdoc="<h1>title</h1><p>content1</p><p>content2</p>"
        sandbox="allow-same-origin"
        style="width:100%;border:none;overflow:hidden;"
        onload="resizeIFrameToFitContent(this)">
</iframe>

你原有调整高度的JS函数不需要做任何修改，只要不在sandbox里添加allow-scripts，iframe内的所有脚本都会被正常拦截，不会有安全风险。

如果你不想修改sandbox的原有配置，可以在父页面提前计算用户HTML内容的高度，直接赋值给iframe，完全不需要访问iframe内部DOM：

function getHtmlContentHeight(htmlStr, iframeWidth) {
  const tempContainer = document.createElement('div');
  // 样式和iframe内容默认样式对齐，避免高度计算偏差
  tempContainer.style.cssText = `
    position: absolute;
    visibility: hidden;
    width: ${iframeWidth}px;
    margin: 0;
    padding: 0;
    border: none;
  `;
  tempContainer.innerHTML = htmlStr;
  document.body.appendChild(tempContainer);
  const contentHeight = tempContainer.scrollHeight;
  document.body.removeChild(tempContainer);
  return contentHeight;
}

// 调用示例
const userInputHtml = `<h1>title</h1><p>content1</p><p>content2</p>`;
const targetFrame = document.querySelector('.frame');
targetFrame.srcdoc = userInputHtml;
// 传入iframe的实际显示宽度即可
targetFrame.height = getHtmlContentHeight(userInputHtml, targetFrame.offsetWidth);

这个方案完全保留你原有sandbox=""的最高安全配置，没有任何跨域问题，仅需要保证临时容器的样式和iframe默认内容样式一致，即可得到准确的高度值。

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