From 86064bb7018aa830b69dae373388c36f823a74e4 Mon Sep 17 00:00:00 2001
From: jakani24 <janis.st44@gmail.com>
Date: Thu, 4 Apr 2024 20:23:00 +0200
Subject: [PATCH] Update user.html

---
 src/server/cyberhex-code/test/user.html | 258 ++++++------------------
 1 file changed, 58 insertions(+), 200 deletions(-)
diff --git a/src/server/cyberhex-code/test/user.html b/src/server/cyberhex-code/test/user.html
index 4087f47..c1cec00 100644
--- a/src/server/cyberhex-code/test/user.html
+++ b/src/server/cyberhex-code/test/user.html
@@ -1,45 +1,36 @@
-<html>
-    <head>
-        <title>lbuchs/WebAuthn Test</title>
-        <meta charset="UTF-8">
-        <script>
 
-        /**
-         * creates a new FIDO2 registration
-         * @returns {undefined}
-         */
+
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>lbuchs/WebAuthn Test</title>
+    <meta charset="UTF-8">
+    <script>
+
         async function createRegistration() {
             try {
-
-                // check browser support
                 if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
                     throw new Error('Browser not supported.');
                 }
 
-                // get create args
                 let rep = await window.fetch('server.php?fn=getCreateArgs' + getGetParams(), {method:'GET', cache:'no-cache'});
                 const createArgs = await rep.json();
 
-                // error handling
                 if (createArgs.success === false) {
                     throw new Error(createArgs.msg || 'unknown error occured');
                 }
 
-                // replace binary base64 data with ArrayBuffer. a other way to do this
-                // is the reviver function of JSON.parse()
                 recursiveBase64StrToArrayBuffer(createArgs);
 
-                // create credentials
                 const cred = await navigator.credentials.create(createArgs);
 
-                // create object
                 const authenticatorAttestationResponse = {
-                    transports: cred.response.getTransports  ? cred.response.getTransports() : null,
-                    clientDataJSON: cred.response.clientDataJSON  ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
+                    transports: cred.response.getTransports ? cred.response.getTransports() : null,
+                    clientDataJSON: cred.response.clientDataJSON ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
                     attestationObject: cred.response.attestationObject ? arrayBufferToBase64(cred.response.attestationObject) : null
                 };
 
-                // check auth on server side
                 rep = await window.fetch('server.php?fn=processCreate' + getGetParams(), {
                     method  : 'POST',
                     body    : JSON.stringify(authenticatorAttestationResponse),
@@ -47,7 +38,6 @@
                 });
                 const authenticatorAttestationServerResponse = await rep.json();
 
-                // prompt server response
                 if (authenticatorAttestationServerResponse.success) {
                     reloadServerPreview();
                     window.alert(authenticatorAttestationServerResponse.msg || 'registration success');
@@ -62,44 +52,31 @@
             }
         }
 
-
-        /**
-         * checks a FIDO2 registration
-         * @returns {undefined}
-         */
         async function checkRegistration() {
             try {
-
                 if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
                     throw new Error('Browser not supported.');
                 }
 
-                // get check args
                 let rep = await window.fetch('server.php?fn=getGetArgs' + getGetParams(), {method:'GET',cache:'no-cache'});
                 const getArgs = await rep.json();
 
-                // error handling
                 if (getArgs.success === false) {
                     throw new Error(getArgs.msg);
                 }
 
-                // replace binary base64 data with ArrayBuffer. a other way to do this
-                // is the reviver function of JSON.parse()
                 recursiveBase64StrToArrayBuffer(getArgs);
 
-                // check credentials with hardware
                 const cred = await navigator.credentials.get(getArgs);
 
-                // create object for transmission to server
                 const authenticatorAttestationResponse = {
                     id: cred.rawId ? arrayBufferToBase64(cred.rawId) : null,
-                    clientDataJSON: cred.response.clientDataJSON  ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
+                    clientDataJSON: cred.response.clientDataJSON ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
                     authenticatorData: cred.response.authenticatorData ? arrayBufferToBase64(cred.response.authenticatorData) : null,
                     signature: cred.response.signature ? arrayBufferToBase64(cred.response.signature) : null,
                     userHandle: cred.response.userHandle ? arrayBufferToBase64(cred.response.userHandle) : null
                 };
 
-                // send to server
                 rep = await window.fetch('server.php?fn=processGet' + getGetParams(), {
                     method:'POST',
                     body: JSON.stringify(authenticatorAttestationResponse),
@@ -107,7 +84,6 @@
                 });
                 const authenticatorAttestationServerResponse = await rep.json();
 
-                // check server response
                 if (authenticatorAttestationServerResponse.success) {
                     reloadServerPreview();
                     window.alert(authenticatorAttestationServerResponse.msg || 'login success');
@@ -126,83 +102,18 @@
                 return response.json();
 
             }).then(function(json) {
-               if (json.success) {
-                   reloadServerPreview();
-                   window.alert(json.msg);
-               } else {
-                   throw new Error(json.msg);
-               }
+                if (json.success) {
+                    reloadServerPreview();
+                    window.alert(json.msg);
+                } else {
+                    throw new Error(json.msg);
+                }
             }).catch(function(err) {
                 reloadServerPreview();
                 window.alert(err.message || 'unknown error occured');
             });
         }
 
