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

Question

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

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

当我尝试重现此ArrayBuffer时，我最终得到了这一点：

请注意全部为零的“其他表示形式”（例如[[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类来自Nick Galbreaths' Base64 for JavaScript implementation。

当前的rawId可能有效，但是我想100％重现它，因此，在将来的某些浏览器版本中，它在其他浏览器中失败的可能性降到了最低。

如何实现Chrome屏幕快照中显示的表示形式？

Answer 1

您是否可以尝试使用以下功能替换功能：

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

这很简单，但是在我的一个项目中就可以解决问题。