JavaScript项目模块导入报错：无法引入后量子密钥库

问题 #

在前端项目中尝试用两个后量子密码库生成安全密钥并创建认证令牌，但用npx serve启动服务器后，main.js里的require语句持续报错。当前代码已在index.html中设置了type="module"，核心需求是解决模块导入问题。

核心原因 #

1. 浏览器环境仅支持ES模块规范（import/export），不兼容Node.js的CommonJS规范（require）
2. node-pqclean是为Node.js设计的库，依赖Node.js核心模块（如Buffer），无法直接在浏览器中运行
3. crystals-kyber-javascript虽有浏览器兼容版本，但需要用正确的ES模块方式导入

解决方案 #

1. 替换node-pqclean #

由于node-pqclean不支持浏览器环境，建议直接使用crystals-kyber-javascript完成密钥生成（它已支持后量子KEM算法），或寻找浏览器兼容的McEliece算法实现（如WebAssembly编译版本）。

2. 调整crystals-kyber-javascript的导入方式 #

• 先安装依赖：

  npm install crystals-kyber
  

• 将main.js中的require替换为ES模块的import语法

3. 移除浏览器不兼容的API #

删除代码中Node.js专属的Buffer调用，改用浏览器原生的Uint8Array处理二进制数据。

修改后的完整代码 #

index.html（无需改动） #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="./main.js" defer></script>
    <title>Handmade Token webpage</title>
</head>
<body>
    <H1>Something</H1>
</body>
</html>

main.js #

// 导入crystals-kyber（ES模块方式）
import kyber from 'crystals-kyber';

// 使用crystals-kyber生成后量子密钥对与对称密钥
// 生成公钥、私钥对
let [pk, sk] = kyber.KeyGen768();
// 生成对称密钥及其加密封装
let [c, ss1] = kyber.Encrypt768(pk);
// 解封装还原对称密钥
let ss2 = kyber.Decrypt768(c, sk);

// 验证密钥一致性
console.log("对称密钥是否匹配:", JSON.stringify(ss1) === JSON.stringify(ss2));
// 运行库自带测试用例
kyber.Test768();

// 认证令牌生成逻辑（原代码保留）
function createAuthToken(userId) {
    const crypto = window.crypto;
    const secretKey = crypto.getRandomValues(new Uint8Array(32));
    const data = userId + Date.now(); 
    const dataArray = new TextEncoder().encode(data);
    
    return crypto.subtle.sign( 
        {
            name: "HMAC",
            hash: { name: "SHA-256" },
        },
        secretKey,
        dataArray
    ).then(signature => {
        return Array.from(new Uint8Array(signature))
            .map(b => b.toString(16).padStart(2, "0"))
            .join("");
    });
}

async function createSession(userId) {
    const sessionId = Date.now();
    const authToken = await createAuthToken(userId);
    
    if(localStorage.getItem('sessionId')){ 
        localStorage.removeItem('sessionId');
    }
    if(localStorage.getItem('authToken')){ 
        localStorage.removeItem('authToken');
    }
    localStorage.setItem('sessionId', sessionId); 
    localStorage.setItem('authToken', authToken);
    
    return { sessionId, authToken };
}

// 测试会话创建
createSession("test-user-123").then(result => {
    console.log("已创建会话:", result);
});

额外注意事项 #

• 如果使用npx serve仍出现模块解析问题，建议改用Vite、Parcel等现代前端构建工具，它们能自动处理Node.js模块到浏览器环境的转换
• 所有涉及二进制数据的操作，优先使用浏览器原生的Uint8Array、TextEncoder/TextDecoder替代Node.js的Buffer

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