Panel preview does not work on JupyterHub 4.1+ hosted on a single domain

[krassowski]

JupyterHub 4.1 was released on 20th of March 2024 fixing GHSA-7r3h-4ph8-w38g. The fix included a restriction to the Content Security Policy set by default on headers of all jupyter-server responses. This in turn silently broke all applications which relied on embedding the content in an IFrame, including viola and panel (jupyterhub/jupyterhub#4823).

I think this was first reported on Holoviz Discourse on 12th of April as a comment in this thread.

ALL software version info

• panel: latest (tested with main branch)
• bokeh: latest (tested with branch-3.6 branch)
• pyviz_comms: latest (tested with main branch)
• jupyterhub: 4.1 or 5.0
• browser: all modern browsers (Chrome/Firefox/Safari/Edge); not Internet Explorer in which it works because it does not respect CSP

Description of expected behavior and the observed behavior

The "Preview with Panel" button works but after the loading screen an error screen is shown instead of the preview.

Complete, minimal, self-contained example code that reproduces the issue

import numpy as np
import pandas as pd
import holoviews as hv
import panel as pn
pn.extension()

n = pn.widgets.IntSlider(name='n', start=1, end=100, value=50)

def scatter(n):
    data = {"group": np.random.randint(0, 10, n), "value": np.random.randn(n)}
    return hv.Scatter(data, kdims="group", vdims="value").sort().opts()

dashboard = pn.template.MaterialTemplate(
    title="Test",
    sidebar=[pn.WidgetBox(pn.Column("""Description""", n))],
    main=[pn.pane.HoloViews(pn.bind(scatter, n))],
)

dashboard.servable()

Stack traceback and/or browser JavaScript console output

Refused to frame 'https://an.up-to-date.jupyterhub.deployment/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

Screenshots or screencasts of the bug in action

Initially the loading screen shows up ok:

But afterwards once the src has completed loading, the error screen is revealed:

• I may be interested in making a pull request to address this

[krassowski]

hosted on a single domain

This does not affect JupyterHub deployments where administrators set custom tornado headers with a custom Content-Security-Policy overriding the default; it is only safe to do so when using per-user domains (which is not always possible).

I may be interested in making a pull request to address this

I have a solution ready, taking advantage of the srcdoc approach which is already used for the loading screen, and will open pull requests. The changes need to be made in pyviz_comms and in bokeh.

[krassowski]

I opened:

• Fix panel preview rendering on JupyterHub 4.1+ pyviz_comms#125
• Fix rendering on JupyterHub 4.1: respect absolute_url for protocol determination, support data-absolute-url bokeh/bokeh#14003

As a developer I am new to the bokeh/holoviz ecosystems and I am not sure how to navigate the cross-dependencies here; I hope that the proposed changes make sense but if not please do let me know and I can rework it.