74

Do web browsers use separate executional threads for JavaScript in iframes?

I believe Chrome uses separate threads for each tab, so I am guessing that JavaScript in an iframe would share the same thread as its parent window, however, that seems like a security risk too.

4
  • 1
    If you find something here, great. If you don't, there's no way we'll know about all browsers without a lot of effort.
    – Some Guy
    Jul 16, 2012 at 18:42
  • 2
    Chrome uses a seperate process per tab. I don't believe iframes have that kind of separation.
    – vcsjones
    Jul 16, 2012 at 18:42
  • 2
    Why would that be a security risk ? That's not as if you're able to execute native code in the thread. Whatever the threads, you only access what's in your sandbox. Jul 16, 2012 at 18:43
  • I am not really sure how browsers marshall scope between parent windows and iframes contingent upon cross-domain scenarios. For all I know, an iframe from a different domain gets a different thread. Apparently I am conflating scope with execution.
    – jedatu
    Jul 16, 2012 at 19:38

10 Answers 10

43

Recently tested if JavaScript running in a iFrame would block JavaScript from running in the parent window.

iFrame on same domain as parent:

  • Chrome 68.0.3440.84: Blocks
  • Safari 11.0.2 (13604.4.7.1.3): Blocks
  • Safari 15.1 on iOS: Blocks
  • Firefox 96: Blocks

