Evil Firefox Error — “A parameter or an operation is not supported by the underlying object”

Question

I\'m trying to figure out what is going on here. I\'ve been at it for hours now and can\'t seem to get a grip on why this is happening.

I\'m making a few AJAX calls, and

Answer 1

Just want to add a somewhat nasty intermittent variant of Xenos's answer. As he mentioned, you can get this problem if you try and navigate the window by setting window.top.location.href = ... from within a sandboxed iframe, and that this can be prevented if your iframe has the allow-top-navigation option set.

But you might also find your iframe has the more restrictive allow-top-navigation-by-user-activation option. This will allow navigation, but only in response to a user action such as clicking a link or a button. For example, it will be allowed within a form submit event handler, but you can't just trigger it at an arbitrary point in time, such as from a setTimeout() callback with a long delay.

This can be problematic if you are (for example) using AJAX form submission before performing a redirect. The browser needs to decide if the navigation is in response to a user action or not. It does this by only allowing the navigation if it is considered to have happened within an acceptable time period of the user interaction. The HTML standard refers to this as transient activation.

The bottom line is that if your AJAX call is too slow, or if your user has a poor network connection, the navigation will fail. How slow is too slow? I have only tested Firefox, but it appears to allow 5 seconds before it considers the user interaction to have expired.

Possible solutions:

• Ask whoever is responsible for the iframe options to upgrade to the blanket allow-top-navigation option
• Don't perform async work such as AJAX requests in between user actions and top navigation. For example, use old-school POST form submission directly to the back-end, rather than using an AJAX request
• Make sure your responses are as fast as possible. Catch any errors, and prompt the user to click something to trigger the navigation manually. For example:

async function submitForm() {
    await doPotentiallySlowAsyncFormSubmit()
    try {
        window.top.location.href = ...
    } catch (e) {
        // Show message to user, e.g. "Form submitted, click here to go to the next step"
    }
}