-
-        function queryFidoMetaDataService() {
-            window.fetch('server.php?fn=queryFidoMetaDataService' + getGetParams(), {method:'GET',cache:'no-cache'}).then(function(response) {
-                return response.json();
-
-            }).then(function(json) {
-               if (json.success) {
-                   window.alert(json.msg);
-               } else {
-                   throw new Error(json.msg);
-               }
-            }).catch(function(err) {
-                window.alert(err.message || 'unknown error occured');
-            });
-        }
-
-        /**
-         * convert RFC 1342-like base64 strings to array buffer
-         * @param {mixed} obj
-         * @returns {undefined}
-         */
-        function recursiveBase64StrToArrayBuffer(obj) {
-            let prefix = '=?BINARY?B?';
-            let suffix = '?=';
-            if (typeof obj === 'object') {
-                for (let key in obj) {
-                    if (typeof obj[key] === 'string') {
-                        let str = obj[key];
-                        if (str.substring(0, prefix.length) === prefix && str.substring(str.length - suffix.length) === suffix) {
-                            str = str.substring(prefix.length, str.length - suffix.length);
-
-                            let binary_string = window.atob(str);
-                            let len = binary_string.length;
-                            let bytes = new Uint8Array(len);
-                            for (let i = 0; i < len; i++)        {
-                                bytes[i] = binary_string.charCodeAt(i);
-                            }
-                            obj[key] = bytes.buffer;
-                        }
-                    } else {
-                        recursiveBase64StrToArrayBuffer(obj[key]);
-                    }
-                }
-            }
-        }
-
-        /**
-         * Convert a ArrayBuffer to Base64
-         * @param {ArrayBuffer} buffer
-         * @returns {String}
-         */
-        function arrayBufferToBase64(buffer) {
-            let binary = '';
-            let bytes = new Uint8Array(buffer);
-            let len = bytes.byteLength;
-            for (let i = 0; i < len; i++) {
-                binary += String.fromCharCode( bytes[ i ] );
-            }
-            return window.btoa(binary);
-        }
-
-        /**
-         * Get URL parameter
-         * @returns {String}
-         */
         function getGetParams() {
             let url = '';
 
@@ -254,102 +165,49 @@
             iframe.src = iframe.src;
         }
 
