跨域问题（iframe）记录

喜欢ヅ旅行 2022-05-27 02:30 383阅读 0赞

> 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> 
        
    
    
    </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][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][https_github.com_jupyter_tmpnb_issues_263]  
> 2.[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors][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_8888] [http://localhost:5000][http_localhost_5000] [http://127.0.0.1:5000][http_127.0.0.1_5000] [http://127.0.0.1:8888][http_127.0.0.1_8888];” \}\}’

再次嵌入ok了。

[http_localhost_8888_notebooks_exp-2-Copy1_20_1_.ipynb]: http://localhost:8888/notebooks/exp-2-Copy1%20%281%29.ipynb
[https_github.com_jupyter_tmpnb_issues_263]: https://github.com/jupyter/tmpnb/issues/263
[https_developer.mozilla.org_en-US_docs_Web_HTTP_Headers_Content-Security-Policy_frame-ancestors]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
[http_localhost_8888]: http://localhost:8888
[http_localhost_5000]: http://localhost:5000
[http_127.0.0.1_5000]: http://127.0.0.1:5000
[http_127.0.0.1_8888]: http://127.0.0.1:8888