Merge pull request #27 from DuendeSoftware/wca/jwt-decoder/bugfixes

Some bugfixes and improvements to the JWT decoder

Author: wcabus

src/Pages/Home/JwtDecoder/JwtDecoder.cshtml

@@ -332,38 +332,10 @@
             });
             
             const jwtInput = $('#jwt-input');
-            jwtInput.on('input', async function() {
-                decodedJwt = {
-                    header: null,
-                    payload: null,
-                    signature: null
-                };
-                
-                const jwt = $(this).text();
-                if (jwt) {
-                    try {
-                        const parts = jwt.split('.');
-                        if (parts.length === 3) {
-                            const header = JSON.parse(atob(parts[0]));
-                            const payload = JSON.parse(atob(parts[1]));
-                            const signature = parts[2];
-
-                            decodedJwt = {
-                                header: header,
-                                payload: payload,
-                                signature: signature
-                            };
-                            await showDecodedJwt(parts, header, payload, signature);
-                            colorJwtInput($(this), parts);
-                        } else {
-                            showError('Invalid JWT format. A JWT should have three parts separated by dots.');
-                        }
-                    } catch (e) {
-                        showError('Error decoding JWT: ' + e.message);
-                    }
-                } else {
-                    await showDecodedJwt(null, null, null, ' ');
-                }
+            let debounceTimeout;
+            jwtInput.on('input', function() {
+                clearTimeout(debounceTimeout);
+                debounceTimeout = setTimeout(async () => await parseJwt.call(this), 300); // 300ms debounce
             });
 
             @if (Model.View?.Token != null)
@@ -372,25 +344,135 @@
             }
             else
             {
-                @:await showDecodedJwt(null, null, null, ' ');
+                @:await showDecodedJwt(null, null, '', '', ' ');
             }
         }
 
