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.

[4444TENSEI]

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

I've written a usage example for Vue+Vite projects (using the "@mcaptcha/core-glue" library) that I hope will help most people.

<template>
  <iframe :src="iframeUrl" style="border: none; width: 100%; height: 5rem" />
  <p>Token: {{ tokenRef || 'Waiting for verification...' }}</p>
</template>

<script setup lang="ts">
  import Receiver from '@mcaptcha/core-glue'

  /** Base URL of the deployed mCaptcha */
  const mCaptchaBaseUrl = import.meta.env.VITE_MCAPTCHA_BASE_URL
  /** Secret key */
  const mCaptchaKey = import.meta.env.VITE_MCAPTCHA_KEY
  /** URL for the iframe */
  const iframeUrl = `${mCaptchaBaseUrl}/widget/?sitekey=${mCaptchaKey}`

  /** Token received after successful verification */
  const tokenRef = ref('')

  /** Callback for token update */
  function setToken(token: string) {
    tokenRef.value = token
  }

  /** Initialize the verification receiver */
  const receiver = new Receiver(
    {
      siteKey: {
        instanceUrl: new URL(mCaptchaBaseUrl),
        key: mCaptchaKey,
      },
    },
    setToken,
  )

  onMounted(() => {
    // Start verification when the component is mounted
    receiver.listen()
  })

  onUnmounted(() => {
    // Clean up when the component is unmounted
    receiver.destroy()
  })
</script>

# .env
VITE_MCAPTCHA_BASE_URL='https://YourMcaptchaSite.com'
VITE_MCAPTCHA_KEY='YourSitekey'