WordPress/wordpress-playground

Links with target="top" don't work

georgestephanis opened this issue · 3 comments

Console error when clicking "Activate" after uploading plugin:

Unsafe attempt to initiate navigation for frame with URL 'http://localhost:4400/remote.html?progressbar=true&php=8.0&wp=6.2' from frame with URL 'http://localhost:4400/scope:0.5316310144519707/wp-admin/update.php?action=upload-plugin'. The frame attempting navigation is sandboxed, and is therefore disallowed from navigating its ancestors.
Screenshot 2023-05-09 at 9 13 12 AM

Unsure if it's important or not, but just notating it here in case it turns up later.

It looks like an <a target="_top"> issue. WordPress is rendered in a sandboxed iframe that prevents top-level navigation. What we really want to do is to target the WordPress iframe, not the top-level window. I'm not sure how to do that other than rewriting all the rendered HTML which I'm not too excited about.

I played with the <base> tag without much luck. ChatGPT proposed this not-great-not-terrible fix:

window.addEventListener('DOMContentLoaded', (event) => {
    const iframeDocument = document.querySelector('iframe').contentDocument;

    iframeDocument.addEventListener('click', (event) => {
        if (event.target.tagName === 'A') {
            event.preventDefault();
            iframeDocument.location.href = event.target.href;
        }
    });
});

Fixed in #684