How does 2FA solve this? You're interacting with an attacker who is prompting you for information in real time.
One technique that might help is to make user choose a picture during account registration. During login show that picture, if user does not see correct picture he would suspect something.
It does not have to be picture, could be style or background of login component.
Such a verification image makes the MITM attack a bit harder to code, but not really by much, and in the process might introduce an increased false sense of security.
Of course the problem with that approach is when you're using different browsers, the image will be different every time.
Maybe a solution would be:
- ask user for username only - set cookie based on username - show image associated with account - ask for password
That should theoretically work on every browser and protect against cross-site requests. Of course this method has its own caveats though.
Edit: never mind. I hadn't thought it through. Of course the attacker can send your username through their page and fetch the image then display it. So the only approach I can think of that would work is tying the image to a browser rather than an account.
Unless attackers compromised your email they will not be able to obtain secret picture.