iframe 标签内嵌 jupyter notebook

Posted 2022-12-12 ~无关风月~

默认 jupyter notebook 的 HTTP Content-Security-Policy (CSP) 安全策略是不允许父类将 jupyter notebook 页面嵌入到 <frame>、<iframe>、<object>、<embed>或<applet> 中的。

使用 <frame> 嵌入：

<iframe id='rightframe' name='leftiframe' width="70%" src='https://192.168.1.128:9999/tree?'></iframe>

会报错：

Refused to display ‘https://192.168.1.128:9999/tree?’ in a frame because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’”.

需要修改 jupyter notebook 配置使其允许指定IP的父类元素 内嵌 jupyter notebook 页面。

（1）修改 vim ~/.jupyter/jupyter_notebook_config.py

c.NotebookApp.tornado_settings =  'headers':  'Content-Security-Policy': "frame-ancestors http://*.*.*.*:8080 http://192.168.1.101:8080 http://192.168.1.1:8080 http://10.5.114.78:8080 http://localhost:8080 'self' " 

其中 ‘self’ 表示允许本身访问，前面的表示允许前面来自各种IP的嵌入请求。

（2）增加文件 ~/.jupyter/custom/custom.js

define(['base/js/namespace'], function(Jupyter)
	    Jupyter._target = '_self';
);

这样可以使新创建的 notebook在本页打开。

效果：

参考：
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
https://github.com/jupyter/notebook/issues/886
https://github.com/jupyter/notebook/issues/284#event-491018840