如何用Web Component实现网页嵌入与沙箱化？现有方案问题求解

现有代码的核心问题 #

1. 跨域拦截：浏览器同源策略禁止通过fetch获取谷歌这类外部网站的HTML内容，除非目标网站明确设置CORS允许你的域名访问——显然这类公共网站不会这么做，所以你的fetch请求根本拿不到有效数据。
2. JS/CSS无法生效：就算能拿到HTML，shadow.innerHTML插入的内容也存在问题：
   • 内嵌<script>标签不会自动执行，浏览器为了安全，默认禁止通过innerHTML插入的脚本运行。
   • 外部CSS/JS资源会因跨域或Shadow DOM的样式隔离规则无法正常加载。
3. 未实现真正沙箱：Shadow DOM仅做DOM结构和样式的隔离，JS仍然共享主页面的全局执行环境，完全达不到沙箱的隔离效果。

正确实现方式：用iframe封装Web Component #

<iframe>是浏览器原生的沙箱方案，拥有独立的执行上下文，和主页面完全隔离，还能通过sandbox属性精细控制权限。把iframe放到Shadow DOM里，就能封装成符合需求的Web Component：

修改后的代码 #

HTML文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Web Component Sandbox</title>
  <script src="main2.js" defer></script>
</head>
<body>
  <h1>Web Component Sandbox</h1>
  <embedded-webview src="https://www.google.com"></embedded-webview>
</body>
</html>

main2.js文件：

class EmbeddedWebview extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'closed' });
    // 创建iframe元素
    const iframe = document.createElement('iframe');
    iframe.src = this.getAttribute('src');
    // 配置沙箱权限：允许JS执行、允许表单提交，可根据需求调整
    iframe.sandbox = 'allow-scripts allow-forms';
    // 让iframe占满容器
    iframe.style.width = '100%';
    iframe.style.height = '80vh';
    iframe.style.border = 'none';
    shadow.appendChild(iframe);
  }
}

window.customElements.define('embedded-webview', EmbeddedWebview);

关于sandbox属性的说明 #

sandbox属性可组合多个值，常用选项：

• allow-scripts：允许iframe内执行JS
• allow-forms：允许提交表单
• allow-same-origin：允许iframe访问同源资源（若src为同域页面）
• allow-top-navigation：允许iframe跳转主页面URL
• 不设置任何值时，会启用最严格沙箱：禁止JS、表单、跨域等操作

现成Web Component推荐 #

如果不想自己实现，可以使用成熟的封装组件：

• GitHub Sandbox Element：封装了iframe沙箱，支持自定义权限、页面间消息通信等功能，配置灵活。
• Iframe Sandbox Component：轻量级组件，专注沙箱隔离，API简单易用。

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