Notebook: [docs] Setting up CSP for embedding notebook (eg: in iframe)

[satendrakumar]

Hello @qmaxquique

I am also facing same problem(issues#284) with iframe. I have tried as you have mentioned "c.NotebookApp.tornado_settings". It didn't work.
I have tried both way:

without SSL getting error

[W 16:43:55.857 NotebookApp] Content security violation: {"csp-report":{
    "blocked-uri":"",
    "document-uri":"http://192.168.2.115:9999/tree",
    "original-policy":"frame-ancestors http://192.168.2.115:9999; report-uri http://192.168.2.115:9999/api/security/csp-report",
    "referrer":"http://192.168.2.115:9191/",
    "violated-directive":"frame-ancestors http://192.168.2.115:9999"
}}

using SSL getting error:
[W 16:42:20.882 NotebookApp] Content security violation: {"csp-report":{
    "blocked-uri":"",
    "document-uri":"https://192.168.2.115:9999/tree",
    "original-policy":"frame-ancestors https://192.168.2.115:9999; report-uri https://192.168.2.115:9999/api/security/csp-report",
    "referrer":"http://192.168.2.115:9191/",
    "violated-directive":"frame-ancestors https://192.168.2.115:9999"}}

[Carreau]

please indicate which exact setting you used, and on which domain you are trying to host ?

It seem like you are trying to host on port 9191 and only allowing 9999.

[satendrakumar]

Thanks @Carreau
Actually i am try on my local box for testing after that I will deploy on AWS EC2 node.
I have added these setting into /home/sky/.jupyter/jupyter_notebook_config.py file:

c.NotebookApp.port = 9999

c.NotebookApp.ip = '192.168.2.115'

c.NotebookApp.tornado_settings = { 'headers': { 'Content-Security-Policy': "frame-ancestors 'self' https://192.168.2.115:9999/" } }

[Carreau]

"frame-ancestors 'self' https://192.168.2.115:9999/"

That's redundant, if the notebook port and app are 192.168.2.115 and 9999 self is 192.168.2.115:9999, what you want to put there is the website you would be embedding into.

[satendrakumar]

yes, suppose my website URL is ec2-xx-xx-xxx-xx.compute-1.amazonaws.com and port is 9999.
So what would be configuration setting ?

[Carreau]

Depends, let's say I have a notebook server that runs on ec2, and that i want to embed a notebook on https://blog.jupyter.org, it would likely look like:

c.NotebookApp.tornado_settings = { 'headers': { 'Content-Security-Policy': "frame-ancestors 'self' https://blog.jupyter.org/" } }

But I'm not an expert on that.

There seem to be an example in old docs that seem to be missing on new one.

[Carreau]

Renamed issue to remind us to write better documentation on that, or make it easier to find.

[satendrakumar]

Thank you very much @Carreau. It is working fine now.

[satendrakumar]

@Carreau When creating a new notebook it will open into new browser(or new tab). Is this possible it will open in same browser(same tab) ?

[Carreau]

Hum, likely yes, you need to inject JS (through custom.js) and change the value of require('base/js/namespace')._target which by default is _blank to one of the supported value that suit you the most.

[willingc]

@carreau Thanks for tagging this for documentation review :+1:

[satendrakumar]

Hello @Carreau

I am trying something like:
Created file ~/.jupyter/static/custom/custom.js

require(['/tree/js/notebooklist'], function(notebookList){

NotebookList.prototype = function(notebook){
  notebook.open("", "_self")
}

})

added path into jupyter_notebook_config.py

c.NotebookApp.extra_static_paths = ["static/custom/custom.js"]

But it didn't work. Any idea what is wrong here ?

[Carreau]

That's definitively not the right way to do it, but it works:
Better would be to write an extension for /tree/ and enable it in the config.

~ $ cat ~/.jupyter/custom/custom.js
define(['base/js/namespace'], function(Jupyter){
    Jupyter._target = '_self';
})

[satendrakumar]

@Carreau : Yes definitively, I was wrong. Now it is working. Thank you so much for your help.
Now I am going to close this issue.

[Carreau]

Reopening to fix docs.

[echozdog]

@Carreau I used this setting to get the notebook login page to show up on an iframe on socrates-login1/jupyter

c.JupyterHub.tornado_settings = {'headers': {'Content-Security-Policy': "frame-ancestors 'self' http://socrates-login1/"} }

And it works for the login page. But once the logged in I get the same error for the user profile pages.

Refused to display 'http://socrates-login1:7800/user/psplinter/tree' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

Do I need to set this for each user?
Here is how I'm running juptyerhub

source /opt/cray/anaconda3/bin/activate /opt/cray/jupyter/python3_venv
module load /opt/modulefiles/python/python3
/opt/cray/jupyter/python3_venv/bin/jupyterhub --no-ssl -f /etc/jupyterhub/jupyterhub_config.py &

[rcquantuniversity]

I faced the same issue and was debugging since 2 days. Finally this post saved me!
Thanks guys for this article.
Cheers!

[KOSSOKO]

@Carreau after creating the custom.js, how did you specify your jupyter to use this file ? I create the custom.js in the forlder ~/.jupyter/custom/custom.js, restart my docker image, but nothing happened. Still have my notebook in a new tab.

[astrojuanlu]

I guess the docs still need updating?