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 <iframe sandbox="allow-same-origin"> may solve it, but it may need to be called from the Jupyter notebook rather than the iframe itself. In any case, the current implementation looks broken. My way of solving it was to go back to an older version of the notebook stack (I still had an ~4 months old image cached at my system, so I'm unable to give you the tag number that works).

[Bootcampanalytics]

So, my dear friend and colleague Sudheer, who understands this stuff way deeper than I do dug into the matter and reported the following:

-the issue is caused by the (new) content security policy.
-iframe is not the way to go. The visJS2jupyter should employ posting a div element in the notebook and subsequently populate the div with the HTML. In this way it also prevents creating a local file (which is ugly).

On first sight, you may think you can get away with adding the sandbox attribute (https://www.w3schools.com/tags/att_iframe_sandbox.asp) however, this doesn't work as can be demonstrated by:

%%HTML

<iframe sandbox="allow-same-origin allow-scripts" src="http://:8888/files/work/style_file0.html" width=700 height=350></iframe>

(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!