-        function colorJwtInput(target, parts) {
+        async function parseJwt() {
+            decodedJwt = {
+                header: null,
+                payload: null,
+                signature: null
+            };
+
+            // Clear previous state before attempting to parse a new JWT
+            await showDecodedJwt(null, null, '', '', ' ');
+            
+            const jwt = $(this).text();
+            if (jwt) {
+                try {
+                    const parts = jwt.indexOf('.') === -1 ? [jwt] : jwt.split('.');
+                    const headerInfo = parseJwtPart(parts, 0);
+                    const payloadInfo = parseJwtPart(parts, 1);
+                    const signature = parts.length > 2 ? parts[2] : '';
+
+                    decodedJwt = {
+                        header: headerInfo.length > 0 ? headerInfo[0] : null,
+                        encodedHeader: headerInfo.length > 1 ? headerInfo[1] : '',
+                        payload: payloadInfo.length > 0 ? payloadInfo[0] : null,
+                        encodedPayload: payloadInfo.length > 1 ? payloadInfo[1] : '',
+                        signature: signature
+                    };
+                    
+                    await showDecodedJwt(decodedJwt.header, decodedJwt.payload, decodedJwt.encodedHeader, decodedJwt.encodedPayload, signature);
+                    colorJwtInput($(this), parts, decodedJwt.encodedHeader, decodedJwt.encodedPayload, decodedJwt.signature);
+                    
+                    if (parts.length !== 3) {
+                        showError('Invalid JWT format. A JWT should have three parts separated by dots.');
+                    }
+                } catch (e) {
+                    showError('Error decoding JWT: ' + e.message);
+                }
+            } else {
+                await showDecodedJwt(null, null, '', '', ' ');
+            }
+        }
+
+        function parseJwtPart(parts, index) {
+            if (index < 0 || index >= parts.length) {
+                return [];
+            }
+            
+            const part = parts[index];
+            if (!part) {
+                return [];
+            }
+            
+            // Find the base64 marker for a JSON object to start parsing
+            let jsonStartPos = 0;
+            while (jsonStartPos < part.length && part.substring(jsonStartPos, jsonStartPos + 3) !== 'eyJ') {
+                jsonStartPos++;
+            }
+            if (jsonStartPos >= part.length) {
+                return []; // No JSON object found
+            }
+            
+            // Find the base64 marker for a JSON object to end parsing ('In0' for '"}' or 'fQ' for '}')
+            let jsonEndPos = part.length;
+            while (jsonEndPos > jsonStartPos && (part.substring(jsonEndPos - 3, jsonEndPos) !== 'In0') && (part.substring(jsonEndPos - 2, jsonEndPos) !== 'fQ')) {
+                jsonEndPos--;
+            }
+            if (jsonEndPos <= jsonStartPos) {
+                return []; // No valid JSON object found
+            }
+            
+            try {
+                const encodedPart = part.substring(jsonStartPos, jsonEndPos);
+                const decodedPart = decodeBase64UrlSafe(encodedPart);
+                return [JSON.parse(decodedPart), encodedPart];
+            }
+            catch {
+                
+            }
+            
+            return [];
+        }
+        
+        function colorJwtInput(target, originalParts, encodedHeader, encodedPayload, signature) {
             let html = '';
-            if (parts.length > 0) {
-                html += `<span class="text-danger">${parts[0] || ''}</span>`;
+            if (encodedHeader) {
+                const originalHeader = originalParts[0];
+                if (originalHeader === encodedHeader) {
+                    html += `<span class="text-danger">${encodedHeader}</span>`;
+                }
+                else {
+                    // Show the additional characters before and after the "encodedHeader" part that are found in originalHeader
+                    const start = originalHeader.indexOf(encodedHeader);
+                    const end = start + encodedHeader.length;
+                    if (start > 0) {
+                        html += `<span class="skipped">${originalHeader.substring(0, start)}</span>`;
+                    }
+                    html += `<span class="text-danger">${encodedHeader}</span>`;
+                    if (end < originalHeader.length) {
+                        html += `<span class="skipped">${originalHeader.substring(end)}</span>`;
+                    }
+                }
             }
-            if (parts.length > 1) {
-                html += `<span class="text-success">.${parts[1] || ''}</span>`;
+            if (encodedPayload) {
+                const originalPayload = originalParts[1];
+                if (originalPayload === encodedPayload) {
+                    html += '<span class="jwt-divider">.</span>' + `<span class="text-success">${encodedPayload}</span>`;
+                }
+                else {
+                    // Show the additional characters before and after the "encodedPayload" part that are found in originalPayload
+                    const start = originalPayload.indexOf(encodedPayload);
+                    const end = start + encodedPayload.length;
+                    if (start > 0) {
+                        html += `<span class="skipped">${originalPayload.substring(0, start)}</span>`;
+                    }
+                    html += '<span class="jwt-divider">.</span>' + `<span class="text-success">${encodedPayload}</span>`;
+                    if (end < originalPayload.length) {
+                        html += `<span class="skipped">${originalPayload.substring(end)}</span>`;
+                    }
+                }
             }
-            if (parts.length > 2) {
-                html += `<span class="text-warning">.${parts.slice(2).join('.') || ''}</span>`;
+            if (signature) {
+                html += '<span class="jwt-divider">.</span>' + `<span class="text-warning">${signature}</span>`;
             }
             target.html(html);
         }
         
-        async function showDecodedJwt(jwtParts, header, payload, signature) {
+        async function showDecodedJwt(header, payload, encodedHeader, encodedPayload, signature) {
             clearError();
             hideSignatureValidationResults();
             
@@ -399,8 +481,8 @@
             
             $('#jwt-signature').text(signature || ' ');
             
-            if (jwtParts && Array.isArray(jwtParts) && jwtParts.length === 3) {
-                await attemptSignatureValidation(header, payload, jwtParts);
+            if (encodedHeader && encodedPayload && signature) {
+                await attemptSignatureValidation(header, payload, encodedHeader, encodedPayload, signature);
             }
         }
 
@@ -517,7 +599,7 @@
             return contents;
         }
                         
-        async function attemptSignatureValidation(header, payload, jwtParts) {
+        async function attemptSignatureValidation(header, payload, encodedHeader, encodedPayload, signature) {
             const jwksUrlField = $('#jwks-url');
             
             const isPristine = jwksUrlField.data('pristine') !== false;
@@ -530,14 +612,18 @@
             
             if (jwksUrl) {
                 await loadJwks(jwksUrl);
-                
+
+                const headerAndPayload = encodedHeader + '.' + encodedPayload;
                 if (jwks.keys.length === 0) {
-                    showSignatureValidationResult('warning', 'No JWKs loaded. Cannot validate signature.');
+                    if (signature) {
+                        showSignatureValidationResult('warning', 'The JWT has a signature, but no JWKs could be loaded to verify whether the signature is valid.');
+                    }
+                    else {
+                        showSignatureValidationResult('warning', 'No JWKs loaded and no signature to validate.');
+                    }
                     return;
                 }
-                
-                const headerAndPayload = jwtParts[0] + '.' + jwtParts[1];
-                const signature = jwtParts[2];
+                                
                 const result = await validateSignature(header, headerAndPayload, signature, jwks.keys);
                 
                 if (result.signatureValidated) {
@@ -620,8 +706,7 @@
                     ['verify']
                 );
                 
-                signature = signature.replace(/-/g, '+').replace(/_/g, '/'); // Replace URL-safe characters with standard Base64 characters
-                const binarySignature = atob(signature);
+                const binarySignature = decodeBase64UrlSafe(signature);
                 const signatureBuffer = Uint8Array.from(binarySignature, c => c.charCodeAt(0));
                 const isValid = await subtle.verify(algorithm, publicKey, signatureBuffer, new TextEncoder().encode(headerAndPayload));
                 return { signatureValidated: true, isValid: isValid };
@@ -658,7 +743,8 @@
                 return null;
             }
 
-            if (!response.headers.get('Content-Type').startsWith('application/json')) {
+            const contentType = response.headers.get('Content-Type');
+            if (!contentType || !contentType.startsWith('application/json')) {
                 if (url.toLowerCase().indexOf('.well-known') !== -1 || url.toLowerCase().endsWith('.json')) {
                     showError('The provided JWKs URL does not return a valid JSON response.');
                     return null;
@@ -707,5 +793,9 @@
         function hideSignatureValidationResults() {
             $('.jwt-signature-validation-result').removeClass('d-flex').addClass('d-none');
         }
+        
+        function decodeBase64UrlSafe(base64Data) {
+            return atob(base64Data.replace(/-/g, '+').replace(/_/g, '/'));
+        }
     </script>
 }

src/wwwroot/css/site.css

@@ -127,6 +127,7 @@ a.navbar-brand .icon-banner {
 }
 .jwt-decoder-container .jwt-input-editable {
   word-wrap: anywhere;
+  max-width: 100vw;
 }
 .jwt-decoder-container .jwt-input-editable .text-danger {
   color: #c586c0 !important;
@@ -137,6 +138,9 @@ a.navbar-brand .icon-banner {
 .jwt-decoder-container .jwt-input-editable .text-warning {
   color: #86c0c5 !important;
 }
+.jwt-decoder-container .jwt-input-editable .skipped {
+  text-decoration: line-through;
+}
 .jwt-decoder-container .json-content, .jwt-decoder-container .jwt-input-editable {
   font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 1em;

src/wwwroot/css/site.min.css

@@ -145,6 +145,7 @@ a.navbar-brand {
 
   .jwt-input-editable {
     word-wrap: anywhere;
+    max-width: 100vw;
 
     .text-danger {
       color: #c586c0 !important;
@@ -157,6 +158,10 @@ a.navbar-brand {
     .text-warning {
       color: #86c0c5 !important;
     }
+    
+    .skipped {
+      text-decoration: line-through;
+    }
   }
 
   .json-content, .jwt-input-editable {