Massive errorcount when having another application using postMessage

[Mai-Lapyst]

The core library relies on the message event to (it seems) exchange the token from the worker to the application.

But when having another application/library running (i.e. Angular dev tools) that uses the postMessage/message ecessivly, this leads to many errors in the log.

The related code seems to be this:

glue/packages/core/src/index.ts

Lines 98 to 107 in b06f3e7

	handle = (e: MessageEvent) => {
	console.log(`message received from ${e.origin} with data: ${e.data.token}`);
	if (new URL(e.origin).host != this.widgetLink.host) {
	console.error(
	`expected message from ${this.widgetLink.host} but received message from ${e.origin}. Aborting.`
	);
	return;
	}
	this.updateState(e.data.token);
	};

Maybe the library should send some sort of identification in the message? I.e: { type: 'mcaptcha', token: xxx }, so the code can check for the type and ignore any other messages?

[realaravinth]

Thanks for the report and solid idea!

[realaravinth]

TODO

1. Define message namespaces (ex: token.pow.mcaptcha.org)
2. Update sedToParent in server to use namespaces
3. Update glue to use namespaces

Thoughts?

[Mai-Lapyst]

You mean that the message then looks like this { "token.pos.mcaptcha.org": "xxx" } right? Seems fine by me.

[realaravinth]

Yes, but slightly different:

{
    "type": "token.pow.mcaptcha.org",
    "body": {
        "token": "xxx"
    }
}

[Mai-Lapyst]

I see; this would work too.

[sudoskys]

I also encountered a lot of errors when applying mCaptcha in vue. In the Vite dev server.