首次使用WebAuthn在iOS端调用相关API时触发TypeError错误求助

以下是针对iOS（Safari/Chrome）中调用navigator.credentials.create/get出现TypeError的排查及修复方案：

核心排查方向 #

• 二进制字段编码兼容性：iOS WebKit对base64编码要求严格，必须使用URL安全的base64（无填充）。请检查makeCredentialOptions中的以下字段：

  • challenge
  • user.id
  • excludeCredentials数组内的id
    这些字段如果是标准base64（含+、/、=），需要转换为URL安全格式（替换+为-，/为_，去掉末尾=）。

• user.id长度校验：确保user.id的字节长度不超过64，iOS对此校验比其他平台更严格。

• authenticatorSelection参数：如果设置了authenticatorAttachment: "cross-platform"，尝试移除该字段或改为"platform"（适配Touch ID/Face ID），iOS对跨平台密钥的支持有限。

• 算法列表完整性：pubKeyCredParams需包含iOS支持的算法，至少保留：

  [{ alg: -7, type: "public-key" }, { alg: -257, type: "public-key" }]
  

• 安全上下文要求：必须在HTTPS环境下运行，localhost测试需配置HTTPS（如自签名证书或ngrok代理）。

代码修改示例 #

添加base64转换函数处理相关字段：

function convertToUrlSafeBase64(base64Str) {
  return base64Str.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

// 处理makeCredentialOptions中的二进制字段
const processedOptions = { ...makeCredentialOptions };
processedOptions.challenge = convertToUrlSafeBase64(processedOptions.challenge);
processedOptions.user.id = convertToUrlSafeBase64(processedOptions.user.id);

if (processedOptions.excludeCredentials) {
  processedOptions.excludeCredentials = processedOptions.excludeCredentials.map(cred => ({
    ...cred,
    id: convertToUrlSafeBase64(cred.id)
  }));
}

// 调用create方法
try {
  const newCredential = await navigator.credentials.create({
    publicKey: processedOptions
  });
} catch (e) {
  console.error(e);
}

额外提示 #

• Chrome on iOS基于WebKit内核，问题原因与Safari完全一致，无需分开排查。
• iOS 15.x版本WebAuthn存在已知兼容性bug，升级至iOS 16.4及以上版本可修复部分问题。

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