This is meant to be a demonstration of using CSS and Javascript to phish a user into entering sensitive information into a familiar prompt. In this case I'm using the Firefox password manager, however just about any browser prompt or extension flyout can be faked. If you're an app developer, you should always display some sort of trust signal (such as an image or a username), which can help a user differentiate between a real prompt and a fake one.

If you've ever used the Firefox password manager, you'll be used to entering your master password either on startup, or sometimes randomly when something screws up with the session. Through this page, I'm demonstrating that it's possible to create a replica prompt with CSS and a little Javascript that's almost indistinguishable from the real one. This can be done on Windows as well, it's just overly tedious to make a PoC for so I'll skip that. There are improvements and slight discrepancies that can be fixed on this example as well, but you get the point.

The only part of this that I can't replicate is the fact that the real prompt takes over your entire window, and disallows you from switching tabs or opening new ones. Next time you get a prompt, make sure you can't switch to a new tab before entering your password in. The latest version of Firefox has some overlap outside of the canvas which can be spotted with a keen eye. I believe that slight overlap was introduced in the Firefox 68 design, the placement in Firefox 67 is almost an exact match to this fake prompt.

They can redesign the prompt such that they collect the password from outside the canvas, making it impossible for a website to fake. They can also show a trust signal, such as an image or username which a malicious site would have to guess.