浏览器会为iframe提供一个单独的JavaScript线程吗

Will a browser give an iframe a separate thread for JavaScript?

本文关键字：单独 一个 JavaScript 线程 iframe 浏览器      更新时间：2023-09-26

web浏览器是否在iframe中为JavaScript使用单独的执行线程？

我相信Chrome为每个选项卡使用单独的线程，所以我猜测iframe中的JavaScript会与其父窗口共享相同的线程，然而，这似乎也是一个安全风险。

最近测试了在iFrame中运行的JavaScript是否会阻止JavaScript在父窗口中运行。

iFrame与父域位于同一域：

  • 铬68.0.3440.84：块
  • Safari 11.0.2（13604.4.7.1.3）：块
  • iOS上的Safari 15.1：阻止
  • Firefox 96:块

作为父的不同域上的iFrame

  • Chrome 68.0.3440.84:不会阻塞
  • Safari 11.0.2（13604.4.7.1.3）：块（过时了，但我没有macbook）
  • iOS上的Safari 15.1：不阻止
  • Firefox 96:不阻止
  • Chrome for Android 96：有时阻止，有时不阻止（Chrome for Android中有一些复杂的规则，用于确定Chrome for Android何时隔离进程和不隔离进程，请参阅chrome://process-internals和chrome://flags）

parent.html:

    <body>
    <div id="count"></div>
    <iframe src="./spin.html"></iframe>     
    <script>
        let i = 0;
        let div = document.getElementById("count");
        setInterval(() => {
            div.innerText = i++;
        }, 100);
    </script>
    </body>

spin.html：

    <body>
    <button id="spin">spin</button>
    <script>
        const spin = document.getElementById("spin");
        spin.addEventListener('click', () => {
            const start = Date.now();
            while (Date.now() - start < 1000) { }
        })
    </script>
    </body>

chrome出现之前，任何浏览器的所有选项卡都共享同一个JavaScript线程。Chrome在这里提升了游戏水平，其他一些公司也紧随其后。

这是一个浏览器实现细节，所以没有确切的答案。旧的浏览器肯定不会。我不知道有哪个浏览器肯定会为iframe使用另一个线程，但老实说，我从来没有真正研究过它

这不是安全风险，因为线程执行时不会带来任何对象。

总结其他答案：否，iFrame通常在与主页相同的线程/进程中运行。

然而，Chromium团队似乎正在这一领域进行进一步的隔离：

Chromium Issue 99379:进程外的iframes[对不起，链接不起作用-如果你能找到一个有效的问题链接，请告诉我]

进程外iframes 的设计计划

在检查任何现有答案之前，我今晚也遇到了同样的问题。在我目前正在工作的项目中，我们必须加载一个使用不同框架的iFrame，我很好奇这个iFrame是否会以某种方式阻塞线程并影响我的应用程序。答案是肯定的，可以。

我的测试是在Chrome中完成的。在父对象中，我加载了一个子iFrame。在父级中，我设置了一个时间间隔，每次console.log一条文本。然后在iFrame中，我使用了一个超时来启动一个阻塞线程的"while"。答案是：iFrame使用相同的线程。

示例：

在父级中：

setInterval(() => {
  console.log('iFrame still using the thread');
}, 3000)

在iFrame:中

setTimeout(() => {
  console.log('now the thread is not working in the iFrame anymore');
  while (true) {
  }
}, 10000)

2021更新：

现在有了Origin-Agent-Cluster标头，它允许您为iframe请求专用资源。它目前在Chrome（88+）上得到支持，Mozilla和Safari对此表示欢迎。

Origin Agent Cluster是一个新的HTTP响应标头，用于指示浏览器阻止在同一站点跨源页面之间进行同步脚本访问。浏览器还可以使用Origin Agent Cluster来提示您的Origin应该获得自己的独立资源，例如专用进程。

[…]例如，如果https://customerservicewidget.example.com希望使用大量资源进行视频聊天，并且将在整个https://*.example.com中嵌入各种源，则维护该小部件的团队可以使用Origin Agent Cluster标头来尝试降低其对嵌入程序的性能影响。

要使用Origin Agent Cluster标头，请将web服务器配置为发送以下HTTP响应标头：Origin-Agent-Cluster: ?1 ?1的值是布尔真值的结构化标头语法。

更多详细信息请点击此处：https://web.dev/origin-agent-cluster/

仅铬&桌面上的firefox（没有，不是移动的）正在分离线程。

我创建了一个小页面，它在主页面中以长循环的间隔运行，并在主页面和iframe中显示动画。您可以从要检查的浏览器转到网站。

如果下部动画（在"crossrorigin"下）不停地运行，则它有一个单独的线程。

https://eylonsu.github.io/browser_thread/

这晚了，但。。。很好，因为iframe-js在Firefox 16中似乎是并发的。
试着使用警报功能（阻塞），你会看到对话框一起打开
你不会在Chrome或IE中看到这一点。
iframe-js可能会像往常一样访问Firefox 16中的父窗口，所以我可以考虑可能出现的竞争条件。

今天在Ubuntu的Chrome 28中对此进行了一些实验。使用此命令查看Chrome的线程和进程

ps axo pid,nlwp,cmd | grep "chrome"

看起来Chrome并没有为iframe生成新的线程或进程。一个有趣的注意事项是，它确实为开发工具窗格生成了一个新的进程。

2022更新（实验）

Iframes现在至少可以在桌面计算机上的Chrome Canary中并行运行，但这仍然是实验性的。

  1. 下载Chrome Canary(https://www.google.com/chrome/canary/)
  2. 导航到"；chrome://flags/"
  3. 启用"；孤立的沙盒iframes"
  4. 创建"；index.html"；其内容如下：
<h1>index.html</h1>
<iframe src="index-child.html" sandbox="allow-scripts"></iframe>
<script>
    setInterval(() => {
        console.log("index.html executed one iteration");
    }, 1000)
</script>
  1. 创建"；index child.html"；其内容如下：
<h1>index-child.html</h1>
<script>
    setTimeout(() => {
        console.log("index-child.html started continuous execution");
        while (true) {
        }
    }, 3000)
</script>
  1. 打开"；index.html"；在浏览器中
  2. 验证控制台是否一致地记录"；index.html执行一次迭代"；。因此，iframe是并行执行的
  3. 禁用"；孤立的沙盒iframes"；（或者只是使用另一个浏览器）并打开"；index.html"；再一次控制台不再一致地记录"；index.html执行一次迭代"；。因此，iframe不再并行执行

注意：必须正确设置iframe标记上的sandbox属性才能正常工作。此外，目前每个站点只支持一个额外的进程，这意味着多个iframe不会全部并行运行。

来自"；chrome://flags/"

孤立的沙盒iframe
启用时，将进程隔离应用于具有"sandbox"属性但未对该属性设置"allow same origin"权限的iframe。目前的隔离模型是，来自给定站点的所有沙盒iframe都将被放入同一过程中，但在未来的实验中可能会引入替代模型Mac、Windows、Linux、Chrome操作系统、Fuchsia

对于iFrame，没有。但是，如果你想在JavaScript中使用线程，你可以使用Web Workers，这是一个新浏览器支持的工作html5草案。http://www.w3.org/TR/2009/WD-workers-20091029/

相关文章：