refactor: replace crypto.randomUUID with generateUUID utility (#638)

* refactor: replace crypto.randomUUID with generateUUID in spec editor

Use the centralized generateUUID utility from @/lib/utils instead of
direct crypto.randomUUID calls in spec editor components. This provides
better fallback handling for non-secure contexts (e.g., Docker via HTTP).

Files updated:
- array-field-editor.tsx
- features-section.tsx
- roadmap-section.tsx

* refactor: simplify generateUUID to always use crypto.getRandomValues

Remove conditional checks and fallbacks - crypto.getRandomValues() works
in all modern browsers including non-secure HTTP contexts (Docker).
This simplifies the code while maintaining the same security guarantees.

* refactor: add defensive check for crypto availability

Add check for crypto.getRandomValues() availability before use.
Throws a meaningful error if the crypto API is not available,
rather than failing with an unclear runtime error.

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Stefan de Vogelaere
2026-01-21 10:32:12 +01:00
committed by GitHub
parent db71dc9aa5
commit 641bbde877
4 changed files with 22 additions and 43 deletions

View File

@@ -156,35 +156,23 @@ export function sanitizeForTestId(name: string): string {
/**
* Generate a UUID v4 string.
*
* Uses crypto.randomUUID() when available (secure contexts: HTTPS or localhost).
* Falls back to crypto.getRandomValues() for non-secure contexts (e.g., Docker via HTTP).
* Uses crypto.getRandomValues() which works in all modern browsers,
* including non-secure contexts (e.g., Docker via HTTP).
*
* @returns A RFC 4122 compliant UUID v4 string (e.g., "550e8400-e29b-41d4-a716-446655440000")
*/
export function generateUUID(): string {
// Use native randomUUID if available (secure contexts: HTTPS or localhost)
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
return crypto.randomUUID();
if (typeof crypto === 'undefined' || typeof crypto.getRandomValues === 'undefined') {
throw new Error('Cryptographically secure random number generator not available.');
}
const bytes = new Uint8Array(16);
crypto.getRandomValues(bytes);
// Fallback using crypto.getRandomValues() (works in all modern browsers, including non-secure contexts)
if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
const bytes = new Uint8Array(16);
crypto.getRandomValues(bytes);
// Set version (4) and variant (RFC 4122) bits
bytes[6] = (bytes[6] & 0x0f) | 0x40; // Version 4
bytes[8] = (bytes[8] & 0x3f) | 0x80; // Variant RFC 4122
// Set version (4) and variant (RFC 4122) bits
bytes[6] = (bytes[6] & 0x0f) | 0x40; // Version 4
bytes[8] = (bytes[8] & 0x3f) | 0x80; // Variant RFC 4122
// Convert to hex string with proper UUID format
const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
}
// Last resort fallback using Math.random() - less secure but ensures functionality
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = (Math.random() * 16) | 0;
const v = c === 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
// Convert to hex string with proper UUID format
const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
}