CryptoJS中SHA256转Base64url输出值与预期不符问题

问题根因 #

两种结果不一致的核心原因是Base64url编码的输入源完全不同：

• crypto-js的Base64url.stringify(hashed)是直接对SHA256输出的原始二进制字节流做编码，这是哈希值Base64编码的标准处理逻辑
• 你得到的预期值，是先把SHA256结果转成十六进制文本字符串，再对这段文本的UTF-8字节做Base64url编码，相当于多做了一层转换，自然和前者结果不匹配

验证与实现代码 #

import Base64url from "crypto-js/enc-base64url"
import SHA256 from "crypto-js/sha256";
import Utf8 from "crypto-js/enc-utf8";
import Hex from "crypto-js/enc-hex";

const codeVerifier = "test-value";
const hashed = SHA256(codeVerifier);

// 1. 标准哈希Base64url编码结果（PKCE等规范场景用这个，是正确值）
console.log({ standardBase64url: Base64url.stringify(hashed) })
// 输出: WxQG__yd5VN-s1qEXJlSHyb7oOdy1YtC4J9CIbngQ64

// 2. 你之前得到的预期值：对十六进制字符串做Base64url编码（仅特殊业务要求时用）
const hexString = hashed.toString(Hex);
console.log({ hexStrBase64url: Base64url.stringify(Utf8.parse(hexString)) })
// 输出: NWIxNDA2ZmZmYzlkZTU1MzdlYjM1YTg0NWM5OTUyMWYyNmZiYTBlNzcyZDU4YjQyZTA5ZjQyMjFiOWUwNDNhZQ

选型说明 #

• 如果是实现OAuth2.0 PKCE流程的code_challenge，第一种写法输出的结果才符合RFC规范，之前在线工具得到的结果是操作时选错了编码输入源导致的错误值
• 如果业务明确要求对十六进制格式的哈希字符串做Base64url编码，使用第二种写法即可得到对应结果

内容的提问来源于stack exchange，提问作者Dimitar Dimitrov