4

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?

AS-Sher
  • 384
  • 1
  • 4
  • 18

1 Answers1

5

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.*

  1. 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
  1. 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']

  1. 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:

Amal Vijayan
  • 649
  • 2
  • 6
  • 26
  • I tried the above approach, but I am still facing the same error. I am using a simple HTML file for the iframe. What should the frame ancestor value be for that? – AS-Sher Feb 26 '20 at 06:23
  • try this : – Amal Vijayan Feb 27 '20 at 03:40
  • I am running jupyterhub on a separate machine. I tried . But still im facing the same issue. Refused to display 'http://10.201.11.44:8002/hub/login?next=%2Fhub%2Fuser%2Fadmin%2Flab' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors * 'self'". – AS-Sher Feb 27 '20 at 05:22
  • I got the iframe to work, I am now getting the login page. But as soon as i try logging in, I get the following error :- Blocked autofocusing on a form control in a cross-origin subframe. – AS-Sher Feb 28 '20 at 12:57
  • This is how I was able to achieve the iframe embed. I followed the installation tutorial here : tljh.jupyter.org/en/latest , then did the above work around. Make sure to add an letsencrypt free ssl certificate - tljh.jupyter.org/en/latest/howto/admin/https.html – Amal Vijayan – Amal Vijayan Mar 05 '20 at 02:36