[v7] Unexpected console warning

[A-Shleifman]

Thank you very much for this package! I wanted to share an unexpected behavior I encountered.

My setup

• host domain: host.com
• iframe domain: iframe.com
• penpal v7

const connection = connect({
  messenger: new WindowMessenger({
    remoteWindow: iframe.contentWindow,
    allowedOrigins: [new RegExp(`^https://iframe.com$`)],
  }),
  methods: hostApiMethods,
});

I noticed that when a RegExp is passed to allowedOrigins there are no warnings in the console, however when the same origin is passed as a string https://iframe.com, penpal is displaying the following warning:

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

Unless I'm missing something, penpal shouldn't be comparing the origin to https://host.com at all in this case. Despite the warning, the connection is happening in both cases.

[Aaronius]

Thanks for reporting this. Just for context, that warning is coming directly from the browser and not Penpal, but it still may be caused by a bug in Penpal.

Is there any way you can provide a reproducible example for me? If not, then:

1. Can you double check that the origin of iframe.contentWindow is https://iframe.com?
2. Can you paste the connect() code you're using in the iframe to connect to the host domain?

I suspect both of those are fine, but those are my next steps for debugging without seeing a running example.

[A-Shleifman]

Thank you for the response!

It's hard to provide a reproducible example because it requires different origins.

host.com → iframe.com

Using new URL(iframe.src).origin here to guarantee a correct origin.

const connection = connect<NexusApiMethods>({
  messenger: new WindowMessenger({
    remoteWindow: iframe.contentWindow,
    allowedOrigins: [new RegExp(`^${new URL(iframe.src).origin}$`)], // <--- no warning
    // allowedOrigins: [new URL(iframe.src).origin], // <--- warning
  }),
  methods: hostApiMethods,
});

iframe.com → host.com

const connection = connect<HostApiMethods>({
  messenger: new WindowMessenger({
    remoteWindow: window.parent,
    allowedOrigins: [parentOrigin],
  }),
  methods: nexusApiMethods,
});

Please let me know if this is not enough to reproduce the issue.

[Aaronius]

I'm able to reproduce it. Thanks. I'll work on getting a fix out. Thanks again for reporting this!

[Aaronius]

Alright, the fix has been released in v7.0.3.

For posterity, here's what was going on and the solution:

When you set the src property on an iframe and then add the iframe to the DOM, there is a brief moment before the browser starts loading the document. During this brief moment, the origin of the iframe's window is the origin of the parent window (e.g., https://host.com) even if the document that will be loaded into the iframe window is from a different origin (e.g., https://iframe.com).

Penpal had logic where the parent window would send an initial SYN handshake message during this time. If allowedOrigins was set to an array with a single string in it (in this case, https://iframe.com), Penpal would use that single string as the target origin when calling postMessage. The browser would then show a warning saying that the provided target origin (https://iframe.com) did not match the iframe's origin (which was still https://host.com). Penpal's handshake protocol takes into account that the iframe content may not be ready to receive the SYN message yet and so is robust enough to still establish a successful connection. Regardless, we want to avoid the browser warning.

The reason the warning doesn't show up when allowedOrigins is set to [new RegExp(`^https://iframe.com$`)] is because if a regex or multiple allowed origins of any kind (string or regex) are specified, Penpal can't deduce the intended origin of the iframe. In this case, Penpal sends the SYN message to the iframe using a target origin of *.

Which ultimately brings us to the solution. It's entirely safe to always send the SYN message using a target origin of *. There is nothing sensitive about the SYN message. The only reason I had the bit of logic that tried to deduce the iframe's intended origin from allowedOrigins was out of an abundance of paranoia, but it ultimately wasn't providing additional security. Each participant (e.g., parent window, iframe window) of a Penpal connection receives a SYN message from the other participant. When a participant receives a SYN message, it always verifies that the sending origin (provided by the browser on the message event) matches what's been specified in allowedOrigins. That specific, validated origin is then used as the target origin when calling postMessage to send subsequent messages. After the Penpal handshake completes, MessagePorts are used for communication where origin validation is unnecessary.

Penpal now always uses a target origin of * to send the SYN message, regardless of what's specified in allowedOrigins.

Again, thanks for reporting!

[A-Shleifman]

Amazing! Thank you very much for the fix and for the insight!