Provide an alt label to the SVG qr code

The raw svg was represented to a11y dom as 256x256 images (due to
the 'use'). Convert the raw SVG to a base64 encoded img data uri and
provide it with an alt attribute describing the function.

While the qr code is duplicate with the 'manual' code below it, it is
not decorative so should not suppress alt. It's a big image and if
you use touch interaction, it would create a big blank spot. It is
useful to know for users that the QR code is there.

The img wrapping should also make the SVG usage slightly safer. It
avoids any potential remote resource usage from inside the SVG. While
this is not a direct danger right now, compromised php packages can
happen, and this limits the impact in that case.

Bug: T151550
Change-Id: I568927ace95a1fdf9cd7990bc7de8461718aa1c1
This commit is contained in:
Derk-Jan Hartman 2023-12-19 21:12:52 +01:00 committed by Reedy
parent d91b15187c
commit 55b465c196
3 changed files with 10 additions and 3 deletions

View file

@ -99,5 +99,6 @@
"oathauth-verify-enabled": "{{GENDER:$1|$1}} has two-factor authentication enabled.",
"oathauth-verify-disabled": "{{GENDER:$1|$1}} does not have two-factor authentication enabled.",
"oathauth-prefs-disabledgroups": "Disabled {{PLURAL:$1|group|groups}}:",
"oathauth-prefs-disabledgroups-help": "{{GENDER:$2|Your membership}} in {{PLURAL:$1|this group|these groups}} is disabled until you enable [[Special:Manage Two-factor authentication|two-factor authentication]]."
"oathauth-prefs-disabledgroups-help": "{{GENDER:$2|Your membership}} in {{PLURAL:$1|this group|these groups}} is disabled until you enable [[Special:Manage Two-factor authentication|two-factor authentication]].",
"oathauth-qrcode-alt": "Scannable QR code representing the secret key."
}

View file

@ -114,5 +114,6 @@
"oathauth-verify-enabled": "Notice that a user has 2FA enabled, shown on success at [[Special:VerifyOATHForUser]].\n$1 - Name of user",
"oathauth-verify-disabled": "Notice that a user does not have 2FA enabled, shown on success at [[Special:VerifyOATHForUser]].\n$1 - Name of user",
"oathauth-prefs-disabledgroups": "Label on Special:Preferences for groups in which the user's membership has been disabled for a lack of two-factor authentication.\n$1 - Number of groups",
"oathauth-prefs-disabledgroups-help": "Help message shown on Special:Preferences for the {{mw-msg|oathauth-prefs-disabledgroups}} field.\n$1 - Number of groups\n$2 - User name for GENDER"
"oathauth-prefs-disabledgroups-help": "Help message shown on Special:Preferences for the {{mw-msg|oathauth-prefs-disabledgroups}} field.\n$1 - Number of groups\n$2 - User name for GENDER",
"oathauth-qrcode-alt": "Accessibility label for the QR code image shown to users when enabling the TOTP on the [[Special:OATHManage]] page."
}

View file

@ -75,7 +75,12 @@ class TOTPEnableForm extends OATHAuthOOUIHTMLForm {
],
'qrcode' => [
'type' => 'info',
'default' => $qrCode->getString(),
'default' => Html::element( 'img', [
'src' => $qrCode->getDataUri(),
'alt' => $this->msg( 'oathauth-qrcode-alt' ),
'width' => 256,
'height' => 256,
] ),
'raw' => true,
'section' => 'step2',
],