MetaMask / MetaMask/metamask-extension
Solution for postMessage/onMessage problems
- Dominant language
- TypeScript
- Stars
- 13.2k
- Forks
- 5.6k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 451
Description
**What problem are you trying to solve?**
[I've found](https://github.com/MetaMask/metamask-extension/issues?q=is%3Aissue+is%3Aopen+postmessage) that some users got issues with metamask extension that utilizes postMessage/onMessage mechanics to connect between different components. In my case it brings to hangups or exceptions in some online applications that used by me.
Root of the problem is [inpage.js](https://github.com/MetaMask/metamask-extension/blob/develop/app/scripts/inpage.js) that uses just as simple event protocol that sends string to everyone like: `window.postMessage('onboardingcomplete', '*')`. Some badly designed applications awaiting for serialized JSON data and do not check received data types or doesn't simply try-catch it.
**Describe the solution you'd like**
I suggest simple coarse solution for this problem -- create nested iframe with unique identifier and use it to localize your own protocol. To send messages you can traverse all browser's window hierarchy and call postMessage only for your own frame. Script that have created iframe have full cross-origin access to receive onMessage events.
I've done this trick in my [cors-bridge library](https://github.com/mepsoid/cors-bridge).
**Additional context**
I've seen that this issue haven't been fixed for some years, now you have a tip to how to solve it completely.
Contributor guide
Research direction
Start with app/scripts/inpage.js and compare its postMessage/onMessage protocol with the iframe-based approach described in the cors-bridge library. Trace how messages are sent between extension components and determine the scope of isolating the protocol in a uniquely identified nested iframe. Done means the extension no longer exposes protocol messages that can disrupt applications expecting serialized JSON.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100