Problem with sharing a geostory on a website using html code

[joshuaturia]

I have a website that was built using elementor and I used a html widget to view my geostory on it. It was working fine until a few days ago (maybe earlier) I just realized this issue now (08/05/24). The widget now displays this error message: refused to connect, which is weird because I didn't make any changes to the geostory and its set so anyone can view it.

Geonode instance: png-geoportal.org
Website: https://pngbcf.org/png/
Geostory: https://png-geoportal.org/apps/5/embed

and here's the html code I used: <iframe allowFullScreen style="border: none;" height="600" width="800" src=https://png-geoportal.org/apps/5/embed></iframe>

I'm guessing the issue is to do with the geonode instance server, but I have no idea how to fix it. I want it to allow websites to be able to connect to it.

[t-book]

Are you sure that Website: https://pngbcf.org/png/ includes the iframe.
I cannot find it in the DOM

[joshuaturia]

hi @t-book, thanks for responding. I took it down but I just added it back. You can try check again.

[ridoo]

@joshuaturia There are lots of jQuery errors while loading the page. However, your GeoNode config dissallows to be embedded in a site which is not served from itself:

Refused to display 'https://png-geoportal.org/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

See here for more details: https://docs.djangoproject.com/en/3.2/ref/clickjacking/

Either remove the django.middleware.clickjacking.XFrameOptionsMiddleware to allow embedding from all sites, or try to configure somthing like this: X_FRAME_OPTIONS = 'ALLOW-FROM https://pngbcf.org'