Allow "Render with Voilà" button to open new tab

[minrk]

Problem

JupyterHub CORS policy usually prohibits embedding Jupyter Server pages in iframes, which means the in-panel voila viewer in the JupyterLab extension doesn't work:

Refused to load https://jupyterhub.example.org/user/minrk/voila/render//sample-charts.ipynb because it does not appear in the frame-ancestors directive of the Content Security Policy.

But launching in a new tab works fine:

Aside: it would probably be appropriate to display an error if you can detect it, rather than purely an empty white panel with no messages visible to the user except in the js console.

Proposed Solution

It would be nice to have a configuration option to set the voilà toolbar button to invoke the "Open with Voila in new browser tab" action instead of the preview pane when it doesn't work.

Double nice, though I'm not sure it is possible, would be launch the tab automatically if the IFrame fails to load. I'm not sure that is doable, though, and I assume pop up blockers would prevent it since it would be too far removed from the click event.

Additional context

JupyterHub default CORS does not allow frame-ancestors: self because multiple users share the same domain in the default configuration, so no iframe is safe.

[cosmicfarmers]

Hello,

I have the same (maybe) issue.

I tried the below but it is ignored; the frame-ancestors is still none.
https://discourse.jupyter.org/t/button-render-with-voila-connection-refused/26435/4

Error:
Refused to frame '<my_host>' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

Have you tried the solution in the link?

[minrk]

The solution in the link doesn't work for me because that's explicitly disabling security protections for the Jupyter server, granting all users of the Hub full access to each others' servers. I would like to be able to use the button without disabling security.

[minrk]

I did find a way that appears to work to keep voilà iframes working: get the page content with fetch, then load it with srcdoc instead of src:

// fetch HTML with credentials
r = await fetch(url, {headers: Authorization: "Bearer TOKEN"})
html = await r.text()
// put HTML in iframe srcdoc to avoid CSP issues on src
iframe.srcdoc = html

This works because fetch can use proper credentials to verify that it's originating from an authenticated source, which iframe src= can't do in jupyterhub (I believe it's impossible to distinguish requests from /user/you from /user/me other than using access tokens or csrf tokens). It also works for voila because they are single pages. It won't work for other iframes that have in-page navigation, because the URL is lost and the navigation requests will subsequently be blocked by frame-ancestors.

[ctcjab]

Just found my way here after hitting the common 'sad iframe' issue with Voilà on JupyterHub due to Content Security Policy.

I would suggest a change to the proposed solution in this issue description: Instead of exposing a configuration option – which users would have to opt into – to change the behavior of the toolbar button to open the page in a new tab rather than iframe, instead just unconditionally open the page in a new tab, since that is the mode that always works, and opening in an iframe is the mode that breaks on JupyterHub.

If a new configuration option is going to be exposed, at least set it to open in a new tab by default, so JupyterHub users don't all have to change the setting to be able to use Voilà.

One more suggestion, in the UI above the iframe, always include an "open in new tab" link (possibly even with a hint like "try this if the below does not load") alongside the "refresh" and "render on save" controls:

[minrk]

I think the error is detectable, so it could open in a new tab as needed without necessarily changing the default. But I agree that the open-in-tab option should be more user-visible by default.