Leftover bytes detected while parsing authenticator data

Question

I'm writing a password manager browser extension that also supports passkeys. The extension injects a script to websites that intercepts navigator.credentials.create requests which then opens a popup that waits for the user to authenticate (if not already logged in) and click the Create Passkey button. I'm currently having trouble generating/encoding the attestationObject.

Auth data generation:

function generateAuthData(
        rpIdHash: Uint8Array,
        attestedCredentialData: Uint8Array
    ): Uint8Array {
        const flags = 0x41; // User presence (UP) + Attested Credential Data (AT) flag
        const counter = new Uint8Array([0, 0, 0, 1]); // Counter = 1

        // Concatenate RP ID Hash (32 bytes), Flags (1 byte), Counter (4 bytes), and Attested Credential Data
        return new Uint8Array([
            ...rpIdHash,
            flags,
            ...counter,
            ...attestedCredentialData,
        ]);
    }

Attestation object creation:

function createAttestationObject(
        authData: Uint8Array,
        credentialId: Uint8Array,
        publicKey: Uint8Array
    ): Buffer {
        const aaguid = new Uint8Array(16); // Typically zero-filled if unavailable

        const attestedCredentialData = new Uint8Array(
            aaguid.length + 2 + credentialId.length + publicKey.length
        );
        attestedCredentialData.set(aaguid, 0);
        attestedCredentialData.set(
            new Uint8Array([
                (credentialId.length >> 8) & 0xff,
                credentialId.length & 0xff,
            ]),
            aaguid.length
        );
        attestedCredentialData.set(credentialId, aaguid.length + 2);
        attestedCredentialData.set(
            publicKey,
            aaguid.length + 2 + credentialId.length
        );

        const attestationObject = {
            authData,
            fmt: "none",
            attStmt: {},
        };

        // Encode using CBOR
        return encode(attestationObject);
    }

Credentials generation:

