hmac-obj
Version:
JavaScript implementation of HMAC generation and verification for the browser and node.js.
277 lines (225 loc) • 11.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>HMACObj - Live Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="32x32" href="https://umamiappearance.github.io/_Profile/logo/favicon.ico">
<link href="https://umamiappearance.github.io/MSG/MSG.css" rel="stylesheet">
<script type="module">
//import HMACObj from "../src/index.js";
import HMACObj from "../dist/hmac-obj-bex.esm.min.js";
window.HMACObj = HMACObj;
import liveExamples from "https://umamiappearance.github.io/JSLiveExamples/dist/js-live-examples.esm.min.js";
document.addEventListener("DOMContentLoaded", () => {
const reprList = document.querySelector("#repr-list");
const hmacObj = new HMACObj("SHA-1");
const representations = Object.keys(hmacObj.basedigest);
representations.splice(representations.indexOf("toSimpleBase"), 1);
representations.forEach(repr => {
const li = document.createElement("li");
li.textContent = repr + "()";
reprList.append(li);
});
const simpleBaseLi = document.createElement("li");
simpleBaseLi.textContent = "toSimpleBase"
const simpleBase = document.createElement("ul");
for (const sbRepr in hmacObj.basedigest.toSimpleBase) {
const li = document.createElement("li");
li.textContent = sbRepr + "()";
simpleBase.append(li);
}
simpleBaseLi.append(simpleBase);
reprList.append(simpleBaseLi);
}, false);
</script>
<!-- CSS -->
<style>
.math li {
font-family: monospace;
font-style: normal;
font-weight: 500;
font-size: 1rem;
}
h3 {
font-size: 1.1em;
margin: 0.5em 0 0 0;
}
ul {
margin: 0;
}
article > table thead {
border-bottom: 3px dotted #000;
}
article > table thead th {
padding-bottom: 4px;
}
article {
width: 80%;
}
footer {
text-align: right;
margin-right: 6px;
height: 40px;
}
#le-copied article {
width: auto;
}
@media screen and (max-width: 768px) {
article {
width: calc(100% - 1em);
}
}
@media screen and (min-width: 768px) {
div.live-example {
width: 100% ;
}
}
</style>
</head>
<body>
<main>
<section>
<article>
<h1>HMACObj - Live Examples</h1>
<p>
Here you can find examples to demonstrate many features of <b>HMACObj</b>. You can run the code and also change it.
<br>
<i>(Also check out the <a href="./generator.html">Online HMAC Generator</a>), to see HMACObj operate in a real application.</i>
</p>
<p>
In every example you have global access to the <b>HMACObj</b> - constructor.
</p>
</article>
</section>
<hr>
<section id="examples">
<article>
<template class="live-example no-scroll">
<h1>Creating instances</h1>
<meta data-run="true">
<script>
const sha1 = new HMACObj("SHA-1");
await sha1.generateKey();
await sha1.update("Hello World!");
console.log("SHA-1: ", sha1.hexdigest());
const sha256 = new HMACObj("SHA-256");
await sha256.importKey("super_secret_key");
await sha256.update("Hello World!");
console.log("SHA-256:", sha256.hexdigest());
const sha384 = await HMACObj.new(
"super_secret_key",
"Hello World!",
"SHA-384"
)
console.log("SHA-384:", sha384.hexdigest());
const sha512 = await HMACObj.new(
null, // <-- this will produce a warning, and the automatic generation of a key
"Hello World!",
"SHA-512"
)
console.log("SHA-512:", sha512.hexdigest());
</script>
</template>
</article>
<article>
<h3>☛ hmacObj.update(a); hmacObj.update(b) is in many occasions equivalent to hmacObj.update(a+b)</h3>
<template class="live-example">
<h1>.update() & byte concatenation</h1>
<meta data-run="true">
<script>
// True for concatenation:
const hmacObjA = await HMACObj.new("super_secret_key", "Hello", "SHA-1");
await hmacObjA.update(" World!!!");
const hmacObjB = await HMACObj.new("super_secret_key", "Hello World!!!", "SHA-1");
console.log(hmacObjA.hexdigest(), "≙", hmacObjB.hexdigest());
// Not true for mathematical operations:
const hmacObjC = await HMACObj.new("super_secret_key", 1, "SHA-1");
await hmacObjC.update(2);
const hmacObjD = await HMACObj.new("super_secret_key", 1+2, "SHA-1");
console.log(hmacObjC.hexdigest(), "≠", hmacObjD.hexdigest());
</script>
</template>
</article>
<article id="base-representations">
<h3>☛ There are plenty of representation available:</h3>
<ul id="repr-list" class="math"></ul>
<template class="live-example">
<h1>Base Representations</h1>
<meta data-run="true">
<script>
const reprObj = await HMACObj.new("key-abc123", "Hello World!!!", "SHA-1");
console.log(
"toBytes:",
reprObj.basedigest.toBytes()
);
console.log(
"toBase64:",
reprObj.basedigest.toBase64()
);
console.log(
"toSimpleBase.Base6:",
reprObj.basedigest.toSimpleBase.Base6()
);
</script>
</template>
</article>
<article>
<h3>☛ It is possible to sign singular messages without updating the object (including digest comparison):</h3>
<ul id="repr-list" class="math"></ul>
<template class="live-example">
<h1>Single Signing / Digest Comparison</h1>
<meta data-run="true">
<script>
const h = new HMACObj("SHA-384");
await h.generateKey();
await h.update("Hello ");
await h.update("World!");
const digestA = h.digest();
const digestB = await h.sign("Hello World!");
console.log("equality is:", HMACObj.compareDigest(digestA, digestB));
</script>
</template>
</article>
<article>
<h3>☛ Crypto Keys can be generated externally and integrated (including the verification of authenticity):</h3>
<ul id="repr-list" class="math"></ul>
<template class="live-example">
<h1>External Crypto Key / Verification</h1>
<meta data-run="true">
<script>
const key = await HMACObj.generateKey("SHA-512");
const msg = "Hello World!";
const obj = await HMACObj.new(key, msg, "SHA-512", "object");
const signatureA = new TextEncoder().encode("abc123");
const signatureB = obj.digest();
console.log(
"authenticity of A is:",
await obj.verify(msg, signatureA)
);
console.log(
"authenticity of B is:",
await obj.verify(msg, signatureB)
);
</script>
</template>
</article>
</section>
<hr>
<section>
<small>Examples powered by:</small>
<a href="https://github.com/UmamiAppearance/JSLiveExamples" target="_blank">
<h2 style="margin-top: 1px;">
JSLiveExamples
</h2>
</a>
</section>
</main>
<footer>
<a href="https://github.com/UmamiAppearance/HMACObj" style="text-decoration: none;" title="to repository">
<span style="text-decoration: underline;">github.com/UmamiAppearance/HMACObj</span>
<svg height="22" width="22" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="vertical-align: bottom;"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
</footer>
</body>
</html>