Links that open in a new tab fail when WordPress Playground runs inside an iframe

[dianeco]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

When WordPress Playground runs inside an iframe, links that are supposed to open in a new tab do not work correctly.

A minimal example is:

<iframe src="https://playground.wordpress.net/"></iframe>

The same issue also occurs when Playground is started through the JavaScript API, since it still runs inside an iframe.

For example, when editing a page and clicking the View Page icon in the top toolbar, a new tab opens but the page does not load. In Chrome, it shows an ERR_FAILED browser error page.

When Playground is opened directly at https://playground.wordpress.net/ outside of an iframe, opening links in a new tab works as expected.

Related issue: #2130

Expected behavior

The link should open the correct destination in a new tab.

Actual behavior

A new tab opens, but the destination page fails to load. In Chrome, the tab shows an ERR_FAILED browser error page.

Steps to reproduce

1. Embed WordPress Playground in an iframe:
   <iframe src="https://playground.wordpress.net/"></iframe>
2. Open WordPress admin.
3. Edit a page.
4. Click the View Page icon in the top toolbar.

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only this plugin is active.
• This bug happens with a default WordPress theme active.
• I can reproduce this bug consistently using the steps above.

[mho22]

Thanks for reporting this, @dianeco! I was able to reproduce the issue both with the production site and locally.

I think the root cause is related to Chrome's third-party storage partitioning. When Playground runs inside a cross-origin iframe, Chrome creates a separate, partitioned Service Worker for the iframe context. The PHP worker lives under this partitioned Service Worker. But when a link opens in a new tab, that tab is a top-level page, so it gets a different, unpartitioned Service Worker. This worker can't reach the PHP worker, so the request times out and fails.

This is probably the same underlying issue as #2130.

@adamziel Do you have any thoughts on how we could fix this ? One potential direction we could explore : when the Service Worker detects it has no PHP worker to handle the request, it could serve a lightweight relay page that uses window.opener to communicate back to the original tab's partitioned context and fetch the content through there.

But then what about rel="noopener" then ?