dubey/WebGoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix WebWolf UI (#1686)

Browse Source 
Fix-ups after the Bootstrap 5 upgrade for WebWolf.
This commit is contained in:
Nanne Baars 2023-12-02 12:59:56 +01:00 committed by GitHub
parent 7fea42afe9
commit b7f657ad2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 52 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/resources/webwolf/static/css/webwolf.css
View File

@ -75,7 +75,6 @@ textarea {
/*Mailbox*/ /*Mailbox*/
body { body {
margin: 0 0 10px; margin: 0 0 10px;
font-family: 'Font Awesome 5 Free';
font-size: medium; font-size: medium;
} }
.nav-tabs .glyphicon:not(.no-margin) { margin-right:10px; } .nav-tabs .glyphicon:not(.no-margin) { margin-right:10px; }

37
src/main/resources/webwolf/templates/files.html
View File

@ -9,16 +9,15 @@
<script type="text/javascript" th:src="@{/js/fileUpload.js}"></script> <script type="text/javascript" th:src="@{/js/fileUpload.js}"></script>
<div class="container"> <div class="container mt-1">
<div class="alert alert-info alert-dismissible fade show" role="alert"> <div class="alert alert-info alert-dismissible fade show" role="alert">
<div> <div>
<p> <p>
Upload a file which you need to host as an attacker. Upload a file which you need to host as an attacker.
</p> </p>
<p> <p>
Each file will be available under the following url: Each file will be available under the following url:
<span th:text="${webwolf_url}">http://localhost:9090/WebWolf/</span>/files/{username}/{filename}. <span th:text="${webwolf_url}">http://localhost:9090/WebWolf/</span>/files/{username}/{filename}.
</p> </p>
<p> <p>
You can copy and paste the location from the table below. You can copy and paste the location from the table below.
@ -28,25 +27,24 @@
</div> </div>
<div class="card"> <div class="card">
<div class="card-heading"><strong>Upload a file</strong>
<small></small>
</div>
<div class="card-body"> <div class="card-body">
<h5 class="card-title"><strong>Upload a file</strong></h5>
<!-- Standard Form -->
<form th:action="@{/fileupload}" method="post" enctype="multipart/form-data"> <form th:action="@{/fileupload}" method="post" enctype="multipart/form-data">
<div class="form-inline"> <fieldset>
<div class="form-group"> <div class="mb-3">
<input type="file" name="file"/> <input type="file" class="form-control" name="file"/>
</div> </div>
<button type="submit" class="btn btn-md btn-primary">Upload files</button> <div class="mb-3">
</div> <button type="submit" class="btn btn-md btn-primary">Upload files</button>
</div>
</fieldset>
</form> </form>
<div class="fileUploadAlert alert-success top10" role="alert">
<span th:text="${uploadSuccess}"></span>
</div>
</div> </div>
</div> </div>
</div>
<div class="container mt-3">
<table class="table"> <table class="table">
<thead class="thead-inverse"> <thead class="thead-inverse">
@ -61,12 +59,11 @@
<td th:text="${f.name}">filename</td> <td th:text="${f.name}">filename</td>
<td th:text="${f.size}">size</td> <td th:text="${f.size}">size</td>
<td><a th:id="fileLink" th:href="@{'/' + ${f.link}}">link</a> <td><a th:id="fileLink" th:href="@{'/' + ${f.link}}">link</a>
<span class="fa fa-files-o" title="Click to copy to clipboard"></span> <span class="fa fa-files-o" title="Click to copy to clipboard"></span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</body> </body>
</html> </html>

36
src/main/resources/webwolf/templates/fragments/header.html
View File

@ -13,33 +13,29 @@
<body> <body>
<div th:fragment="header"> <div th:fragment="header">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid"> <a class="navbar-brand" th:href="@{/home}">WebWolf</a>
<div class="navbar-item">
<a class="navbar-brand" th:href="@{/home}">WebWolf</a>
</div>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" th:href="@{/home}">Home</a></li> <li class="nav-item"><a class="nav-link" th:href="@{/home}">Home</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/files}">Files</a></li> <li class="nav-item"><a class="nav-link" th:href="@{/files}">Files</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/mail}">Mailbox</a></li> <li class="nav-item"><a class="nav-link" th:href="@{/mail}">Mailbox</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/requests}">Incoming requests</a></li> <li class="nav-item"><a class="nav-link" th:href="@{/requests}">Incoming requests</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/jwt}">JWT</a></li> <li class="nav-item"><a class="nav-link" th:href="@{/jwt}">JWT</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="navbar-nav position-absolute end-0 mx-3">
<li class="nav-item"><a class="nav-link" href="#">
<li class="nav-item"><a class="nav-link" href="#">
<span sec:authorize="isAuthenticated()"> <span sec:authorize="isAuthenticated()">
<span class="glyphicon glyphicon-user"></span> <span class="glyphicon glyphicon-user"></span>
<span th:text="${#authentication.name}"></span></span></a> <span th:text="${#authentication.name}"></span></span></a>
</li> </li>
<li class="nav-item"><a class="nav-link" th:href="@{/logout}"> <li class="nav-item"><a class="nav-link" th:href="@{/logout}">
<span sec:authorize="isAuthenticated()"> <span sec:authorize="isAuthenticated()">
Sign out</span></a> Sign out</span></a>
</li> </li>
</ul> </ul>
</div> </div>
</nav> </nav>
</div> </div>
</body> </body>

