Fixed Two-Step Authentication: QR Code Quiet Zone

[shello]

The QR Code generated for adding the TOTP Key to an app, in the "Verification Code via App" method enabling page, lacks a "quiet zone" (i.e. a padding around the matrix) that is required to enable QR Code readers to properly detect the QR Code matrix.

On lighter styles, like the default one for XenForo, this poses no problem as the background around the QR Code is almost white. But if the style has darker background colors (or, in the worst case, black), the lack of a quiet zone around the QR Code makes it very difficult for the QR Code readers—or impossible— to detect the QR Code displayed on the screen.
While this can, of course, be fixed at the style level, having the quiet zone around the QR Code by default would always ensure that the code can be easily read despite of the background color of the style, and thus, requiring no special tweaks at the style level.

 

[Mike]

I've gone ahead and added a 10px border around the QR code that is always white (as is the background to the code). This seemed to sort it in my tests.

 

[shello]

I believe the recommended quiet zone width is at least 4 times the width of a single matrix cell (i.e. at 6 px wide the margin should be 24 px).
That said, I tested a 10 px margin using ZXing's Barcode Scanner on Android and it successfully recognised the QR code.

Thanks.

 

[Mike]

I didn't realize that was actually spec'd (it appears to be). There was an interesting test (from a few years ago) using slightly different quiet zone sizes (down to 1x) and they all seemed to work at the time: https://qrworld.wordpress.com/2011/08/09/the-quiet-zone/

4x seems huge, but I might at least go up to 12px (2x at 6px) to be a little safer.

 

[shello]

Indeed, 4x does look huge, and it's probably unnecessary.
The test from that link does seem to indicate that 10 px (~1.667x) is enough, especially given the medium in which the QR Code is being presented.

 

[Jaxel]

Oooooh... so this is why my phone couldn't read the QR code?

 

[shello]

@Jaxel Possibly. The lack of a quiet zone affected boards with non-white (or light-ish) background colour. If this was the case, then it's likely 1.5.2 solves your issue.
Depending on the algorithms used by QR Code scanners, they would take more time—or be unable—to detect a QR Code without a proper quiet zone around the QR Code matrix. In boards such as this one, with a very light coloured background, there was some margin around the QR Code matrix, and that worked as a quiet zone.