A security bug caused by… Dark Mode!

Everyone loves Dark Mode. It is kinder on the eyes, less energy intensive, and looks hecking cool.

*5 seconds later* We regret to inform you that Dark Mode causes security bugs.

(With apologies to Ben Ward)

OK, OK. This isn't a particularly severe security bug, but I found it interesting.

The Matrix messaging app "Element" lets you sign in to your account on multiple devices. In order to prove those devices are controlled by you, the app asks you to verify the other sessions. This is broadly sensible.

You sign in to the web-based messenger, then you sign in to the Android app. The web asks you if you just signed in, you say yes. The app then says "scan the code shown on the website". You do. And then both devices ask if the logo displayed is identical.

Simple! Ish.

Here's what the website shows:

Text reads "Verify other device. Verify by scanning. Almost there! Is your other device showing the same shield?" Image is of a Green Shield with a grey tick.

So you take a look at your phone and see this:

Image is of a Green Shield with a white tick.

Are those two the same shield? They're both the same shape. They're both green. They both have a tick. But the tick is a different colour!

I suspect this is because the shield on the web has a transparent tick and expects the background colour to be white. But, when in Dark Mode, the background is grey.

Interestingly, my phone was also in Dark Mode - but the image has a solid white tick.

I'm not sure if it is specifically a bug in Matrix or Element (and, TBQH, I'm hazy about their relationshp) so I've raised it on Element's GitHub.

But, let this be a lesson to you. Test all of your interface with all of your different themes. And don't use transparency to convey important security information.

Share this post on…

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">