2
src/main/resources/webwolf/templates/home.html
View File

@ -17,7 +17,7 @@
<h1 class="h2">WebWolf</h1> <h1 class="h2">WebWolf</h1>
<br/> <br/>
<p> <p>
Some challenges requires to have a local web server running. WebWolf is for you the attacker it Some challenges require to have a local web server running. WebWolf is for you the attacker it
helps you while solving some assignments and challenges within helps you while solving some assignments and challenges within
WebGoat. An assignment might for example require you to serve a file or connect back to your own WebGoat. An assignment might for example require you to serve a file or connect back to your own
environment or to receive an e-mail. environment or to receive an e-mail.

17
src/main/resources/webwolf/templates/jwt.html
View File

@ -10,7 +10,7 @@
<script type="text/javascript" th:src="@{/js/jwt.js}"></script> <script type="text/javascript" th:src="@{/js/jwt.js}"></script>
<div class="container"> <div class="container mt-3">
<div class="alert alert-info alert-dismissible fade show"> <div class="alert alert-info alert-dismissible fade show">
<div> <div>
@ -23,7 +23,7 @@
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="form-group"> <div class="form-group">
<label for="token">Encoded</label> <label for="token"><strong>Encoded</strong></label>
<form id="decodeForm"> <form id="decodeForm">
<textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="token" name="token" <textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="token" name="token"
rows="4" rows="4"
@ -31,8 +31,8 @@
</form> </form>
</div> </div>
<form id="encodeForm"> <form id="encodeForm">
<div class="form-group"> <div class="form-group mt-2">
<label>Decoded</label> <label><strong>Decoded</strong></label>
<div class="row"> <div class="row">
<div class="col-xs-6 col-md-5">Header</div> <div class="col-xs-6 col-md-5">Header</div>
<div class="col-xs-6 col-md-7">Payload</div> <div class="col-xs-6 col-md-7">Payload</div>
@ -52,13 +52,12 @@
</div> </div>
</form> </form>
<br/> <div class="input-group input-group-sm mb-3 mt-3">
<div class="input-group"> <span class="input-group-text" id="inputGroup-sizing-sm">Secret key</span>
<span class="input-group-addon">Secret key</span> <input type="text" class="form-control" id="secretKey" placeholder="Enter your secret key" aria-describedby="inputGroup-sizing-sm">
<input type="text" placeholder="Enter your secret key" class="form-control" id="secretKey">
</div> </div>
<div class="input-group"> <div class="input-group mt-2">
<h4 id="signatureValid">Invalid signature</h4> <h4 id="signatureValid">Invalid signature</h4>
</div> </div>

