HTML5通过Web Crypto API的crypto.subtle.digest()实现SHA摘要，需HTTPS环境（localhost除外），支持SHA-1/256/384/512；先用TextEncoder编码字符串为Uint8Array，再转十六进制字符串。
HTML5 本身不直接提供 SHA 系列（如 SHA-1、SHA-256、SHA-512）摘要生成的原生 API，但可通过 Web Crypto API 在支持的现代浏览器中安全、高效地实现 SHA 摘要计算。关键在于正确使用 window.crypto.subtle.digest() 方法，配合 ArrayBuffer 和 Uint8Array 数据转换。
确认浏览器支持 Web Crypto API
SHA 摘要生成依赖 crypto.subtle，需确保运行环境为 HTTPS（本地 localhost 除外）且浏览器支持：
- Chrome 37+、Firefox 34+、Edge 12+、Safari 11+（macOS/iOS）均支持
- 可在控制台执行
!!window.crypto?.subtle快速检测 - HTTP 页面下 Safari 和部分旧版 Edge 会拒绝调用，必须部署在 HTTPS 或 localhost
使用 SubtleCrypto.digest() 计算 SHA 摘要
核心步骤：将原始数据转为 ArrayBuffer → 调用 digest() → 将结果转为十六进制字符串：
- 输入文本需先编码为 UTF-8 字节数组：
new TextEncoder().encode("hello") - 调用
crypto.subtle.digest("SHA-256", data)（支持 "SHA-1"、"SHA-256"、"SHA-384"、"SHA-512"） - 返回 Promise，解析后用
Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, '0'))转为小写十六进制串
完整可运行示例（SHA-256）
以下代码可直接粘贴至 HTML 文件的 中测试：
立即学习“前端免费学习笔记（深入）”；
async function sha256(str) {
const encoder = new TextEncoder();
const data = encoder.encode(str);
const hash = await crypto.subtle.digest('SHA-256', data);
const bytes = new Uint8Array(hash);
return Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');
}
// 使用示例：
sha256("Hello, world!").then(console.log); // 输出 64 位小写 hex
注意事项与常见问题
实际使用中需注意几个易错点：
- 不能对字符串直接 digest，必须先 encode 成字节；否则会报错或结果异常
- SHA-1 已不推荐用于安全场景，建议优先选用 SHA-256 或更高强度算法
- 若需 Base64 编码结果，可用
btoa(String.fromCharCode(...new Uint8Array(hash)))，但注意长度限制和兼容性 - 大量数据分块处理需自行实现流式哈希逻辑，Web Crypto API 不内置流式 digest 接口
