跨域问题（iframe）记录

Posted 2022-12-10 haliofwu

an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’

场景描述：
iframe内嵌jupyter页面；
本地安装jupyter,命令行jupyter notebook开启，在本地开发环境下的页面内嵌入iframe

<div id="left">
    <button class="button-test" >测试</button>
</div>
<div id="right">
    <iframe id="nb-iframe" src="http://localhost:8888/notebooks/exp-2-Copy1%20(1).ipynb" style="width:800px;height:600px;"></iframe> 
    <!-- <iframe width="560" height="315"  src="https://www.youtube.com/embed/YOUR_VIDEO_CODE" frameborder="0" allowfullscreen></iframe> -->


</div>

<style>
*
    margin:0;
    padding:0;

 #left
     width:200px;
     height: 800px;
     background-color:#ccc;
     float:left;
 
 #right
     height: 800px;
     margin-left:200px;
     padding-left:20px;
 

.button-test
    padding-left:10px;
    padding-right:10px;
    background-color:aqua;
    border-radius: 4px;


</style>  

报错：

Refused to display ‘http://localhost:8888/notebooks/exp-2-Copy1%20(1).ipynb’ in a frame because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’”.

解决方法：

1.https://github.com/jupyter/tmpnb/issues/263
2.https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors

启动方式：

jupyter notebook –NotebookApp.tornado_settings=’“headers”:“Content-Security-Policy”:”frame-ancestors self http://localhost:8888 http://localhost:5000 http://127.0.0.1:5000 http://127.0.0.1:8888;” ’

再次嵌入ok了。