如何创建类似于 WebAuthN 的 ArrayBuffer 的 JavaScript ArrayBuffer？

Question

我目前正在为 WebAuthN（FIDO U2F、FIDO2）集成编写概念验证 Web 应用程序。

返回字段cred.rawId的数据类型为ArrayBuffer。在 Chromes 的开发者控制台中，该字段显示如下：

当我尝试重现这个 ArrayBuffer 时，我得到了这个：

注意 "other representations"（例如 [[Int8Array]]），它们都被归零了！此外，我的 ArrayBuffer 看起来像一个普通数组，而数据在第一个原始屏幕截图中没有显示（以这种方式）。

这是从存储的 Base64 表示中检索 rawId 的源代码（记住：PoC 状态）：

function StringToByteArray(str) {
  var bytes = new ArrayBuffer();
  for (var i = 0; i < str.length; ++i) {
    var code = str.charCodeAt(i);
    var _bytes = new ArrayBuffer(bytes.byteLength + 1);
    for ( var j = 0; j < bytes.byteLength; j++ ) {
      _bytes[j] = bytes[j];
    }
    _bytes[bytes.byteLength] = code;
    bytes = _bytes
  }
  return bytes;
}

var x_rawId = StringToByteArray(base64.decode(cred.id.replace(/-/g, '+').replace(/_/g, '/').padRight(cred.id.length + (4 - cred.id.length % 4) % 4, '=')));

Base64 class 来自 Nick Galbreaths' Base64 for JavaScript implementation。

当前的 rawId 可能有效，但我想 100% 重现它，以便将它在未来某个浏览器版本的其他浏览器中失败的可能性降至最低。

如何实现Chrome截图中的表现形式？

Answer 1

您能否尝试将函数替换为以下内容：

function StringToByteArray(str) {
  return Uint8Array.from(str, c => c.charCodeAt(0));
}

它非常简单，但它在我的一个项目中起到了作用。

如何创建类似于 WebAuthN 的 ArrayBuffer 的 JavaScript ArrayBuffer？

How to create an JavaScript ArrayBuffer, that is similar to the WebAuthN's ArrayBuffer?

javascript

arraybuffer

webauthn