const createCustomCredential = async (
        options: CredentialCreationOptions
    ): Promise<CustomCredential> => {
        if (!options || !options.publicKey) {
            throw new Error("Invalid options: PublicKey options are required.");
        }

        const { rp, challenge } = options.publicKey;

        // Simulate RP ID hash (SHA-256 of RP ID)
        const rpIdHash = new Uint8Array(
            CryptoJS.SHA256(rp.id ?? "").words.flatMap((word) => [
                (word >> 24) & 0xff,
                (word >> 16) & 0xff,
                (word >> 8) & 0xff,
                word & 0xff,
            ])
        );

        // Simulate credential ID and public key
        const credentialId = generateRandomBuffer(32); // 32-byte random ID

        const keyPair = await crypto.subtle.generateKey(
            {
                name: "ECDSA",
                namedCurve: "P-256",
            },
            true,
            ["sign", "verify"]
        );

        const publicKey = new Uint8Array(
            await crypto.subtle.exportKey("raw", keyPair.publicKey)
        );

        const publicKeyHex = Array.from(publicKey)
            .map((x) => x.toString(16).padStart(2, "0"))
            .join("");

        const pubKey =
            "A5010203262001215820" +
            publicKeyHex.substring(2, 66) +
            "225820" +
            publicKeyHex.substring(66, 130);

        const aaguid = new Uint8Array(16);

        const credentialIdLength = new Uint8Array([
            (credentialId.length >> 8) & 0xff,
            credentialId.length & 0xff,
        ]);

        const attestedCredentialData = new Uint8Array(
            aaguid.length +
                credentialIdLength.length +
                credentialId.length +
                publicKey.length
        );
        attestedCredentialData.set(aaguid, 0);
        attestedCredentialData.set(credentialIdLength, aaguid.length);
        attestedCredentialData.set(
            credentialId,
            aaguid.length + credentialIdLength.length
        );
        attestedCredentialData.set(
            publicKey,
            aaguid.length + credentialIdLength.length + credentialId.length
        );

        // Generate authenticator data
        const authData = generateAuthData(rpIdHash, attestedCredentialData);

        const encoder = new TextEncoder();

        // Create attestation object
        const attestationObject = createAttestationObject(
            authData,
            credentialId,
            encoder.encode(pubKey)
        );
        const challengeArray = new Uint8Array(
            challenge instanceof ArrayBuffer ? challenge : challenge.buffer
        );

        return {
            id: btoa(String.fromCharCode(...credentialId))
                .replace(/\+/g, "-")
                .replace(/\//g, "_")
                .replace(/=+$/, ""),
            rawId: credentialId,
            response: {
                clientDataJSON: btoa(
                    JSON.stringify({
                        challenge: btoa(String.fromCharCode(...challengeArray))
                            .replace(/\+/g, "-")
                            .replace(/\//g, "_")
                            .replace(/=+$/, ""),
                        origin: `https://${options.publicKey.rp.id}`,
                        type: "webauthn.create",
                    })
                )
                    .replace(/\+/g, "-")
                    .replace(/\//g, "_")
                    .replace(/=+$/, ""),
                attestationObject: attestationObject,
            },
            type: "public-key",
        };
    };

And this is how I resolve the window.credentials.create request by sending back the generated credentials to the injected script:

const generateKey = async () => {
        setLoading(true);
        if (parsedData) {
            const credential = createCustomCredential(parsedData);
            if (tabId) {
                browser.tabs.sendMessage(parseInt(tabId), {
                    type: "PASSKEY_RESULT",
                    success: true,
                    data: credential,
                });
            }
        }
        setLoading(false);
        window.close();
    };

I'm testing this via webauthn.io and I'm getting this error: Registration failed: Leftover bytes detected while parsing authenticator data

Ki-Eun Shin · Accepted Answer · 2025-01-07 02:51:29Z

0

When handling credential creation on the backend, there are couple of validation steps whether the given created credential is valid or not. When parsing the data on the backend for your data, the data should not have left over bytes which mean that returned data somehow malformed.

The reason why you get such error seems that you just assign random bytes to the public key. Note that the public key should be COSE encoded. So, your random bytes does not conform to the spec and it may throw an unexpected errors on the RP side.

answered Jan 7 at 2:51

Ki-Eun Shin

462 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Asthor · Accepted Answer · 2025-01-09 21:04:45Z

0

The expectation is that the public key in the response is in COSE format. But as far as I can see you are doing

const publicKey = generateRandomBuffer(256); // 256-byte public key

To fix this you probably just need to create a proper object that then gets encoded.

{
  1:   2,  //EC2 key type
  3:  -7,  //ES256 --- -8 is EdDSA
 -1:   1,  //P-256 curve
 -2:   generateRandomBuffer(32),  //x-coordinate
 -3:   generateRandomBuffer(32)   //y-coordinate
}

You probably have to encode this first into CBOR before adding it to your AttestedCredentialData.

See Attested Credential Data for more info

Update:

Crypto-js doesn't let you create CBOR encoded public keys, you'd need to find something to do that for you. However the CBOR object will have most of the data identical when you generate it, with only the x and y coordinates different.

So generating the following string

const publicKey = "A5010203262001215820" + xCoordinatesAsHex + "225820" yCoordinatesAsHex

How you generate the hex is a bit up to you but if you have fetch the key through exportKey, it is probably easiest to work with through jwk

An example of a valid public key would for example be

const publicKey = "A501020326200121582065eda5a12577c2bae829437fe338701a10aaa375e1bb5b5de108de439c08551d2258201e52ed75701163f7f9e40ddf9f341b3dc9ba860af7e0ca7ca7e9eecd0084d19c"

And you could then use this directly into your code and the validation should work.

Second update:

Given your publicKey you could convert the value in it to hex with

publicKey.map(x => x.toString(16).padStart(2,'0')).join('')

This would return the full value as a single string. The first 2 characters would be the compression point and can be discared. The X would be the next 64 characters of the string and the Y would be the final 64 characters of the string.

edited Jan 9 at 21:04

answered Jan 7 at 8:15

Asthor

1,0498 silver badges21 bronze badges

10 Comments

Jasper Barcelona Jan 7 at 15:46

Thanks for your answer! I've edited the question and tried using crypto-js to generate the publicKey instead of just using random bytes. Unfortunately, I'm still getting the same error.

Asthor Jan 7 at 16:35

@JasperBarcelona I've updated my answer a bit. Even with crypto-js and raw format you are still not generating a CBOR encoded key but just the key.

Jasper Barcelona Jan 9 at 5:29

would you be able to give an example of how I would generate xCoordinatesAsHex and yCoordinatesAsHex? Thank you so much.

Asthor Jan 9 at 21:05

@JasperBarcelona added a very simple way to convert the raw key you have to hex as an exmaple.

Jasper Barcelona Jan 30 at 22:02

hey sorry I've been away for a while. I managed to create a hex string from the raw key by using const publicKeyHex = Array.from(publicKey).map((x) => x.toString(16).padStart(2, "0")).join("") which gave me "047d7f1a12cd50272ada32e54c873be0ebcf9152f4a6986749e6c1a7fb375f00c058824e3f8fb2066fbc677ad6765b7c90534231e6df129819626ed99e52c35a37" I'm not really sure how to proceed and generate the attestation object using this. Could you please provide more info? Thanks so much!

|

Collectives™ on Stack Overflow

Leftover bytes detected while parsing authenticator data

2 Answers 2

Comments

Update:

Second update:

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Update:

Second update:

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related