Integrating neo4j interface into react app

[ramy688]

I have encountered a problem and ill be happy if you can help me with it.

I'm building a react app which uses neo4j as the database , and the neo4j database is launched from a docker container since I have to use an older version of neo4j.

I'm trying to integrate a neo4j interface with a react app I built using IFrame , when I try to launch the app and it tries to connect to the localhost port on which neo4j is connected I get an error: "Refused to frame 'http://localhost:7474/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none' "."

What the GUI shows:

 .

Front End code IFrame:

Console error(the error for the missing interface):

 

Additionally , I will have to visualize the database into a coherent graph for the end user to understand , from my research I concluded that ill be using APOC in order to visualize the graph the way I need it to look.

I've done some additional research after that and stumbled into neodash which looked like the correct tool for me , but the issue is that I couldn't find any neodash container integrated with the APOC library , so I would like to hear about other alternatives or suggestions for this problem.

Thank you for your time and effort in answering this.

[david_allen]

On the "frame ancestors" problem, there can be two causes.  First, in React you can set various content security policy tags in your app.  It looks as though the app that's wrapping Neo4j has explicitly disallowed iframe content, so that's why your content is getting blocked.   Check this page for more information.  Another way this crops up is "mixed origin".  If your webapp is https and you're trying to iframe an http page (which looks like it's happening here) often the browser will block you because the page is supposed to be secure (https) and many browsers won't let you load insecure data (http) on a secure (https) origin.  So this could be the cause of the problem too.  If so, you need to either make the page http, or else iframe an https source (port 7473) in so that the security origins may match.  Note that even in the case where you iframe in port 7473 https with Neo4j, there's still a possibility of cert mismatch, i.e. the browser not trusting the https cert provided by Neo4j, so something to check there.

As for APOC and neodash, these things are at different levels of the Neo4j stack.  neodash is more like a dashboard tool, a web application, and APOC is a set of built-in procedures in the database.  Neodash can use APOC via the queries it executes.  APOC doesn't use neodash because it's at a lower level of the stack.