inertiajs / inertia

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
https://inertiajs.com
MIT License
6.53k stars 434 forks source link

Inertia page in an iframe through srcdoc attribute #1008

Closed tech-codivores closed 1 year ago

tech-codivores commented 2 years ago

Versions:

Describe the problem:

Rendering an Inertia page in an iframe through srcdoc attribute triggers an error in the hrefToUrl function. As the location is about:srcdoc, it fails building a valid URL object when Inertia creates a visit.

image

I know it is a really specific usecase that should not be recommended, but we use Laravel with Twill package (CMS with admin interface) that offers a preview feature using iframe with srcdoc.

Steps to reproduce:

  1. Create a standard HTML page
  2. Include an iframe with Inertia page content as srcdoc attribute
<iframe srcdoc="<!DOCTYPE html>
<html>
<head>
    <meta charset=&quot;utf-8&quot;>
    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot; />
    <script type=&quot;module&quot; src=&quot;http://domain.test:3030/@vite/client&quot;></script>
    <script type=&quot;module&quot; src=&quot;http://domain.test:3030/resources/js/app.ts&quot;></script>
</head>

<body class=&quot;bg-grisUnilever-100&quot;>
    <div id=&quot;app&quot; data-page=&quot;{&amp;quot;component&amp;quot;:&amp;quot;Test&amp;quot;,&amp;quot;props&amp;quot;:{&amp;quot;errors&amp;quot;:{}},&amp;quot;url&amp;quot;:&amp;quot;\/administration\/content\/blog\/blogs\/preview\/126&amp;quot;,&amp;quot;version&amp;quot;:&amp;quot;&amp;quot;}&quot;></div>
</body>

</html>" frameborder="0" style="width: 1280px;"></iframe>
ajnsn commented 2 years ago

Hey @tech-codivores As far as I understand the srcdoc is not providing a proper window.location as per spec this about:srcdocseems to be unresolveable. It seems not be a bug.

As you said that is really specific usecase. This could be a challenge to resolve as alone inside router.ts I find 10 occurences of window.location.

tech-codivores commented 2 years ago

Hi @ajnsn, and thank you for your reply. The discussion started on the Inertia Discord with @RobertBoes and @claudiodekker who asked me to open an issue. Would this be acceptable if I let them decide the follow up to this question?

claudiodekker commented 2 years ago

Hey @tech-codivores,

Thanks again for opening this issue! As mentioned previously / for reference of others, we're going to leave this one for later, as it is technically bug (but doesn't have the highest priority right now given how rare it is to use Inertia this way)

reinink commented 1 year ago

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️