Failed postMessage from my own React project to ohif iframe

Support Development
1

Describe Your Question

  • I want to post message to the ohif iframe, but I failed. I found that ohif iframe only recieves the message from itself, but I didn’t post message from ohif.
  • Which OHIF version you are using?
    3.9.0-beta.79 (Latest)

What steps can we follow to reproduce the bug?

  1. First step
    This is my own project, running on localhost:3001/home
useEffect(() => {
    if (showOHIF) {
      const iframe = document.getElementById('ohif-viewer');
    
    iframe.onload = () => {
      console.log('Parent: Sending message to child iframe');
      
      iframe.contentWindow.postMessage({ userRole: 0 }, 'http://localhost:3000');
    };
    }
  }, [showOHIF, userRole, selectedStudyUID]);type or paste code here

and the message should be sent correctly, because I write another app to take place the ohif, it worked and could successfully post the message.
2. Second step
This is the header.tsx
useEffect(() => {
const handleMessage = event => {
if (event.origin !== ‘http://localhost:3001’) {
return;
}
alert(event.origin);
console.log(‘message’);
console.log(event.data);
const { userRole } = event.data;

  //alert(userRole);
  if (userRole === 0) {
    setBack(false);
  }
};

window.addEventListener('message', handleMessage, false);

return () => {
  window.removeEventListener('message', handleMessage);
};

}, );
3.webpack
follow the instruction, I do add this in webpack.pwa.js:
headers: {

    'Cross-Origin-Resource-Policy': 'cross-origin',
    'Cross-Origin-Embedder-Policy': 'cross-origin',
    'Cross-Origin-Opener-Policy': 'cross-origin',
    // 'Cross-Origin-Embedder-Policy': 'require-corp',
    // 'Cross-Origin-Opener-Policy': 'same-origin',
  },

Please use code blocks to show formatted errors or code snippets
2

I’m unsure about the exact problem. Is the OHIF iframe behaving differently from other iframes? Have you tried sending a message to a basic iframe to see if it works?