Re: [webauthn] Add a way to use webauthn without Javascript (#1255)

Not sure if it's particularly helpful for this issue. But I managed to get Webauthn working without XHR; but using a `multipart` form submission instead. This way I don't need to pull in any libraries for serializing binary data to json.
It at least kind of keeps the semantic html. And whatever non-js version of Webauthn should probably have this as behaviour in some way or another.

```html
<!doctype html>
<form action="login" data-challenge="{{ .Challenge }}" method="post" enctype="multipart/form-data">
    <input type="text" name="username" autocomplete="username webauthn">

    <input type="hidden" name="type">
    <input type="hidden" name="id">
    <input type="file" name="clientDataJSON" accept="application/json" hidden>
    <input type="file" name="authenticatorData" accept="application/octet-stream" hidden>
    <input type="submit" value="Submit">
</form>

<script type="module">
    function submitCredential(credential, form) {
        form.elements.namedItem('type').value = credential.type;
        form.elements.namedItem('id').value = credential.id;
        const clientDataJSON = new DataTransfer();
        clientDataJSON.items.add(new File([response.clientDataJSON], 'clientDataJSON'), { type: 'application/json' });
        form.elements.namedItem("clientDataJSON").files = clientDataJSON.files;
        if (response instanceof AuthenticatorAttestationResponse) {
            const attestationObject = new DataTransfer();
            attestationObject.items.add(new File([response.attestationObject], 'attestationObject'), { type: 'application/cbor' });
            form.elements.namedItem("attestationObject").files = attestationObject.files;
        }
        if (response instanceof AuthenticatorAssertionResponse) {
            const authenticatorData = new DataTransfer();
            authenticatorData.items.add(new File([response.authenticatorData], 'authenticatorData'), { type: 'application/octet-stream' });
            form.elements.namedItem("authenticatorData").files = authenticatorData.files;
        }
        form.submit();
    }

    const login = document.forms.namedItem('login');
    const dataURLLogin = `data:application/octet-stream;base64,${login.dataset['challenge']}`;
    const responseLogin = await fetch(dataURL);
    const challengeLogin = await response.arrayBuffer();

    form.onsubmit = async (event) => {
        event.preventDefault();
        const credential = await navigator.credentials.get({
            publicKey: { challenge: challengeLogin, userVerification: 'required', allowCredentials: [] },
        });
        submitCredential(credential, form);
    };

    if (PublicKeyCredential.isConditionalMediationAvailable && await PublicKeyCredential.isConditionalMediationAvailable()) {
        const credential = await navigator.credentials.get({
            mediation: 'conditional',
            publicKey: { challenge, userVerification: 'required', allowCredentials: [] },
        });
        submitCredential(credential, form);
    }


</script>
```

-- 
GitHub Notification of comment by arianvp
Please view or discuss this issue at https://github.com/w3c/webauthn/issues/1255#issuecomment-1848386610 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 9 December 2023 11:48:06 UTC