{"id":75,"date":"2026-05-28T10:17:10","date_gmt":"2026-05-28T10:17:10","guid":{"rendered":"https:\/\/netguide.io\/tools\/?p=75"},"modified":"2026-05-28T10:18:58","modified_gmt":"2026-05-28T10:18:58","slug":"jwt-debugger-generator","status":"publish","type":"post","link":"https:\/\/netguide.io\/tools\/de\/jwt-debugger-generator\/","title":{"rendered":"JWT Debugger &amp; Generator"},"content":{"rendered":"<div id=\"netgu-4256577429\" class=\"netgu-before-content netgu-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-6258556257245998\" \ndata-ad-slot=\"3494115342\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n<div class=\"wp-jwt-container\">\n    <h3 class=\"wp-jwt-title\">JWT Debugger &#038; Generator<\/h3>\n\n    <div class=\"wp-jwt-main-grid\">\n        <div class=\"wp-jwt-column\">\n            <div class=\"wp-jwt-group\">\n                <label>Encoded JWT Token<\/label>\n                <textarea id=\"jwt-encoded\" class=\"jwt-code-font\" placeholder=\"Paste or edit token here...\" oninput=\"decodeJWT()\"><\/textarea>\n            <\/div>\n            <div class=\"wp-jwt-footer-actions\">\n                <button onclick=\"copyJWT()\" id=\"btn-copy-jwt\">Copy Token<\/button>\n                <button onclick=\"clearJWT()\" class=\"btn-danger\">Clear<\/button>\n            <\/div>\n            <div id=\"wp-jwt-error\" class=\"wp-jwt-warning-box\" style=\"display:none;\">Invalid JWT format!<\/div>\n        <\/div>\n\n        <div class=\"wp-jwt-column\">\n            <div class=\"wp-jwt-group\">\n                <label style=\"color: #d63638;\">Header (Algorithm &#038; Token Type)<\/label>\n                <textarea id=\"jwt-header\" class=\"jwt-code-font jwt-border-header\" placeholder=\"{}\" oninput=\"encodeJWT()\"><\/textarea>\n            <\/div>\n            \n            <div class=\"wp-jwt-group\">\n                <label style=\"color: #9b51e0;\">Payload (Data \/ Claims)<\/label>\n                <textarea id=\"jwt-payload\" class=\"jwt-code-font jwt-border-payload\" placeholder=\"{}\" oninput=\"encodeJWT()\"><\/textarea>\n            <\/div>\n\n            <div id=\"jwt-meta-box\" class=\"wp-jwt-meta-info\" style=\"display:none;\">\n                <strong>Token Timestamps:<\/strong>\n                <div id=\"jwt-meta-content\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        .wp-jwt-container { max-width: 100%; background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 10px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box; }\n        .wp-jwt-title { margin: 0 0 15px 0; color: #2271b1; font-size: 1.4rem; border-bottom: 1px solid #eee; padding-bottom: 10px; }\n        \n        .wp-jwt-main-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }\n        @media (max-width: 768px) { .wp-jwt-main-grid { grid-template-columns: 1fr; } }\n        \n        .wp-jwt-group { margin-bottom: 15px; }\n        .wp-jwt-group label { display: block; font-size: 11px; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; color: #666; }\n        \n        .jwt-code-font { width: 100%; font-family: 'Courier New', Courier, monospace; font-size: 13px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; resize: vertical; }\n        #jwt-encoded { height: 355px; background: #fafafa; color: #333; line-break: anywhere; }\n        #jwt-header { height: 90px; }\n        #jwt-payload { height: 180px; }\n        \n        \/* Colored Borders mimicking official JWT styling *\/\n        .jwt-border-header { border-left: 4px solid #d63638 !important; }\n        .jwt-border-payload { border-left: 4px solid #9b51e0 !important; }\n\n        .wp-jwt-warning-box { background: #fff5f5; color: #d63638; padding: 10px; border-radius: 5px; border: 1px solid #f8d7da; font-size: 12px; margin-top: 10px; font-weight: bold; }\n        .wp-jwt-meta-info { background: #f0f6fb; border: 1px solid #2271b1; padding: 10px; border-radius: 5px; font-size: 12px; color: #333; line-height: 1.4; }\n        .wp-jwt-meta-info strong { display: block; margin-bottom: 3px; color: #2271b1; text-transform: uppercase; font-size: 10px; }\n\n        .wp-jwt-footer-actions { display: flex; gap: 10px; margin-top: 10px; }\n        .wp-jwt-footer-actions button { padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 13px; transition: 0.2s; }\n        #btn-copy-jwt { background: #46b450; color: #fff; flex-grow: 2; }\n        .btn-danger { background: #fff; color: #d63638; border: 1px solid #d63638 !important; }\n    <\/style>\n\n    <script>\n        \/\/ Base64Url Helper Functions\n        function base64UrlDecode(str) {\n            str = str.replace(\/-\/g, '+').replace(\/_\/g, '\/');\n            while (str.length % 4) str += '=';\n            return decodeURIComponent(atob(str).split('').map(function(c) {\n                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);\n            }).join(''));\n        }\n\n        function base64UrlEncode(str) {\n            var base64 = btoa(encodeURIComponent(str).replace(\/%([0-9A-F]{2})\/g, function(match, p1) {\n                return String.fromCharCode(parseInt(p1, 16));\n            }));\n            return base64.replace(\/=\/g, '').replace(\/\\+\/g, '-').replace(\/\\\/\/g, '_');\n        }\n\n        function decodeJWT() {\n            var token = document.getElementById('jwt-encoded').value.trim();\n            var errorBox = document.getElementById('wp-jwt-error');\n            var metaBox = document.getElementById('jwt-meta-box');\n            \n            errorBox.style.display = \"none\";\n            if (!token) return;\n\n            var parts = token.split('.');\n            if (parts.length < 2 || parts.length > 3) {\n                errorBox.style.display = \"block\";\n                return;\n            }\n\n            try {\n                var headerDecoded = base64UrlDecode(parts[0]);\n                var payloadDecoded = base64UrlDecode(parts[1]);\n\n                \/\/ Format JSON strings nicely\n                document.getElementById('jwt-header').value = JSON.stringify(JSON.parse(headerDecoded), null, 2);\n                document.getElementById('jwt-payload').value = JSON.stringify(JSON.parse(payloadDecoded), null, 2);\n                \n                \/\/ Extract Timestamps info\n                parseJwtMeta(JSON.parse(payloadDecoded));\n            } catch (e) {\n                errorBox.style.display = \"block\";\n            }\n        }\n\n        function encodeJWT() {\n            var headerVal = document.getElementById('jwt-header').value.trim();\n            var payloadVal = document.getElementById('jwt-payload').value.trim();\n            var errorBox = document.getElementById('wp-jwt-error');\n            errorBox.style.display = \"none\";\n\n            try {\n                \/\/ Validate JSON syntax before encoding\n                var headerObj = JSON.parse(headerVal);\n                var payloadObj = JSON.parse(payloadVal);\n\n                var eHeader = base64UrlEncode(JSON.stringify(headerObj));\n                var ePayload = base64UrlEncode(JSON.stringify(payloadObj));\n                \n                \/\/ Append a dummy signature for structural presentation (since signature requires server keys)\n                var dummySignature = \"SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c\"; \n                \n                document.getElementById('jwt-encoded').value = eHeader + \".\" + ePayload + \".\" + dummySignature;\n                parseJwtMeta(payloadObj);\n            } catch (e) {\n                \/\/ Don't throw giant errors while typing unfinished JSON\n            }\n        }\n\n        function parseJwtMeta(payload) {\n            var metaBox = document.getElementById('jwt-meta-box');\n            var metaContent = document.getElementById('jwt-meta-content');\n            var html = \"\";\n\n            if (payload.iat) {\n                html += \"\u2022 <strong>Issued At (iat):<\/strong> \" + new Date(payload.iat * 1000).toLocaleString() + \"<br>\";\n            }\n            if (payload.exp) {\n                var expDate = new Date(payload.exp * 1000);\n                var isExpired = expDate < new Date();\n                var colorStyle = isExpired ? \"color: #d63638; font-weight: bold;\" : \"\";\n                html += \"\u2022 <strong>Expires At (exp):<\/strong> <span style='\" + colorStyle + \"'>\" + expDate.toLocaleString() + (isExpired ? \" (EXPIRED)\" : \"\") + \"<\/span><br>\";\n            }\n\n            if (html) {\n                metaContent.innerHTML = html;\n                metaBox.style.display = \"block\";\n            } else {\n                metaBox.style.display = \"none\";\n            }\n        }\n\n        function copyJWT() {\n            var out = document.getElementById('jwt-encoded');\n            if (!out.value) return;\n            navigator.clipboard.writeText(out.value).then(function() {\n                var btn = document.getElementById('btn-copy-jwt');\n                var old = btn.innerText;\n                btn.innerText = 'Copied!';\n                setTimeout(function() { btn.innerText = old; }, 2000);\n            });\n        }\n\n        function clearJWT() {\n            document.getElementById('jwt-encoded').value = \"\";\n            document.getElementById('jwt-header').value = \"\";\n            document.getElementById('jwt-payload').value = \"\";\n            document.getElementById('jwt-meta-box').style.display = \"none\";\n            document.getElementById('wp-jwt-error').style.display = \"none\";\n        }\n\n        \/\/ Setup default demo values on load\n        window.addEventListener('load', function() {\n            var demoToken = \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjI1Mjc0NTAwMDB9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c\";\n            document.getElementById('jwt-encoded').value = demoToken;\n            decodeJWT();\n        });\n    <\/script>\n<\/div>\n\n\n<div id=\"netgu-88297565\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<!-- NetGuide.io-After-Widget-Tools -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-6258556257245998\"\r\n     data-ad-slot=\"5175852350\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Aufbau eines JSON Web Tokens<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein JSON Web Token (JWT) ist ein kompakter, URL-sicherer Standard (RFC 7519), um Daten zustandslos (stateless) zwischen Client und Server zu \u00fcbertragen. Ein Token besteht immer aus drei Teilen, die durch einen Punkt (<code>.<\/code>) getrennt sind:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Header.Payload.Signature\n<\/code><\/pre>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Header (Rot):<\/strong> Enth\u00e4lt Metadaten \u00fcber das Token, meist den Token-Typ (<code>JWT<\/code>) und den verwendeten kryptografischen Hash-Algorithmus (z. B. <code>HS256<\/code> oder <code>RS256<\/code>).<\/li>\n\n\n\n<li><strong>Payload (Lila):<\/strong> Hier liegen die eigentlichen Nutzdaten (die sogenannten <em>Claims<\/em>). Typische Felder sind Benutzer-IDs, Rollen oder die G\u00fcltigkeitsdauer.<\/li>\n\n\n\n<li><strong>Signature (Blau):<\/strong> Die Signatur sch\u00fctzt das Token vor Manipulation. Der Server generiert sie, indem er Header und Payload mit einem geheimen Schl\u00fcssel verschl\u00fcsselt. Wenn ein Nutzer versucht, die Benutzer-ID in der Payload zu \u00e4ndern, passt die Signatur nicht mehr und der Server lehnt das Token ab.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Wichtiger Sicherheitshinweis:<\/strong> Die Daten im Header und in der Payload sind <strong>nur Base64-kodiert, nicht verschl\u00fcsselt<\/strong>! Jeder, der das Token abf\u00e4ngt, kann die darin enthaltenen Daten (wie Namen oder E-Mail-Adressen) im Klartext auslesen. \u00dcbertrage daher niemals sensible Daten wie Passw\u00f6rter innerhalb eines JWTs.<\/p>\n<\/blockquote>\n<div id=\"netgu-3680783749\" class=\"netgu-after-content netgu-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-6258556257245998\" \ndata-ad-slot=\"4559785002\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>JWT Debugger &#038; Generator Encoded JWT Token Copy Token Clear Invalid JWT format! Header (Algorithm &#038; Token Type) Payload (Data [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[33,115],"tags":[119,117,121,123],"class_list":["post-75","post","type-post","status-publish","format-standard","hentry","category-generatoren","category-validator","tag-json","tag-jwt","tag-jwt-debugger","tag-jwt-generator"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/75","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":2,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"predecessor-version":[{"id":79,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/75\/revisions\/79"}],"wp:attachment":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}