pbkdf2 与浏览器的 webcrypto api 的使用

Question

如何使用（firefox）浏览器的 webcrypto api 中的 pbkdf2 推导函数来获得与

sjcl.misc.pbkdf2

函数（stanford javascript crypto library）或 cyberchef 中的“推导 pbkdf2 key”操作相同的结果？

在这两种情况下，结果都是

1dee9f26ad603dc9260a3071242ef1a46270a975aff83c2178ff88974756d83b

:

• 案例1

sjcl.codec.hex.fromBits(sjcl.misc.pbkdf2('test', 'test', 10000, 256));

• 案例2

https://gchq.github.io/CyberChef/#recipe=Derive_PBKDF2_key(%7B'选项':'UTF8','字符串':'测试'%7D,256,10000,'SHA256',%7B'选项':'UTF8','字符串':'测试'%7D)

我尝试从互联网上找到的各种示例中获取灵感，但不知道如何去做。

Answer 1

最后回答我的问题，这是上面示例的修改后的代码：

(() => {
  let salt;
  function getKeyMaterial() {
    const password = window.prompt("Enter your password"); // enter test at prompt
    const enc = new TextEncoder();
    return window.crypto.subtle.importKey(
      "raw",
      enc.encode(password),
      {name: "PBKDF2"},
      false,
      ["deriveBits", "deriveKey"]
    );
  }
  async function getDerivedBits() {
    const keyMaterial = await getKeyMaterial();
//  salt = window.crypto.getRandomValues(new Uint8Array(16)); // change
    const textEncoder = new TextEncoder(); // change
    salt = textEncoder. encode("test"); // change
    const derivedBits = await window.crypto.subtle.deriveBits(
      {
        "name": "PBKDF2",
        salt: salt,
//        "iterations": 100000, // change
        "iterations": 10000, // change
        "hash": "SHA-256"
      },
      keyMaterial,
      256
    );
    const buffer = new Uint8Array(derivedBits, 0, 5);
    const derivedBitsValue = document.querySelector(".pbkdf2 .derived-bits-value");
    derivedBitsValue.classList.add("fade-in");
    derivedBitsValue.addEventListener("animationend", () => {
      derivedBitsValue.classList.remove("fade-in");
    }, { once: true });
    derivedBitsValue.textContent = `${buffer}...[${derivedBits.byteLength} bytes total]`;
  }
  const deriveBitsButton = document.querySelector(".pbkdf2 .derive-bits-button");
  deriveBitsButton.addEventListener("click", () => {
    getDerivedBits();
  });
})();