Merge pull request #4 from ivarprudnikov/feat/render-array-and-map

Render arrays and maps, +cosmetic, +readme
gluecose · Aug 20, 2024 · 01f78f7 · 01f78f7
2 parents d349f3e + b9fe153
commit 01f78f7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -2,4 +2,14 @@
 
 An online decoder for [COSE](https://datatracker.ietf.org/doc/html/rfc8152) messages, currently limited to COSE_Sign1.
 
+## Live preview
+
 https://gluecose.github.io/cose-viewer/
+
+## Development
+
+1. Install [`npm`](https://nodejs.org/en/download)
+2. Install project dependencies `npm install`
+3. Run a build script `npm run build`, the files will appear in `dist` directory
+4. Serve built files locally and access them via your browser, e.g. `python3 -m http.server 8080 --bind 127.0.0.1 --directory dist`
+
diff --git a/dist/index.html b/dist/index.html
@@ -21,15 +21,31 @@
         #output {
             width: 100%;
         }
+        .header {
+            width: 80%;
+            margin: 0 auto;
+            text-align: center;
+        }
+        .footer {
+            width: 80%;
+            margin: 50px auto;
+            text-align: right;
+        }
     </style>
 </head>
 <body>
+    <div class="header">
+        <h1>COSE Viewer</h1>
+    </div>
     <div id="container">
         Note: This tool supports COSE_Sign1 only.<br /><br />
         <input type="file" id="file" /> <button id="load-file">Load File</button>
         <button id="load-hex">Load from Hex</button><br />
         <pre id="output"></pre>
     </div>
+    <div class="footer">
+        <p>Source code @ <a href="https://github.com/gluecose/cose-viewer">GitHub</a></p>
+    </div>
 
     <script src="main.js"></script>
 </body>

diff --git a/src/index.js b/src/index.js
@@ -110,8 +110,7 @@ function prettyBstrBase64(val) {
 }
 
 function prettyCounterSignature(val) {
-    // TODO details
-    return "<counter signature>";
+    return prettyUnknown(val);
 }
 
 function prettyCoseX509(val) {
@@ -133,12 +132,22 @@ function prettyString(val) {
 
 function prettyUnknown(val) {
     let prettyValue
-    if (ArrayBuffer.isView(val)) {
+    if (Array.isArray(val)) {
+        prettyValue = "[" + val.map(prettyUnknown).join(", ") + "]";
+    } else if (ArrayBuffer.isView(val)) {
         prettyValue = prettyBstrHex(val);
-    } else if (typeof val == "string") {
+    } else if (val instanceof Object.getPrototypeOf(Uint8Array)) {
+        prettyValue = prettyBstrBase64(val);
+    } else if (typeof val === "string") {
         prettyValue = `"${val}"`;
-    } else if (typeof val == "number") {
+    } else if (typeof val === "number") {
         prettyValue = val.toString();
+    } else if (val instanceof Map) {
+        prettyValue = "[";
+        for (const [key, value] of val) {
+            prettyValue += `  (${prettyUnknown(key)}): ${prettyUnknown(value)},`;
+        }
+        prettyValue += "]";
     } else if (val.tag) {
         prettyValue = `Tag(${val.tag}) ${prettyUnknown(val.value)}`;
     } else {
@@ -157,6 +166,7 @@ const HeaderMapping = new Map([
     [7, ["counter signature", prettyCounterSignature ]],
     [9, ["CounterSignature0", prettyBstrHex ]],
     [10, ["kid context", prettyBstrHex ]],
+    [15, ["CWT claims", prettyUnknown ]],
     [32, ["x5bag", prettyCoseX509 ]],
     [33, ["x5chain", prettyCoseX509 ]],
     [34, ["x5t", prettyCoseCertHash ]],