janis/ma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update user.html

Browse Source
This commit is contained in:
jakani24
2024-04-04 20:23:00 +02:00
parent 7d778593d2
commit 86064bb701
1 changed files with 58 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
src/server/cyberhex-code/test/user.html
View File

@@ -1,45 +1,36 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<title>lbuchs/WebAuthn Test</title> <title>lbuchs/WebAuthn Test</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script> <script>
/**
* creates a new FIDO2 registration
* @returns {undefined}
*/
async function createRegistration() { async function createRegistration() {
try { try {
// check browser support
if (!window.fetch || !navigator.credentials || !navigator.credentials.create) { if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
throw new Error('Browser not supported.'); throw new Error('Browser not supported.');
} }
// get create args
let rep = await window.fetch('server.php?fn=getCreateArgs' + getGetParams(), {method:'GET', cache:'no-cache'}); let rep = await window.fetch('server.php?fn=getCreateArgs' + getGetParams(), {method:'GET', cache:'no-cache'});
const createArgs = await rep.json(); const createArgs = await rep.json();
// error handling
if (createArgs.success === false) { if (createArgs.success === false) {
throw new Error(createArgs.msg || 'unknown error occured'); 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); recursiveBase64StrToArrayBuffer(createArgs);
// create credentials
const cred = await navigator.credentials.create(createArgs); const cred = await navigator.credentials.create(createArgs);
// create object
const authenticatorAttestationResponse = { const authenticatorAttestationResponse = {
transports: cred.response.getTransports ? cred.response.getTransports() : null, transports: cred.response.getTransports ? cred.response.getTransports() : null,
clientDataJSON: cred.response.clientDataJSON ? arrayBufferToBase64(cred.response.clientDataJSON) : null, clientDataJSON: cred.response.clientDataJSON ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
attestationObject: cred.response.attestationObject ? arrayBufferToBase64(cred.response.attestationObject) : null attestationObject: cred.response.attestationObject ? arrayBufferToBase64(cred.response.attestationObject) : null
}; };
// check auth on server side
rep = await window.fetch('server.php?fn=processCreate' + getGetParams(), { rep = await window.fetch('server.php?fn=processCreate' + getGetParams(), {
method : 'POST', method : 'POST',
body : JSON.stringify(authenticatorAttestationResponse), body : JSON.stringify(authenticatorAttestationResponse),
@@ -47,7 +38,6 @@
}); });
const authenticatorAttestationServerResponse = await rep.json(); const authenticatorAttestationServerResponse = await rep.json();
// prompt server response
if (authenticatorAttestationServerResponse.success) { if (authenticatorAttestationServerResponse.success) {
reloadServerPreview(); reloadServerPreview();
window.alert(authenticatorAttestationServerResponse.msg || 'registration success'); window.alert(authenticatorAttestationServerResponse.msg || 'registration success');
@@ -62,35 +52,23 @@
} }
} }
/**
* checks a FIDO2 registration
* @returns {undefined}
*/
async function checkRegistration() { async function checkRegistration() {
try { try {
if (!window.fetch || !navigator.credentials || !navigator.credentials.create) { if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
throw new Error('Browser not supported.'); throw new Error('Browser not supported.');
} }
// get check args
let rep = await window.fetch('server.php?fn=getGetArgs' + getGetParams(), {method:'GET',cache:'no-cache'}); let rep = await window.fetch('server.php?fn=getGetArgs' + getGetParams(), {method:'GET',cache:'no-cache'});
const getArgs = await rep.json(); const getArgs = await rep.json();
// error handling
if (getArgs.success === false) { if (getArgs.success === false) {
throw new Error(getArgs.msg); 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); recursiveBase64StrToArrayBuffer(getArgs);
// check credentials with hardware
const cred = await navigator.credentials.get(getArgs); const cred = await navigator.credentials.get(getArgs);
// create object for transmission to server
const authenticatorAttestationResponse = { const authenticatorAttestationResponse = {
id: cred.rawId ? arrayBufferToBase64(cred.rawId) : null, 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,
@@ -99,7 +77,6 @@
userHandle: cred.response.userHandle ? arrayBufferToBase64(cred.response.userHandle) : null userHandle: cred.response.userHandle ? arrayBufferToBase64(cred.response.userHandle) : null
}; };
// send to server
rep = await window.fetch('server.php?fn=processGet' + getGetParams(), { rep = await window.fetch('server.php?fn=processGet' + getGetParams(), {
method:'POST', method:'POST',
body: JSON.stringify(authenticatorAttestationResponse), body: JSON.stringify(authenticatorAttestationResponse),
@@ -107,7 +84,6 @@
}); });
const authenticatorAttestationServerResponse = await rep.json(); const authenticatorAttestationServerResponse = await rep.json();
// check server response
if (authenticatorAttestationServerResponse.success) { if (authenticatorAttestationServerResponse.success) {
reloadServerPreview(); reloadServerPreview();
window.alert(authenticatorAttestationServerResponse.msg || 'login success'); window.alert(authenticatorAttestationServerResponse.msg || 'login success');
@@ -138,71 +114,6 @@
}); });
} }
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() { function getGetParams() {
let url = ''; let url = '';
@@ -254,102 +165,49 @@
iframe.src = iframe.src; iframe.src = iframe.src;
} }
function setAttestation(attestation) { function recursiveBase64StrToArrayBuffer(obj) {
let inputEls = document.getElementsByTagName('input'); let prefix = '=?BINARY?B?';
for (const inputEl of inputEls) { let suffix = '?=';
if (inputEl.id && inputEl.id.match(/^(fmt|cert)\_/)) { if (typeof obj === 'object') {
inputEl.disabled = !attestation; 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);
} }
if (inputEl.id && inputEl.id.match(/^fmt\_/)) { obj[key] = bytes.buffer;
inputEl.checked = attestation ? inputEl.id !== 'fmt_none' : inputEl.id === 'fmt_none'; }
} else {
recursiveBase64StrToArrayBuffer(obj[key]);
} }
if (inputEl.id && inputEl.id.match(/^cert\_/)) {
inputEl.checked = attestation ? inputEl.id === 'cert_mds' : false;
} }
} }
} }
/** function arrayBufferToBase64(buffer) {
* force https on load let binary = '';
* @returns {undefined} let bytes = new Uint8Array(buffer);
*/ let len = bytes.byteLength;
window.onload = function() { for (let i = 0; i < len; i++) {
if (location.protocol !== 'https:' && location.host !== 'localhost') { binary += String.fromCharCode( bytes[ i ] );
location.href = location.href.replace('http', 'https');
} }
if (!document.getElementById('rpId').value) { return window.btoa(binary);
document.getElementById('rpId').value = location.hostname;
} }
if (!document.getElementById('attestation_yes').checked) {
setAttestation(false);
}
}
</script> </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> </head>
<body> <body>
<h1 style="margin: 40px 10px 2px 0;">lbuchs/WebAuthn</h1> <h1>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>
<div>&nbsp;</div> <button type="button" onclick="createRegistration()">Create</button>
<table> <button type="button" onclick="checkRegistration()">Login</button>
<tbody><tr> <button type="button" onclick="clearRegistration()">Delete</button>
<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>
<div> <iframe id="serverPreview" src="server.php" style="width:100%;height:500px;"></iframe>
</body> </body>
</html> </html>