Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

[Bootcampanalytics]

I encountered this with a newer version of Jupyter notebook. I think it has to do with a change of the Tornado version.

This is how to replicate:

(pull the most recent image from Docker, 3 days old at the time of writing) docker run -p 8888:8888 jupyter/scipy-notebook:6c85e4b43a26

do a !pip install visJS2jupyter

Next, follow the basic example (https://github.com/ucsd-ccbb/visJS2jupyter/blob/master/notebooks/default_params_example/visJS2Jupyter_basic_example.ipynb)

Use f12 to look at the console error.

The line is crashes on is: function init() { window.parent.setUpFrame(); return true; }

I believe that using

(You do this after the regular graph call created this style_file0.html file.). The HTML inserts the iframe with the proper attributes. The reason it doesn't work can be found here:

https://github.com/jupyter/notebook/blob/master/notebook/static/base/js/security.js (Jupyter notebook employs a js scrubbing scripts to get rid of anything they don't want).

If you run the notebook in a Docker, the way around this is to setup nginx with specifically the following lines: for all locations, you give: proxy_hide_header Content-Security-Policy; proxy_hide_header X-Frame-Options; and for the server you add: add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src http: ws: https:; style-src http: https: 'unsafe-inline' 'unsafe-eval'; script-src 'unsafe-inline' 'unsafe-eval' http: https:";

that is: for all the services, you remove the headers, and then nginx puts back the headers that you want.

Sudheer, you are awesome to have found all this out! Thank you! I bet other people running into the same will be helped by your deep understanding of the matter :)

[Bootcampanalytics]

There's an easy way out, ugly but functional:

install https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

[brinrosenthal]

thanks for looking into this and posting a solution!! this problem seems to be popping up frequently, but we have not been able to reproduce it on our end (and only have limited time to maintain this tool...).

[kinoc]

Using Firefox on Windows this extension seems to fix it for me: https://addons.mozilla.org/en-US/firefox/addon/ignore-x-frame-options-header https://github.com/ThomazPom/Moz-Ext-Ignore-X-Frame-Options Also check any ad-blocker settings to "allow all this tab".

[snjjay]

Because of the 'Cross-origin' request, the 'blocked a frame with origin "null" from accessing a cross-origin frame' error occurs. There are several workarounds to this problem, such utilising a 'local web server' or using a browser with 'cross domain web security' deactivated, to name a few. This article will go over all of the options for dealing with cross-origin concerns. Refer to this link: https://kodlogs.net/195/blocked-a-frame-with-origin-null-from-accessing-a-cross-origin-frame

[davidfoutch42]

I cannot find a browser where this code actually produces a network and multiple colleagues are unable to do the same. Why post tools that don't work?

[AmandaBirmingham]

Hi, @davidfoutch42 -- Welcome to Github! For any future posts, please keep in mind that difficulties you report generally cannot be addressed without reproducibility information (see https://www.softwaretestinghelp.com/how-to-write-good-bug-report/ ).

However, visJS2jupyter is not under active development. As shown in the code history, this tool is over 5 years old (which is down-right ancient in web years!) and various security policy changes--documented above in this issue--have negatively affected its usability. Nonetheless, since the software is published (https://pubmed.ncbi.nlm.nih.gov/28968701/) and the code for the publication was made available through this github repository, the repo remains available as part of the publication record.

Best of luck in your future coding!