The target origin provided does not match the recipient window's origin (Iframe integration)

Community Support
1

Hi all, having some issues setting up iframe integration :frowning:

My Rocketchat is hosted at https://chat.mydomain.com

My web app (where the iframe is) is hosted at https://app.mydomain.com

I’ve been able to register the user fine on the back, returning an authToken when they login. When I try the to post the authLogin back to the iframe from within my ReactJS application…

<iframe src="https://chat.scoopmarkets.com/?layout=embedded" onLoad={() => this.login()} />

...

onLoad(){
	window.parent.postMessage({
		event: 'login-with-token',
		loginToken: authToken
	}, 'https://chat.mydomain.com');
}

… I get the following error however:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://chat.mydomain.com') does not match the recipient window's origin ('https://app.mydomain.com').

Any ideas?

p.s. Ive enabled iframe integration in the settings as well as enabled CORS.

2

To see if this works at all, see what happens if you change ‘https://chat.mydomain.com’ with ‘*’ If that works then you have a cross domain issue. Remember that the domain you specify has to perfectly and exactly match.

3

Hi, if change it to ‘*’. i resent, i see no request sent from my browser.

4

Hi Phil. I am facing the same problema with my react app. Did you get it working?