crypto.randomUUID(): Tạo UUID an toàn ngay trong trình duyệt, bỏ luôn package uuid

TL;DR

crypto.randomUUID() là API có sẵn trong mọi trình duyệt hiện đại và Node.js 14.17+. Một dòng code, sinh UUID v4 chuẩn CSPRNG, không cần npm i uuid, tiết kiệm 5–8 KB bundle, chạy nhanh hơn package uuid khoảng 3 lần. Đã đạt Baseline từ tháng 3/2022 — giờ là lúc bỏ dependency.

Hàm này làm gì

MozDevNet vừa nhắc lại một mẹo nhỏ nhưng nhiều dev vẫn bỏ qua: crypto.randomUUID() đã là một phần của Web Crypto API. Gọi trực tiếp trên đối tượng crypto toàn cục:

const id = crypto.randomUUID();
// "36b8f84d-df4e-4d49-b662-bcde71a8764f"

Output là một chuỗi 36 ký tự đúng format RFC 4122 v4: xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx. Không tham số, không constructor, không cần khởi tạo. Hoạt động cả trong Web Workers và Service Workers.

Vì sao nên đổi

Package uuid trên npm có gần 200 triệu lượt tải mỗi tuần. Phần lớn project chỉ dùng uuid.v4() — đúng thứ mà runtime đã cho không. Mỗi lần bạn import uuid, bạn đang trả giá:

• Bundle: thêm khoảng 5–8 KB minified vào client bundle.
• Maintenance: thêm một dependency cần audit, update, theo dõi CVE.
• Tốc độ: chậm hơn native vì phải parse module và đi qua wrapper.

Khi bạn đang viết code 2026, mặc định nên là native trước, package sau.

Số liệu kỹ thuật

So sánh với package phổ biến

Nếu bạn chỉ cần v4 ở client-side hoặc trong Node.js service hiện đại, native thắng tuyệt đối. Nếu bạn cần v7 (time-ordered, tốt cho database index) hoặc v1/v5, vẫn nên giữ package uuid.

Khi nào nên dùng

• Optimistic UI: tạo ID tạm cho item mới (todo, message, comment) trước khi server xác nhận, giúp UI render ngay. Khi response về, map lại ID server hoặc giữ luôn ID client làm canonical.
• Idempotency key: gắn vào header request POST tới API thanh toán (Stripe, Polar, SePay) để tránh charge trùng khi user click 2 lần hoặc network retry.
• Correlation ID: gắn vào mọi request frontend để trace qua hệ thống logging — frontend log → API gateway → service nội bộ cùng chia sẻ một ID.
• IndexedDB primary key: thay vì auto-increment, dùng UUID để tránh xung đột khi sync giữa nhiều tab hoặc nhiều device offline.
• Device / session ID: lưu vào localStorage phục vụ analytics first-party — không cần thư viện tracking nặng.
• File upload: sinh ID trước khi upload, đặt tên file ${uuid}.png để tránh trùng tên trên S3/R2.
• Backend Node.js: bỏ uuid khỏi package.json để giảm dependency tree, đặc biệt hữu ích với serverless function vì cold-start nhanh hơn.

Polyfill cho browser cũ

Nếu vẫn cần support Safari < 15.4 hoặc Chrome < 92 (rất hiếm 2026), thêm guard ngắn:

function uuid() {
  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
    return crypto.randomUUID();
  }
  // Fallback dùng getRandomValues — vẫn CSPRNG
  const bytes = crypto.getRandomValues(new Uint8Array(16));
  bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4
  bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10
  const hex = [...bytes].map(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)}`;
}

Vẫn nhẹ hơn nhiều so với import cả package uuid.

Hạn chế & lưu ý

• Chỉ v4: không sinh được v1 (timestamp + MAC), v5 (namespace + name), hay v7 (time-ordered). Nếu DB của bạn cần ID tăng dần theo thời gian để tối ưu B-tree index, v4 không phải lựa chọn tối ưu.
• HTTPS bắt buộc trên browser: gọi trên trang HTTP plain sẽ báo lỗi crypto.randomUUID is not a function ở một số trình duyệt cũ. Localhost luôn được tính là secure context.
• Không seedable: không thể inject seed cố định cho test. Nếu test cần ID reproducible, mock lại hàm trong test setup.
• Không có IE11: nếu vẫn phải support IE hoặc browser pre-2022, cần polyfill (ví dụ uuid package làm fallback).

Migration nhanh trong 30 giây

Tìm và thay trong codebase:

// Trước
import { v4 as uuidv4 } from 'uuid';
const id = uuidv4();

// Sau
const id = crypto.randomUUID();

Sau đó npm uninstall uuid @types/uuid nếu không còn chỗ nào dùng. Build lại, đo bundle size — bạn sẽ thấy chênh lệch ngay.

Nguồn: MDN Web Docs, Can I Use, benchmark by galkin, @MozDevNet.