Iframe error: Unsafe attempt to initiate navigation for frame with origin A from frame with URL B

I have an React App with origin A.

In “/overview” page, I am loading an Iframe with url B from a different origin.

Links in url B is attempting to navigate to a route(/article) in my App with origin A. Then I get this error and no network request is fired:

“unsafe attempt to initiate navigation for frame with origin A from frame with URL B. The frame attempting navigation is neither same-origin with the target, nor is it the target’s parent or opener”

My code works fine locally, I was able to open links in iframe and it will redirect to my route(/article), but when I deployed it to our server, it is not working.

I tried create iframe with useEffect and set iframe.contentWindow.opener = window;
It does not work. looks like we can’t append childElement to another element with useEffect?

I saw some solution that ask me to set “sandbox” property for iframe. For now “sandbox” is not present in my iframe. the document says that means no restriction is applied. is that correct?

I’d like to try set whitelist of our deploy environment, but I am not sure how to do this.