JupyterHub integration in Web Application

JupyterHub
,
1

Hi Jupyter community,

We are trying to integrate the Jupyter Hub into our web application. The integration is based on embedding the Jupyter Hub URL using iframe in the HTML. We are able to embed the login page but not able to go ahead. The error we are getting is: Blocked autofocusing on a <input> element in a cross-origin subframe..

The configuration is as followos:

in jupyterhub_config.py:

c.JupyterHub.tornado_settings = {
“headers”: {
“Content-Security-Policy”: “frame-ancestors ‘self’ ip:port”,
“Access-Control-Allow-Origin”: “ip:port”,
}
}

in jupyter_notebook_config.py:

c.NotebookApp.tornado_settings = {
“headers”: {
“Content-Security-Policy”: “frame-ancestors ‘self’ ip:port”,
“Access-Control-Allow-Origin”: “ip:port”,
}
}

we have also tried the variation such as removing self, including * in the above config. But the error persists. :roll_eyes:

Kindly suggest the solution or provide links for the same.

Thank you :slight_smile:

2

Relaxing the browser’s security restrictions is a recipe for disaster: I’d really want to have the pipe between an application and the jupyterhub client application be as well characterized as possible, and iframe.contentwindow.execute isn’t.

About the best course of study i can offer: you may wish to look through examples of postMessage across this forum.

Basically, on the JupyterHub side:

  • write an extension/template/whatever that lives inside the JS of the jupyter application you wish to integrate with
    • implement a postMessage API which can call existing JS methods
    • so instead of $('#login').click(), you’d call the actual method…
      • unless the actual method is on the button handler…
      • but then still only your extension has to know that, not your API code
    • configure that to only listen for “known good” hosts, like your application’s domain/host
  • on your side:
    • update your application to use the postMessage
2 Likes