[mapguide-users] mgreact viewer: How to solve“Blocked a frame … from accessing a cross-origin frame”

[Jackie Ng]

Responses to your questions

1. There is no current recommended way to handle cross-domain embedding
because it is not something I had considered.
2. There is no postMessage frame communication.
3. There is no server config that can help here.
4. That is a difficult question because mapguide-react-layout 0.15 dev work
is underway and the code has undergone significant changes and churn since
0.14.x. If you favor stability and choose to customise based on the latest
0.14.x release, those changes will be quite difficult to bring across.
Still I'd say changing the code from the 0.14.x branch is probably the way
to go and we deal with how to incorporate these changes into 0.15 if/when
the time comes.

Now despite all of what I just said, if domain1 website is just frame
embedding the viewer hosted on domain2 without actually programmatically
interacting with that viewer from domain1 in any way, then I think the
actual issue here is that our code that tries to install the Fusion API
shim into window.Fusion is just walking up *too may parent levels* and
accidentally stepped into domain1's DOM (and cross-domain protections
kicked in) when all the viewer-shim is wanting to do is trying to walk up
to the topmost parent of domain2's DOM and set window.Fusion there.

So if I got your usage scenario correct, then it's really just fixing up
the "get to the topmost parent of domain2's DOM" logic so that we don't
cross over into the DOM of the embedding domain1.

If however, you have javascript on domain1's DOM that wants to interact
with the viewer on domain2's DOM and vice versa, then all I can say is:
You'll have to implement a cross-origin communication layer based on
window.postMessage, but even in this case the viewer-shim should still not
be trying to set window.Fusion on domain1's DOM, it should still be trying
to set it on the topmost parent of domain2's DOM.

Irrespective of which scenario you are actually trying to achieve, the
logic behind where to set window.Fusion by viewer-shim is probably wrong in
either case and needs to be addressed first.

Hope that helps

- Jackie

You wrote:

We have a MapGuide setup where the application is hosted at: https://domain
*1*.com
And  the map is served from: https://domain*2*.com

When embedding the MapGuide Viewer (reactviewer) in an <iframe> on my
application domain1, We get the following error in the browser console:
SecurityError: Failed to set a named property 'Fusion' on 'Window':
Blocked a frame with origin "https://wms.geomind.co.il" from accessing a
cross-origin frame
    at t.componentDidMount (viewer-shim.tsx:1169:14)

*p.s - It works fine under AjaxViewer*

I understand this is a browser cross-origin restriction. In my case, I
cannot simply merge the domains into one, and I need a solution to allow
the application to communicate with the viewer without getting blocked.

*My questions:*

   1.

   Is there a recommended way in MapGuide to handle cross-domain embedding
   between the application and the viewer?
   2.

   Does mgreact have a built-in API to handle postMessage communication
   between iframe and parent, or do I need to implement a custom widget?
   3.

   Is there any server-side configuration in MapGuide or Fusion that can
   bypass the window.top.Fusion assignment in viewer-shim.tsx for
   cross-origin cases?
   4.

   If I have to modify viewer-shim.tsx, what is the best practice to keep
   it compatible with future MapGuide updates?
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/mapguide-users/attachments/20250819/e72a57dd/attachment.htm>