This issue is related to how Laravel Nova (which uses Inertia.js under the hood) handles network errors, especially when there are unexpected redirects (like 302s) or interruptions (such as switching WiFi or toggling VPN). The "window inside a window" effect is caused by Inertia's error handling mechanism, which tries to render an error page in an iframe, but due to the anti-DDOS service or redirect, it ends up loading the entire Nova app inside that iframe.
Why does this happen?
- When a network request fails or is redirected (302), Inertia tries to display the error response in an iframe.
- If the anti-DDOS service or network change causes a 302 redirect to the same page, the iframe ends up loading the full Nova app, creating the "window inside a window" effect.
- This is more likely in production because of the anti-DDOS service, which may inject redirects or challenge pages that are not present in local/staging.
How to mitigate or fix this:
1. Prevent Nova/Inertia from rendering the app in an iframe
You can add a simple JavaScript snippet to Nova's custom scripts to "break out" of the iframe if Nova ever loads inside one:
// resources/js/nova-iframe-breakout.js
if (window.self !== window.top) {
window.top.location = window.location.href;
}
Then, register this script in your NovaServiceProvider:
// app/Providers/NovaServiceProvider.php
public function boot()
{
parent::boot();
Nova::script('iframe-breakout', public_path('js/nova-iframe-breakout.js'));
}
Compile and publish your assets as needed.
2. Work with your anti-DDOS provider
- Ensure that the anti-DDOS service is not issuing 302 redirects for authenticated users or API requests from Nova.
- If possible, whitelist the Nova admin routes from such redirects/challenges.
- Some anti-DDOS services offer settings to bypass certain paths or user agents.
3. Handle Inertia error responses more gracefully
If you have custom Inertia error handling, make sure it doesn't attempt to render full pages in iframes. You can customize Inertia's error handling in your app.js:
import { createInertiaApp } from '@inertiajs/inertia-vue'
createInertiaApp({
// ...
errorHandler: (error) => {
// Show a friendly error or force a full reload
window.location.reload();
}
})
4. Update Nova and dependencies
- Make sure you're running the latest Nova and Inertia.js versions, as bugs like this are sometimes fixed in newer releases.
Summary:
The root cause is a combination of Inertia's error handling and the anti-DDOS service's redirects. The most reliable fix is to add a "break out of iframe" script to Nova, and if possible, configure your anti-DDOS service to not redirect Nova admin/API requests. This will prevent the "window inside a window" bug from occurring.
Let me know if you need help with any of these steps!