-        function setAttestation(attestation) {
-            let inputEls = document.getElementsByTagName('input');
-            for (const inputEl of inputEls) {
-                if (inputEl.id && inputEl.id.match(/^(fmt|cert)\_/)) {
-                    inputEl.disabled = !attestation;
-                }
-                if (inputEl.id && inputEl.id.match(/^fmt\_/)) {
-                    inputEl.checked = attestation ? inputEl.id !== 'fmt_none' : inputEl.id === 'fmt_none';
-                }
-                if (inputEl.id && inputEl.id.match(/^cert\_/)) {
-                    inputEl.checked = attestation ? inputEl.id === 'cert_mds' : false;
+        function recursiveBase64StrToArrayBuffer(obj) {
+            let prefix = '=?BINARY?B?';
+            let suffix = '?=';
+            if (typeof obj === 'object') {
+                for (let key in obj) {
+                    if (typeof obj[key] === 'string') {
+                        let str = obj[key];
+                        if (str.substring(0, prefix.length) === prefix && str.substring(str.length - suffix.length) === suffix) {
+                            str = str.substring(prefix.length, str.length - suffix.length);
+
+                            let binary_string = window.atob(str);
+                            let len = binary_string.length;
+                            let bytes = new Uint8Array(len);
+                            for (let i = 0; i < len; i++)        {
+                                bytes[i] = binary_string.charCodeAt(i);
+                            }
+                            obj[key] = bytes.buffer;
+                        }
+                    } else {
+                        recursiveBase64StrToArrayBuffer(obj[key]);
+                    }
                 }
             }
         }
 
-        /**
-         * force https on load
-         * @returns {undefined}
-         */
-        window.onload = function() {
-            if (location.protocol !== 'https:' && location.host !== 'localhost') {
-                location.href = location.href.replace('http', 'https');
-            }
-            if (!document.getElementById('rpId').value) {
-                document.getElementById('rpId').value = location.hostname;
-            }
-
-            if (!document.getElementById('attestation_yes').checked) {
-                setAttestation(false);
+        function arrayBufferToBase64(buffer) {
+            let binary = '';
+            let bytes = new Uint8Array(buffer);
+            let len = bytes.byteLength;
+            for (let i = 0; i < len; i++) {
+                binary += String.fromCharCode( bytes[ i ] );
             }
+            return window.btoa(binary);
         }
-
-        </script>
-        <style>
-            body {
-                font-family:sans-serif;
-                margin: 0 20px;
-                padding: 0;
-            }
-            .splitter {
-                display: flex;
-                flex-direction: row;
-                flex-wrap: wrap;
-                margin: 0;
-                padding: 0;
-            }
-            .splitter > .form {
-                flex: 1;
-                min-width: 600px;
-            }
-            .splitter > .serverPreview {
-                width: 740px;
-                min-height: 700px;
-                margin: 0;
-                padding: 0;
-                border: 1px solid grey;
-                display: flex;
-                flex-direction: column;
-            }
-
-            .splitter > .serverPreview iframe {
-                width: 700px;
-                flex: 1;
-                border: 0;
-            }
-
-        </style>
-    </head>
-    <body>
-        <h1 style="margin: 40px 10px 2px 0;">lbuchs/WebAuthn</h1>
-        <div style="font-style: italic;">A simple PHP WebAuthn (FIDO2) server library.</div>
-        <div class="splitter">
-            <div class="form">
-                <div>&nbsp;</div>
-                <div>&nbsp;</div>
-                <div>Simple working demo for the <a href="https://github.com/lbuchs/WebAuthn">lbuchs/WebAuthn</a> library.</div>
-                <div>
-                    <div>&nbsp;</div>
-                    <table>
-                        <tbody><tr>
-                                <td>
-                                    <button type="button" onclick="createRegistration()">&#10133; new registration</button>
-                                </td>
-                                <td>
-                                    <button type="button" onclick="checkRegistration()">&#10068; check registration</button>
-                                </td>
-                                <td>
-                                    <button type="button" onclick="clearRegistration()">&#9249; clear all registrations</button>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-            <div class="serverPreview">
-                <p style="margin-left:10px;font-weight: bold;">Here you can see what's saved on the server:</p>
-                <iframe src="server.php?fn=getStoredDataHtml" id="serverPreview"></iframe>
-            </div>
-        <div>
-    </body>
-</html>
\ No newline at end of file
+    </script>
+</head>
+<body>
+<h1>lbuchs/WebAuthn</h1>
+<div>
+    <button type="button" onclick="createRegistration()">Create</button>
+    <button type="button" onclick="checkRegistration()">Login</button>
+    <button type="button" onclick="clearRegistration()">Delete</button>
+</div>
+<iframe id="serverPreview" src="server.php" style="width:100%;height:500px;"></iframe>
+</body>
+</html>
