Add JWT encoder to WebWolf

This commit is contained in:
Nanne Baars
2020-11-04 20:37:25 +01:00
committed by Nanne Baars
parent 431da30946
commit e78549fb72
6 changed files with 265 additions and 0 deletions

View File

@@ -0,0 +1,79 @@
$(document).ready(() => {
$('#encodedToken').on('input', () => {
var token = $('#encodedToken').val();
var secretKey = $('#secretKey').val();
$.ajax({
type: 'POST',
url: '/WebWolf/jwt/decode',
data: JSON.stringify({encoded: token, secretKey: secretKey}),
success: function (data) {
if (data.validToken) {
$('#tokenHeader').val(data.header);
$('#tokenPayload').val(data.payload);
}
updateSignature(data);
},
contentType: "application/json",
dataType: 'json'
});
});
});
function encode() {
return () => {
var header = $('#tokenHeader').val();
var payload = $('#tokenPayload').val();
var secretKey = $('#secretKey').val();
var token = {header: header, payload: payload, secretKey: secretKey};
if (!parseJson(header)) {
$('#encodedToken').val("");
$('#tokenHeader').css('background-color', 'lightcoral');
} else if (!parseJson(payload)) {
$('#encodedToken').val("");
$('#tokenPayload').css('background-color', 'lightcoral');
} else {
$.ajax({
type: 'POST',
url: '/WebWolf/jwt/encode',
data: JSON.stringify(token),
success: function (data) {
$('#encodedToken').val(data.encoded);
$('#tokenPayload').css('background-color', '#FFFFFF');
$('#encodedToken').css('background-color', '#FFFFFF');
$('#tokenHeader').css('background-color', '#FFFFFF');
updateSignature(data);
},
contentType: "application/json",
dataType: 'json'
});
}
};
}
$(document).ready(() => {
$('#tokenPayload').on('input', encode());
$('#tokenHeader').on('input', encode());
$('#secretKey').on('input', encode());
});
function parseJson(text) {
try {
if (text) {
JSON.parse(text);
}
} catch (e) {
return false;
}
return true;
}
function updateSignature(data) {
if (data.signatureValid) {
$('#signatureValid').val("Signature valid");
} else {
$('#signatureValid').val("Signature invalid");
}
}

View File

@@ -30,6 +30,9 @@
<ul class="nav navbar-nav">
<li><a th:href="@{/WebWolf/requests}">Incoming requests</a></li>
</ul>
<ul class="nav navbar-nav">
<li><a th:href="@{/WebWolf/jwt}">JWT</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">

View File

@@ -0,0 +1,65 @@
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<div th:replace="fragments/header :: header-css"/>
</head>
<body>
<div th:replace="fragments/header :: header"/>
<script type="text/javascript" th:src="@{/js/jwt.js}"></script>
<div class="container">
<div class="alert alert-info fade in">
<a href="#" class="close" data-dismiss="alert">&times;</a>
<p>
Decode or encode a JWT some of the exercises need to encode or decode a new token
</p>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="form-group">
<label for="encodedToken">Encoded</label>
<form name="encodedTokenForm" id="encodedTokenForm" action="/WebWolf/jwt/encode" method="POST">
<textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="encodedToken" rows="4"
placeholder="Paste token here" spellcheck="false"></textarea>
</form>
</div>
<div class="form-group">
<label>Decoded</label>
<div class="row">
<div class="col-xs-6 col-md-5">Header</div>
<div class="col-xs-6 col-md-7">Payload</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-5">
<textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="tokenHeader"
rows="12"></textarea>
</div>
<div class="col-xs-6 col-md-7">
<textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="tokenPayload"
rows="12"></textarea>
</div>
</div>
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" id="header">Secret key</span>
<input type="text" class="form-control" id="secretKey">
</div>
<div class="input-group">
<h4 id="signatureValid">Invalid signature</h4>
</div>
</div>
</div>
</body>
</html>