generate url in php, use svg - fixup into main

Co-authored-by: Dion Hulse <dion@wordpress.org>

providers/class-two-factor-totp.php

@@ -151,13 +151,32 @@ public function user_two_factor_options( $user ) {
 		if ( empty( $key ) ) :
 			$key        = $this->generate_key();
 			$site_name  = get_bloginfo( 'name', 'display' );
+
+			// Must follow TOTP format for a "label":
+			// https://github.com/google/google-authenticator/wiki/Key-Uri-Format#label
+			// Do not URL encode, that will be done later.
 			$totp_title = apply_filters( 'two_factor_totp_title', $site_name . ':' . $user->user_login, $user );
+
+			$totp_url = add_query_arg(
+				array(
+					'secret' => rawurlencode( $key ),
+					'issuer' => rawurlencode( $site_name ),
+				),
+				'otpauth://totp/' . rawurlencode( $totp_title )
+			);
+
+			// Must follow TOTP format:
+			// https://github.com/google/google-authenticator/wiki/Key-Uri-Format
+			$totp_url = apply_filters( 'two_factor_totp_url', $totp_url, $user );
+			$totp_url = esc_url( $totp_url, array( 'otpauth' ) );
+
 			?>
+
 			<p>
 				<?php esc_html_e( 'Please scan the QR code or manually enter the key, then enter an authentication code from your app in order to complete setup.', 'two-factor' ); ?>
 			</p>
 			<p id="two-factor-qr-code">
-				<a>
+				<a href="<?php echo $totp_url; ?>">
 					Loading...
 					<img src="<?php echo admin_url('images/spinner.gif'); ?>" alt="" />
 				</a>
@@ -179,21 +198,12 @@ public function user_two_factor_options( $user ) {
 					 * L = Least amount of error correction, because it's not needed when scanning
 					 *     on a monitor, and it lowers the image size.
 					 */
-					var qr     = qrcode( 0, 'L' );
-					var secret = '<?php echo esc_js( $key ); ?>';
-					var label  = encodeURI( '<?php echo esc_js( $totp_title ); ?>' );
-					var issuer = encodeURI( '<?php echo esc_js( $site_name ); ?>' );
-					var url    = 'otpauth://totp/' + label + '?secret=' + secret + '&issuer=' + issuer;
-					var target = document.querySelector( '#two-factor-qr-code a' );
-
-					qr.addData( url );
+					var qr = qrcode( 0, 'L' );
+
+					qr.addData( <?php echo wp_json_encode( $totp_url ); ?> );
 					qr.make();
 
-					// ⚠️ Intentionally using GIF here instead of SVG, for security. The benefits
-					// of SVG in this situation are minimal, but it would introduce the possibility
-					// of malicious JS being injected into the SVG and causing XSS.
-					target.href      = url;
-					target.innerHTML = qr.createImgTag( 5 );
+					document.querySelector( '#two-factor-qr-code a' ).innerHTML = qr.createSvgTag( 5 );
 				} );
 			</script>