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

[Jackie Ng]

A follow up on this.

Based on the latest 0.14.x release, I believe it is this line that is
causing the cross-origin errors.

https://github.com/jumpinjackie/mapguide-react-layout/blob/0.14.x/src/containers/viewer-shim.tsx#L1175

If you put a try/catch around this line, it should no longer happen.

Now why would we be trying to install shim APIs in 2 places? It was to
allow for task pane content that tried to interact with top-level viewer
APIs at parent.parent in their javascript which would be valid for the
frame-heavy AJAX viewer, but we try to emulate this frame hierarchy in
mapguide-react-layout, which would work fine ... until you try to
frame-embed the mapguide-react-layout viewer in a different domain.

If you are confident you won't be loading any Task Pane content that
interacts with viewer APIs through parent.parent, then give the try/catch
fix a go.

- Jackie

On Tue, 19 Aug 2025 at 20:39, Jackie Ng <jumpinjackie at gmail.com> wrote:

> 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?
>
>
>

-- 
http://themapguyde.blogspot.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/mapguide-users/attachments/20250829/1dd1b73b/attachment.htm>