fix: web crypto strategy and demo

- use timingSafeEqual for comparing hmac values
- enhance web demo to support both auth versions

Ticket: CE-10122

Author: bitgoAaron

modules/sdk-hmac/src/webCryptoStrategy.ts

@@ -65,7 +65,7 @@ function buildHmacSubject(params: {
   const queryPath = extractQueryPath(params.urlPath);
 
   let prefixedText: string;
-  if (params.statusCode !== undefined && isFinite(params.statusCode) && Number.isInteger(params.statusCode)) {
+  if (params.statusCode !== undefined && Number.isFinite(params.statusCode) && Number.isInteger(params.statusCode)) {
     prefixedText =
       params.authVersion === 3
         ? [method.toUpperCase(), params.timestamp, queryPath, params.statusCode].join('|')
@@ -91,6 +91,21 @@ async function webCryptoImportHmacKey(rawKey: string): Promise<CryptoKey> {
   return crypto.subtle.importKey('raw', encoded, { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
 }
 
+/**
+ * Constant-time string comparison to prevent timing side-channel attacks.
+ * Browser-compatible polyfill for Node's `crypto.timingSafeEqual`.
+ */
+function timingSafeStringEqual(a: string, b: string): boolean {
+  const aBytes = new TextEncoder().encode(a);
+  const bBytes = new TextEncoder().encode(b);
+  if (aBytes.length !== bBytes.length) return false;
+  let result = 0;
+  for (let i = 0; i < aBytes.length; i++) {
+    result |= aBytes[i] ^ bBytes[i];
+  }
+  return result === 0;
+}
+
 async function webCryptoSha256Hex(data: string): Promise<string> {
   const encoded = new TextEncoder().encode(data);
   const hash = await crypto.subtle.digest('SHA-256', encoded);
@@ -302,7 +317,7 @@ export class WebCryptoHmacStrategy implements IHmacAuthStrategy {
       params.timestamp >= now - backwardValidityWindow && params.timestamp <= now + forwardValidityWindow;
 
     return {
-      isValid: expectedHmac === params.hmac,
+      isValid: timingSafeStringEqual(expectedHmac, params.hmac),
       expectedHmac,
       signatureSubject: subject as VerifyResponseInfo['signatureSubject'],
       isInResponseValidityWindow,

modules/web-demo/src/components/WebCryptoAuth/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { BitGoAPI } from '@bitgo/sdk-api';
+import { BitGoAPI, BitGoAPIOptions } from '@bitgo/sdk-api';
+import type { EnvironmentName } from '@bitgo/sdk-core';
 import {
   WebCryptoHmacStrategy,
   IndexedDbTokenStore,
@@ -29,10 +30,12 @@ function ts(): string {
 }
 
 const DEFAULT_ENV = 'test';
+const DEFAULT_AUTH_VERSION = 3 as 2 | 3;
 
 const WebCryptoAuth = () => {
-  const [env, setEnv] = useState(DEFAULT_ENV);
+  const [env, setEnv] = useState<EnvironmentName>(DEFAULT_ENV);
   const [customUri, setCustomUri] = useState('');
+  const [authVersion, setAuthVersion] = useState<2 | 3>(DEFAULT_AUTH_VERSION);
 
   const [strategyReady, setStrategyReady] = useState(false);
   const [sdkReady, setSdkReady] = useState(false);
@@ -69,18 +72,21 @@ const WebCryptoAuth = () => {
 
   const createSdk = useCallback(
     async (
-      targetEnv: string,
+      targetEnv: EnvironmentName,
       targetCustomUri: string,
+      targetAuthVersion: 2 | 3,
       appendLog: (msg: string) => void,
     ): Promise<{
       sdk: BitGoAPI;
       strategy: WebCryptoHmacStrategy;
       restored: boolean;
     }> => {
-      appendLog('Creating WebCryptoHmacStrategy with IndexedDbTokenStore...');
+      appendLog(
+        `Creating WebCryptoHmacStrategy (auth v${targetAuthVersion}) with IndexedDbTokenStore...`,
+      );
       const strategy = new WebCryptoHmacStrategy({
         tokenStore: new IndexedDbTokenStore(),
-        authVersion: 2,
+        authVersion: targetAuthVersion,
       });
 
       appendLog('Checking IndexedDB for existing CryptoSigning...');
@@ -93,9 +99,10 @@ const WebCryptoAuth = () => {
         appendLog('No stored CryptoSigning found in IndexedDB.');
       }
 
-      const options: Record<string, unknown> = {
+      const options: BitGoAPIOptions = {
         hmacAuthStrategy: strategy,
         hmacVerification: true,
+        authVersion: targetAuthVersion,
       };
 
       if (targetEnv === 'custom' && targetCustomUri) {
@@ -125,6 +132,7 @@ const WebCryptoAuth = () => {
         const { sdk, strategy, restored } = await createSdk(
           DEFAULT_ENV,
           '',
+          authVersion,
           log,
         );
 
@@ -177,7 +185,12 @@ const WebCryptoAuth = () => {
   const handleCreateSdk = useCallback(async () => {
     clearStatus();
     try {
-      const { sdk, strategy, restored } = await createSdk(env, customUri, log);
+      const { sdk, strategy, restored } = await createSdk(
+        env,
+        customUri,
+        authVersion,
+        log,
+      );
 
       strategyRef.current = strategy;
       sdkRef.current = sdk;
@@ -199,7 +212,7 @@ const WebCryptoAuth = () => {
       setError(e.message || String(e));
       log(`Error: ${e.message || e}`);
     }
-  }, [env, customUri, log, createSdk]);
+  }, [env, customUri, authVersion, log, createSdk]);
 
   const handleLogin = useCallback(async () => {
     clearStatus();
@@ -340,7 +353,7 @@ const WebCryptoAuth = () => {
               <Label>Environment</Label>
               <select
                 value={env}
-                onChange={(e) => setEnv(e.target.value)}
+                onChange={(e) => setEnv(e.target.value as EnvironmentName)}
                 style={{
                   padding: '8px',
                   borderRadius: 4,
@@ -353,6 +366,24 @@ const WebCryptoAuth = () => {
                 <option value="custom">custom</option>
               </select>
             </FormGroup>
+            <FormGroup>
+              <Label>Auth Version</Label>
+              <select
+                value={authVersion}
+                onChange={(e) =>
+                  setAuthVersion(Number(e.target.value) as 2 | 3)
+                }
+                style={{
+                  padding: '8px',
+                  borderRadius: 4,
+                  border: '1px solid #ccc',
+                  width: '100%',
+                }}
+              >
+                <option value={2}>v2</option>
+                <option value={3}>v3</option>
+              </select>
+            </FormGroup>
             {env === 'custom' && (
               <FormGroup>
                 <Label>Custom Root URI</Label>