HTML export not working when embbed in iframe

[vincent-grosbois]

Description

When using ipyaggrid, it's possible to create a grid component (usually to be displayed in jupyter), and also to export it as a stand-alone HTML page.
If I export the grid component as a HTML page, and open the stand-alone HTML page on my browser, it works fine.
However, if I try to open the HTML page from the jupyter notebook explorer, or from the jupyterlab explorer, it fails to render.
It's also the same issue that I get if I try to embed the HTML content in an iframe.

I'm trying to understand where the issue is coming from. AFAIU It's a problem with amd-embed.js, but I'm unable to understand what would cause it to behave differently between being rendered normally and in an iframe.
Can you please confirm if it's indeed a bug in components located on this repo, and potentially a way to solve this ?
thank you !

Reproduce

pip install jupyterlab
pip install ipyaggrid==0.3.0

In jupyterlab notebook file, export to HTML a grid component

from ipyaggrid import Grid
grid_options = {
    'columnDefs':[{'field':'x'}],
    'enableFilter':True,
    'enableSorting':True,
    'animateRows':True,
}
g = Grid(grid_options=grid_options,
         grid_data=[{'x':'1'}],
         paste_from_excel=True)
g
text = g.export_html(build=True)
with open("test.html", "wb") as f:
    f.write(text)

--> test 1: open test.html in your browser: it should display a grid component (after few seconds loading)
--> test 2: open test.html from jupyterlab: fails to render
--> test 3: wrap test.html in an iframe, and open it in your browser: fails to render

For tests 2 and 3 I get the same error in js console, which is :

embed-amd.js:26 Uncaught TypeError: Failed to construct 'URL': Invalid URL
    at embed-amd.js:26:37945
    at Object.<anonymous> (embed-amd.js:26:41241)
    at Object.execCb (require.min.js:1:12861)
    at b.check (require.min.js:1:6615)
    at b.enable (require.min.js:1:9363)
    at Object.enable (require.min.js:1:11918)
    at b.<anonymous> (require.min.js:1:9220)
    at require.min.js:1:814
    at each (require.min.js:1:289)
    at b.enable (require.min.js:1:8720)
(anonymous) @ embed-amd.js:26
(anonymous) @ embed-amd.js:26
execCb @ require.min.js:1
check @ require.min.js:1
enable @ require.min.js:1
enable @ require.min.js:1
(anonymous) @ require.min.js:1
(anonymous) @ require.min.js:1
each @ require.min.js:1
enable @ require.min.js:1
init @ require.min.js:1
(anonymous) @ require.min.js:1
setTimeout (async)
req.nextTick @ require.min.js:1
o @ require.min.js:1
requirejs @ require.min.js:1
(anonymous) @ embed-amd.js:29
(anonymous) @ embed-amd.js:29
DevTools failed to load source map: Could not load content for https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd-render.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

From what I've been able to understand, it could be due to this line:
https://github.com/jupyter-widgets/ipywidgets/blame/763dbb9f9278d2f9fe7121a124cb79bf9e31f239/packages/html-manager/amd-public-path.js#L5 where document.location is null in the case of iframe, but I'm not 100% sure

Attached in the zip file are the working test.html file, and the non-working code wrapped in an iframe test_wrapped.html file

Expected behavior

generated HTML file renders correctly both in "standalone" and in jupyter / iframes
Archive.zip

[vincent-grosbois]

Small update:
In the generated HTML code, if I replace the script block:

<script 
  src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js" 
  crossorigin="anonymous">
</script>

by (that I picked up from an example file in this repo):

        <script>
            require.config({
                bundles: {
                    "@jupyter-widgets/html-manager/dist/embed-amd": [
                        "@jupyter-widgets/html-manager", 
                        "@jupyter-widgets/base", 
                        "@jupyter-widgets/controls"
                    ]
                },
                paths: {
                    "@jupyter-widgets/html-manager": [
                        // "html-manager", // if a symbolic link is set up to the html-manager package for local dev
                        "https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager",
                    ]
                },
            })
            require(["@jupyter-widgets/html-manager/dist/embed-amd"], () => {
                console.log("Processing widgets on page");
            });
        </script>

This seem to work from an iframe too, but this still doesn't work in jupyterlab
I'm quite lost as to what is happening differently in both cases, I would think that both systems would dowload the latest version.

[vincent-grosbois]

This is interesting, it seems the code I wrote above works in jupyterlab in firefox but not in chrome

So just to recap:
if you take the attached HTML file test.zip that was generated with ipywidgets

1. it should open fine in regular HTML browser (chrome/firefox)
2. it should open fine from jupyterlab in firefox
3. it will fail to render in jupyterlab in chrome

In chrome console log I get the following 2 errors:

require.min.js:1 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:8888/login?next=%2Ffiles%2Fipyaggrid.js with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

and

embed-amd.js:16 TypeError: Cannot read properties of undefined (reading 'AgGridModel')
    at embed-amd.js:16:586697
    at async xc.loadModelClass (embed-amd.js:16:585110)
    at async xc._make_model (embed-amd.js:16:581595)

Do you have any idea why this would fail to render in chrome, especially in chrome in jupyterlab ?