Not able to embed Jupyterlab running on Jupyterhub into an iframe

Question

I am trying to integrate jupyterlab running with jupyterhub into an iframe. I made all the required changes in the configuration files. In the jupyter_notebook_config.py I have made the following changes.

c.NotebookApp.tornado_settings = {'headers': {
    'Access-Control-Allow-Origin': '*',
    'Content-Security-Policy': 'frame-ancestors http://localhost:9005'
  }}

while in the jupyterhub_config.py I have added the following

c.JupyterHub.tornado_settings = {'headers': {
    'Access-Control-Allow-Origin': '*',
    'Content-Security-Policy': 'frame-ancestors http://localhost:9005'
  }}

But still, when I try to open http://localhost:8002/user/admin/lab URL in the iframe I get the following error

Refused to display 'http://localhost:8002/user/admin/lab' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

Can someone let me know if I am missing something or is there an issue with my configuration?

Answer 1

Here is a work around,

• Have a common notebook configuration file for all the users who log into Jupyterhub.
• Pass the configuration file as spawner args.

Follow the procedure below:

1. Create a file named jupyter_notebook_config.py in a specific location say /home/shared_config/

You can either create the file manually using a text editor like vim or generate a default coinfig file using jupyter notebook with the following command

jupyter notebook --generate-config

Note that the above command requires jupyter notebook to be installed (pip3 install jupyterhub notebook)

After the installation if you face an error related to ruamel.yaml version on loading the tljh-config, execute the following command: pip3 install ruamel.yaml==0.15.*

2. Open the jupyter_notebook_config.py file that you created above and add the following code:

   c.NotebookApp.tornado_settings={'headers': {'Content-Security-Policy': "frame-ancestors * 'self' "}}

change the permission of the file using the following code:

chmod -R 755 /home/shared_config/jupyter_notebook_config.py

3. Open you jupyterhub configuration file (by default located in /opt/tljh/config/jupyterhub_config.d/jupyterhub_config.py) and add the following code:

Note: you can generate jupyterhub configuration file using the following command: jupyterhub --generate-config

c.Spawner.args = [ '--config=/home/shared_config/jupyter_notebook_config.py']

4. Reload the tljf-config using the following command:

   sudo tljf-config reload

Happy coding !!

Here is what my config looks like

-- /opt/tljh/config/jupyterhub_config.d/jupyterhub_config.py

c.JupyterHub.tornado_settings = {'headers': {'Content-Security-Policy': "frame-ancestors * 'self' "}}
c.Spawner.args = [ '--config=/home/ubuntu/jupyter_notebook_config.py']

-- /home/shared_config/jupyter_notebook_config.py

c.NotebookApp.tornado_settings={'headers': {'Content-Security-Policy': "frame-ancestors * 'self' "}}

Some useful references and related issues:

• https://jupyterhub.readthedocs.io/en/stable/getting-started/config-basics.html
• https://minrk-notebook.readthedocs.io/en/latest/config.html
• https://jupyterhub.readthedocs.io/en/stable/getting-started/spawners-basics.html
• https://github.com/jupyterhub/jupyterhub/issues/335
• https://github.com/jupyterhub/the-littlest-jupyterhub/issues/312
• https://github.com/jupyter/notebook/issues/3904
• https://github.com/jupyterhub/jupyterhub/issues/379