iFrame on different domain as parent

  • Chrome 68.0.3440.84: Doesn't block
  • Safari 11.0.2 (13604.4.7.1.3): Blocks (outdated, but I don't have a macbook)
  • Safari 15.1 on iOS: Doesn't block
  • Firefox 96: Doesn't block
  • Chrome for Android 96: sometimes Blocks and sometimes Doesn't block (There are some complex rules in Chrome for Android that determine when Chrome for Android does and doesn't isolate a process, see chrome://process-internals and 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>
3
  • This is exactly what I was looking for. Thanks! May 24, 2021 at 19:09
  • Retested in Firefox and iOS Safari, can someone please retest on Desktop Safari. Dec 26, 2021 at 17:23
  • I tested on desktop Safari 15.4 today. It still blocks for me in both same and different sites. Mar 18, 2022 at 22:22
25

Before chrome came along, all tabs of any browser shared the same single thread of JavaScript. Chrome upped the game here, and some others have since followed suit.

This is a browser implementation detail, so there is no solid answer. Older browsers definitely don't. I don't know of any browser that definitely uses another thread for iframes, but to be honest I've never really looked into it.

It isn't a security risk, as no objects are brought along with the thread execution.

3
  • 2
    It really seems like this is the correct answer. I may try to create a test that demonstrates it and verifies the behavior in each browser.
    – jedatu
    Jul 16, 2012 at 19:31
  • 2
    Just wanted to comment that there are very esoteric ways it could be a security risk. I'm not security expert, but check out blog.sheddow.xyz/css-timing-attack Oct 24, 2018 at 15:20
  • 1
    This answer is inaccurate. There are security risks that motivated Chrome's isolation. Of particular concern: IFRAMEs that might, by exploiting a bug, access extension APIs. See 1, 2, 3. In addition to the timing attack mentioned by @internetross (not so esoteric, IMO), there are other potential cases where if an exploit is found, process separation would be a backup barrier.
    – Jacob C.
    Jan 13, 2020 at 18:59
22

To sum up the other answers: No, iFrames usually run in the same thread/process as the main page.

However, it appears the Chromium team are working on further isolation in this area:

Chromium Issue 99379: Out of process iframes [sorry, link not working - if you can find a link to the issue that works, please let me know]

Design Plans for Out-of-Process iframes

2
  • 1
    I did an experiment where two iframes have infinite loops outputting to console. Only one of them outputs to the console, while the second one never produces any output. This was the case even with --site-per-process enabled in Chrome "46.0.2490.86". The loop was simply about incrementing a number until reaching a threshold, outputting to the console, then setting the number to 0. Feb 18, 2016 at 18:45
  • Interesting, and especially good to know since the Chromium issue seems to have disappeared - so difficult to see what is the status on this ...
    – mxro
    Feb 18, 2016 at 23:40
12

I've had the same question myself this night, before checking for any existing answers. In the project I'm currently working we have to load an iFrame that uses a different framework and I was curios if that iFrame could somehow block the thread and affect my app. The answer is yes, it can.

My test was done in Chrome. In the parent I've loaded a child iFrame. In the parent I've set an interval to console.log a text every amount time. Then in the iFrame I've used a timeout to launch a 'while' that blocks the thread. The answer: the iFrame uses the same thread.

Example:

In the parent:

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

In the iFrame:

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

2021 Update:

There is now the Origin-Agent-Cluster header which allows you to request dedicated resources for an iframe. It is currently supported on Chrome (88+) with positive reception from Mozilla and Safari.

Origin-Agent-Cluster is a new HTTP response header that instructs the browser to prevent synchronous scripting access between same-site cross-origin pages. Browsers may also use Origin-Agent-Cluster as a hint that your origin should get its own, separate resources, such as a dedicated process.

[...] For example, if https://customerservicewidget.example.com expects to use lots of resources for video chat, and will be embedded on various origins throughout https://*.example.com, the team maintaining that widget could use the Origin-Agent-Cluster header to try to decrease their performance impact on embedders.

To use the Origin-Agent-Cluster header, configure your web server to send the following HTTP response header: Origin-Agent-Cluster: ?1 The value of ?1 is the structured header syntax for a boolean true value.

More details here: https://web.dev/origin-agent-cluster/

4
  • Hmm, but this still does not request separate ressources for the iframe when it's the same origin, just when it's different origins from the same site? Jan 24, 2022 at 16:18
  • 1
    @MarkusSchaber Yes, I just tested this. If the iframe originates from the same site, then the current process will be shared, which is quite sad.
    – Acmion
    Jan 31, 2022 at 23:38
  • @Acmion @MarkusSchaber I'd encourage you to create an issue about this here: github.com/whatwg/html since it seems like a common requirement. I made a similar issue here: github.com/whatwg/html/issues/7328 which is about isolating srcdoc iframes. Also, apparently Chromium is working on isolating sandboxed iframes, which might end up helping in some cases, assuming other browsers follow suit: bugs.chromium.org/p/chromium/issues/detail?id=510122
    – joe
    Feb 2, 2022 at 4:17
  • @joe This has recently been implemented in at least Chrome Canary under experimental flags. See my answer here: stackoverflow.com/a/71272828/12280081
    – Acmion
    Feb 25, 2022 at 23:40
9

Only chrome & firefox on desktop (no, not mobile) is separating threads.

I've created a small page that run long loop in interval in the main page, and shows an animation both in the main page and in the iframe. You can go to the site from the browser you wish to check.

If the lower animation (under 'crossorigin') runs without stopping, it's have a separate thread.

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

5

Late on this but... good point, cause iframe js seems to be concurrent in Firefox 16.
Try with alert function (blocking), you'll see dialogs opening together.
You won't see that in Chrome or IE.
iframe js may access the parent window in Firefox 16 as usual, so I can think of possible race conditions arising.

2
  • 5
    The alert "test" does not necessarily imply mutli-threading, only cooperative multi-tasking, which is a given. Mar 1, 2017 at 15:24
  • 1
    @GabrielGarcia thanks for your comment; this was never intended to be a test of course, I was just pointing out the interesting behavior and the fact that it could imply multi-threading.
    – matpop
    Mar 1, 2017 at 18:50
5

Did some experimenting with this today in Chrome 28 in Ubuntu. Used this command to see Chrome's threads and processes

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

It looks like Chrome does not spawn new threads or processes for iframes. An interesting note is that it does spawn a new process for the dev tools pane.

1
  • 2
    Don't mix threads and processes. You can emulate several threads with one process, and that's exactly what Firefox does if I'm not mistaken (e10s will change that though).
    – autra
    May 13, 2015 at 9:24
2

2022 Update (Experimental)

Iframes can now be run in parallel in at least Chrome Canary on desktop computers, but this is still experimental.

  1. Download Chrome Canary (https://www.google.com/chrome/canary/).
  2. Navigate to "chrome://flags/".
  3. Enable "Isolated sandboxed iframes".
  4. Create "index.html" with the following content:
<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. Create "index-child.html" with the following content:
<h1>index-child.html</h1>
<script>
    setTimeout(() => {
        console.log("index-child.html started continuous execution");
        while (true) {
        }
    }, 3000)
</script>
  1. Open "index.html" in the browser.
  2. Verify that the console is consistently logging "index.html executed one iteration". Thus, the iframe is executed in parallel.
  3. Disable "Isolated sandboxed iframes" (or just use another browser) and open "index.html" again. The console is no longer consistently logging "index.html executed one iteration". Thus, the iframe is no longer executed in parallel.

Note: The sandbox attribute on the iframe tag must be correctly set for this to work. Additionally, only one extra process per site is currently supported, which means that multiple iframes will not all run in parallel.

The specific instructions from "chrome://flags/":

Isolated sandboxed iframes
When enabled, applies process isolation to iframes with the 'sandbox' attribute and without the 'allow-same-origin' permission set on that attribute. The current isolation model is that all sandboxed iframes from a given site will be placed into the same process, but alternative models may be introduced in future experiments. – Mac, Windows, Linux, Chrome OS, Fuchsia

-1

For iFrames, no. However if you want to use threads in JavaScript you can use Web Workers, a working html5 draft supported by the new browsers. http://www.w3.org/TR/2009/WD-workers-20091029/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.