How to disable cross origin check for embedded starboard-notebook on local website?

[stefaneidelloth]

I try to embed starboard as a widget in a property view and I managed to move the <starboard-notebook> element from body to the wanted dom position:

let starboardElement = document.queryselector('starboard-notebook');
mycontainer.append(starboardElement)

However, I have an issue with the checks from crossOriginIsolated.ts.
I import starboard-notebook from

http://localhost:8888/tree/treezjs/node_moduels/starboard-notebook/dist/starboard-notebook.js

and the current url of my app is

http://localhost:8888/lab

Therefore:

location.pathname ="/lab"
scope.pathname = "/tree/treezjs/node_moduels/starboard-notebook/dist/"

and location.pathname.startsWith(scope.pathname) is false, causing an error.

=> How can I disable the cross origin check to avoid following error?

[gzuidhof]

Ah, fun to see a potential integration into Jupyterlab! :)

I think the short answer is that you should run Starboard Notebook in an iframe inside of JupyterLab (or any web app) on a different origin. Running it without the iframe is a security hazard (if you open my evil notebook it can call JupyterLab's Kernel API and mess with your computer by executing arbitrary Python code.

Of course if this is more of a hobby project and you can trust all notebooks you will ever open then you can get away with a notebook on the same origin. Starboard wrap (https://github.com/gzuidhof/starboard-wrap) makes it easy to do. Without the iframe you will probably also have clashing styles and JS.

Now of course this error you are seeing should be fixed anyhow, I wonder what kind of URL it is trying to construct.. A service worker can only be registered under the path where it is located, so here it won't be succesful anyway :(. For example a service worker on https://bla.com/a/b/myserviceworker.js will only be able to intercept requests from URLs under /a/b/, in your setup these paths are different which will be problematic.

I'm not sure if it is possible to make Jupyter Lab cross origin isolated - I think it is, but you will need to tell Jupyter Lab to set the correct headers (reference).

I'm sorry that this is a bit of an involved answer :(, the entire cross origin isolated / secure context requirements that browsers have nowadays are complicated. If you want you can join the small Discord community and we can have a bit of a tighter feedback loop https://discord.gg/EGgm3mPP

[stefaneidelloth]

Thank you for the fast reply. Security is not an issue for now. Nevertheless, I'll try the iframe thing. Hopefully my model tree will then still be able to interact with the code cells of starboard, to remotely control the notebooks during batch studies or sensitivity analysis.

(My aim is to combine several observable notebooks in a model tree. I am not sure, where this journey is going to, more to Jupyter and akernel or to Starboard and observablehq. Currently I play around a bit to understand available options and their limitations...)

I wonder what kind of URL it is trying to construct

The corresponding code section is shown on first screenshot, line 18 in the dev tools.

[stefaneidelloth]

Using starboard-wrap and importing starboard from cdn source

https://cdn.starboard.gg/npm/[email protected]/dist/index.html

worked without cross origin warnings. I also tried to use starboard-wrap in combination with the local instance of starboard-notebook under node_modules. However, I did not get it working. There is an existing issue ticket on that topic:

gzuidhof/starboard-wrap#5