2
src/main/resources/webwolf/templates/mailbox.html
View File

@ -13,7 +13,7 @@
<div class="container"> <div class="container">
<div class="alert alert-info alert-dismissible fade show"> <div class="alert alert-info alert-dismissible fade show mt-3">
<div> <div>
<The mailbox of you as an attacker, all the mail send to <th:block th:text="${username}" />@webgoat.org will be send to this mailbox. <The mailbox of you as an attacker, all the mail send to <th:block th:text="${username}" />@webgoat.org will be send to this mailbox.
</p> </p>

8
src/main/resources/webwolf/templates/requests.html
View File

@ -12,7 +12,7 @@
<div class="container"> <div class="container">
<div class="alert alert-info alert-dismissible fade show"> <div class="alert alert-info alert-dismissible fade show mt-3">
<div> <div>
<p> <p>
Challenges in which you need to call your hacker machine WebWolf offers a simple httpd Challenges in which you need to call your hacker machine WebWolf offers a simple httpd
@ -29,16 +29,16 @@
<h3>Requests</h3> <h3>Requests</h3>
<div th:each="trace,iter : ${traces}" class="card-group" id="accordion" role="tablist" aria-multiselectable="true"> <div th:each="trace,iter : ${traces}" class="card-group mt-1" id="accordion" role="tablist" aria-multiselectable="true">
<div class="card"> <div class="card">
<div class="card-heading" role="tab" th:id="'heading' + ${iter.index}"> <div class="card-heading" role="tab" th:id="'heading' + ${iter.index}">
<h4 class="card-title"> <strong class="card-title">
<a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" <a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion"
th:href="'#collapse' + ${iter.index}" aria-expanded="false" th:aria-controls="'collapse' + ${iter.index}"> th:href="'#collapse' + ${iter.index}" aria-expanded="false" th:aria-controls="'collapse' + ${iter.index}">
<i class="bi bi-chevron-down"></i> <!-- FontAwesome icon --> <i class="bi bi-chevron-down"></i> <!-- FontAwesome icon -->
<span th:utext="${trace.date}"/> | <span th:utext="${trace.path}"/> <span th:utext="${trace.date}"/> | <span th:utext="${trace.path}"/>
</a> </a>
</h4> </strong>
</div> </div>
<div th:id="'collapse' + ${iter.index}" class="card-collapse collapse" role="tabcard" <div th:id="'collapse' + ${iter.index}" class="card-collapse collapse" role="tabcard"
th:aria-labelledby="'heading' + ${iter.index}"> th:aria-labelledby="'heading' + ${iter.index}">

10
src/main/resources/webwolf/templates/webwolf-login.html
View File

@ -11,7 +11,7 @@
<div class="container"> <div class="container">
<div class="row" style="margin-top:20px"> <div class="row" style="margin-top:100px">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" th:style="'background:url(' + @{/images/wolf.png} + ') no-repeat right;'"> <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" th:style="'background:url(' + @{/images/wolf.png} + ') no-repeat right;'">
<form th:action="@{/login}" method="post"> <form th:action="@{/login}" method="post">
<fieldset> <fieldset>
@ -28,12 +28,12 @@
</div> </div>
</div> </div>
<div class="form-group"> <div class="input-group mb-3">
<input type="text" name="username" id="username" class="form-control input-lg" <input type="text" name="username" id="username" class="form-control"
placeholder="Username WebGoat" required="true" autofocus="true"/> placeholder="Username WebGoat" required="true" autofocus="true"/>
</div> </div>
<div class="form-group"> <div class="input-group mb-3">
<input type="password" name="password" id="password" class="form-control input-lg" <input type="password" name="password" id="password" class="form-control"
placeholder="Password WebGoat" required="true"/> placeholder="Password WebGoat" required="true"/>
</div> </div>