iFrame commands not working through code but working through console

Description

Server Setup Information

  • Version of Rocket.Chat Server: 3.16
  • Operating System: Linux
  • Deployment Method: docker
  • Number of Running Instances:
  • DB Replicaset Oplog:
  • NodeJS Version:
  • MongoDB Version:
  • Proxy:
  • Firewalls involved:

Any additional Information

I have enabled the iframe settings:


The situation is as follows: my code has the following:

	// login a user with their auth token
		const chat = document.getElementById('rc_chat') as HTMLIFrameElement;

		chat?.contentWindow?.postMessage(
			{
				externalCommand: 'login-with-token',
				token: token
			},
			'*'
		);

               chat.src = chat.src; //refreshing the iframe

However this isn’t working and all I see is a gray screen in the iframe:

But when I execute that code from the browser console (developer tools), then the user is logged in. So why is my code not working?

I just noticed the following error when my code runs, but again running the code from the console works:

TypeError: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type undefined
    at f (170eae3306caaff00de1cbf5a55650f41f14726f.js?meteor_js_resource=true:655)
    at Function.s.from (170eae3306caaff00de1cbf5a55650f41f14726f.js?meteor_js_resource=true:655)
    at a.publicKeyFromString (170eae3306caaff00de1cbf5a55650f41f14726f.js?meteor_js_resource=true:997)
    at a.setServerKey (170eae3306caaff00de1cbf5a55650f41f14726f.js?meteor_js_resource=true:997)
    at async l (170eae3306caaff00de1cbf5a55650f41f14726f.js?meteor_js_resource=true:997)

These are the network calls when I open the iframe:

I changed my chat.src = chat.src to

chat?.contentWindow?.postMessage(
	{
		externalCommand: 'go',
		path: '/home'
	},
	'*'
);

and now everything works!

EDIT: Sadly everything stopped working after I pushed my fix to dev env… even on localhost

1 Like

Thanks for sharing the solution!

Well it worked on my localhost and I deployed the fix to dev however it’s not working on dev and now it’s not working on localhost either. I still receive the gray screen. Any idea what the issue is? I’d be happy to show it via video call so let me know if any time works for you

This is community support, not paid support.

No one is going to sit there and spend hours fixing this for you.

You need to give a lot more detail - read this for details on how to document issues properly.

Start by telling us what you are trying to achieve, and not your attempt at a solution (see the XY problem)

Fair enough, anyways, is there paid support?

What I’m trying to achieve is to have rocketchat display in the iframe instead of the gray screen.

I have figured the issue out. To whom it may concern:

I was loading RC within a popup and once the popup was opening, then I was executing the login command or change room command. I think the login/page change commands were being issued before RC could load in the popup which contained the iFrame.

All I had to do was create a function for the iframe commands like login and page change and execute that function on the iframe onload event: javascript - Capture iframe load complete event - Stack Overflow

Glad you got it figured, but in future this sort of information is really important and you should have included it right at the start.

1 Like

Agreed. I often type these questions out in a panicked state

Yes I am aware… read some of the links in the gist above, specifically these which will help you ask question which you are more likely to get answers for:

http://www.catb.org/esr/faqs/smart-questions.html

That will avoid this:

http://xyproblem.info/

“Tell us about the problem you were originally trying to solve, not the problem that you are experiencing right now.
Frequently the one you are experiencing now is the result of not understanding or being able to fix the original issue”

Always give a clear concise description - we cannot see your screen or read your mind!

1 Like