marcel/zoraxy
1
0
Fork 0
mirror of https://github.com/tobychui/zoraxy.git synced 2025-08-12 16:09:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Custom header support

Browse Source 
+ Added custom header
+ Removed unused files
This commit is contained in:
Toby Chui
2024-02-17 20:28:19 +08:00
parent 216b53f224
commit 33c7c5fa00
30 changed files with 488 additions and 9436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/web/components/httprp.html
View File

@@ -9,7 +9,7 @@
<tr>
<th>Host</th>
<th>Destination</th>
<!-- <th>Virtual Directory</th> -->
<th>Virtual Directory</th>
<th>Basic Auth</th>
<th class="no-sort" style="min-width:100px;">Actions</th>
</tr>
@@ -30,11 +30,11 @@
$("#httpProxyList").html(``);
if (data.error !== undefined){
$("#httpProxyList").append(`<tr>
<td data-label="" colspan="4"><i class="remove icon"></i> ${data.error}</td>
<td data-label="" colspan="5"><i class="remove icon"></i> ${data.error}</td>
</tr>`);
}else if (data.length == 0){
$("#httpProxyList").append(`<tr>
<td data-label="" colspan="4"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
<td data-label="" colspan="5"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
</tr>`);
}else{
data.forEach(subd => {
@@ -65,12 +65,13 @@
vdList += `</div>`;
if (subd.VirtualDirectories.length == 0){
vdList = `<i class="ui green circle check icon"></i> No Virtual Directory Rule`;
vdList = `<small style="opacity: 0.3; pointer-events: none; user-select: none;"><i class="check icon"></i> No Virtual Directory</small>`;
}
$("#httpProxyList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
<td data-label="" editable="true" datatype="inbound"><a href="//${subd.RootOrMatchingDomain}" target="_blank">${subd.RootOrMatchingDomain}</a> ${inboundTlsIcon}</td>
<td data-label="" editable="true" datatype="domain">${subd.Domain} ${tlsIcon}</td>
<td data-label="" editable="true" datatype="vdir">${vdList}</td>
<td data-label="" editable="true" datatype="basicauth">${subd.RequireBasicAuth?`<i class="ui green check icon"></i>`:`<i class="ui grey remove icon"></i>`}</td>
<td class="center aligned" editable="true" datatype="action" data-label="">
<button class="ui circular mini basic icon button editBtn inlineEditActionBtn" onclick='editEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="edit icon"></i></button>
@@ -140,6 +141,12 @@
</div>
`;
column.empty().append(input);
}else if (datatype == "vdir"){
//Append a quick access button for vdir page
column.append(`<button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="quickEditVdir('${uuid}');">
<i class="ui yellow folder icon"></i> Edit Virtual Directories
</button>`);
}else if (datatype == "basicauth"){
let requireBasicAuth = payload.RequireBasicAuth;
let checkstate = "";
@@ -150,7 +157,20 @@
<input type="checkbox" class="RequireBasicAuth" ${checkstate}>
<label>Require Basic Auth</label>
</div>
<button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editBasicAuthCredentials('${uuid}');">Edit Credentials</button>`);
<button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editBasicAuthCredentials('${uuid}');"><i class="ui blue user circle icon"></i> Edit Credentials</button>
<div class="ui basic advance segment" style="padding: 0.4em !important; border-radius: 0.4em;">
<div class="ui endpointAdvanceConfig accordion" style="padding-right: 0.6em;">
<div class="title">
<i class="dropdown icon"></i>
Advance Configs
</div>
<div class="content">
<button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editCustomHeaders('${uuid}');"><i class="heading icon"></i> Custom Headers</button>
<!-- <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editLoadBalanceOptions('${uuid}');"><i class="blue server icon"></i> Load Balance</button> -->
</div>
</div>
<div>
`);
}else if (datatype == 'action'){
column.empty().append(`
@@ -173,6 +193,7 @@
}
});
$(".endpointAdvanceConfig").accordion();
$("#httpProxyList").find(".editBtn").addClass("disabled");
}
@@ -220,6 +241,7 @@
})
}
/* button events */
function editBasicAuthCredentials(uuid){
let payload = encodeURIComponent(JSON.stringify({
ept: "host",
@@ -227,6 +249,23 @@
}));
showSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload);
}
function quickEditVdir(uuid){
openTabById("vdir");
$("#vdirBaseRoutingRule").parent().dropdown("set selected", uuid);
}
function editCustomHeaders(uuid){
let payload = encodeURIComponent(JSON.stringify({
ept: "host",
ep: uuid
}));
showSideWrapper("snippet/customHeaders.html?t=" + Date.now() + "#" + payload);
}
function editLoadBalanceOptions(uuid){
alert(uuid);
}
//Bind on tab switch events

2
src/web/components/status.html
View File

@@ -593,7 +593,7 @@
{
type: 'line',
responsive: true,
resizeDelay: 100,
resizeDelay: 300,
options: {
animation: false,
maintainAspectRatio: false,

79
src/web/components/subd.html
View File

@@ -1,79 +0,0 @@
<div class="standardContainer">
<div class="ui basic segment">
<h2>HTTP Proxy</h2>
<p>Proxy HTTP server with HTTP or HTTPS. Sometime subdomain contain a prefix to the main domain name, separated by a dot. <br>For example, in the domain "blog.example.com," "blog" is the subdomain.</p>
</div>
<div style="width: 100%; overflow-x: auto; margin-bottom: 1em;">
<table class="ui celled sortable unstackable compact table">
<thead>
<tr>
<th>Host</th>
<th>Destination</th>
<th>Virtual Directory</th>
<th>Basic Auth</th>
<th class="no-sort" style="min-width: 7.2em;">Actions</th>
</tr>
</thead>
<tbody id="subdList">
</tbody>
</table>
</div>
<button class="ui icon right floated basic button" onclick="listProxyEndpoints();"><i class="green refresh icon"></i> Refresh</button>
<br><br>
</div>
<script>
function listProxyEndpoints(){
$.get("/api/proxy/list?type=host", function(data){
$("#subdList").html(``);
if (data.error !== undefined){
$("#subdList").append(`<tr>
<td data-label="" colspan="3"><i class="remove icon"></i> ${data.error}</td>
</tr>`);
}else if (data.length == 0){
$("#subdList").append(`<tr>
<td data-label="" colspan="3"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
</tr>`);
}else{
data.forEach(subd => {
let tlsIcon = "";
let subdData = encodeURIComponent(JSON.stringify(subd));
if (subd.RequireTLS){
tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
if (subd.SkipCertValidations){
tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
}
}
let inboundTlsIcon = "";
if ($("#tls").checkbox("is checked")){
inboundTlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
if (subd.BypassGlobalTLS){
inboundTlsIcon = `<i class="grey lock icon" title="TLS Bypass Enabled"></i>`;
}
}else{
inboundTlsIcon = `<i class="yellow lock open icon" title="Plain Text Mode"></i>`;
}
$("#subdList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
<td data-label="" editable="true" datatype="inbound"><a href="//${subd.RootOrMatchingDomain}" target="_blank">${subd.RootOrMatchingDomain}</a> ${inboundTlsIcon}</td>
<td data-label="" editable="true" datatype="domain">${subd.Domain} ${tlsIcon}</td>
<td data-label="" editable="true" datatype="vdir">WIP</td>
<td data-label="" editable="true" datatype="basicauth">${subd.RequireBasicAuth?`<i class="ui green check icon"></i>`:`<i class="ui grey remove icon"></i>`}</td>
<td class="center aligned" editable="true" datatype="action" data-label="">
<button class="ui circular mini basic icon button editBtn" onclick='editEndpoint("subd","${subd.RootOrMatchingDomain}")'><i class="edit icon"></i></button>
<button class="ui circular mini red basic icon button" onclick='deleteEndpoint("subd","${subd.RootOrMatchingDomain}")'><i class="trash icon"></i></button>
</td>
</tr>`);
});
}
});
}
//Bind on tab switch events
tabSwitchEventBind["subd"] = function(){
listProxyEndpoints();
}
</script>

2
src/web/components/uptime.html
View File

@@ -177,7 +177,7 @@
$("#utmrender").append(`<div class="ui basic segment statusbar">
<div class="domain">
<div style="position: absolute; top: 0; right: 0.4em;">
<p class="onlineStatus" style="display: inline-block; font-size: 1.3em; padding-right: 0.5em; padding-left: 0.3em; ${onlineStatusCss}">${currentOnlineStatus}</p>
<p class="onlineStatus" style="display: inline-block; font-size: 1.2em; padding-right: 0.5em; padding-left: 0.3em; ${onlineStatusCss}">${currentOnlineStatus}</p>
</div>
<div>
<h3 class="ui header" style="margin-bottom: 0.2em;">${name}</h3>

4
src/web/components/vdir.html
View File

@@ -207,6 +207,7 @@
}
function reloadVdirList(){
$("#vdirList").find(".editBtn").removeClass("disabled");
if ($("#useRootProxyRouterForVdir")[0].checked){
loadVdirList("root");
return;
@@ -314,7 +315,8 @@
}
function editVdir(matchingPath, ept){
let targetDOM = $(".vdirEntry[vdirid='" + matchingPath.hexEncode() + "']")
let targetDOM = $(".vdirEntry[vdirid='" + matchingPath.hexEncode() + "']");
$("#vdirList").find(".editBtn").addClass("disabled");
let payload = $(targetDOM).attr("payload").hexDecode();
payload = JSON.parse(payload);
console.log(payload);

BIN
src/web/img/axiom-pattern.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 307 B

BIN
src/web/img/plant.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 126 KiB

BIN
src/web/img/plant.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 694 KiB

BIN
src/web/img/public/bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 818 KiB

BIN
src/web/img/public/bg2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

9
src/web/index.html
View File

@@ -284,11 +284,12 @@
$("#mainmenu").find(".item").removeClass("active");
$(targetBtn).addClass("active");
$(".functiontab").hide();
if (tabSwitchEventBind[tabID]){
tabSwitchEventBind[tabID]();
}
$("#" + tabID).fadeIn('fast', function(){
setTimeout(function(){
if (tabSwitchEventBind[tabID]){
tabSwitchEventBind[tabID]();
}
},100)
});
$('html,body').animate({scrollTop: 0}, 'fast');
window.location.hash = tabID;

4
src/web/script/tablesort.js
View File

@@ -107,6 +107,10 @@
asc: 'sorted ascending',
desc: 'sorted descending',
compare: function(a, b) {
if (!isNaN(parseInt(a.trim())) && !isNaN(parseInt(b.trim())) ){
a = parseInt(a);
b = parseInt(b);
}
if (a > b) {
return 1;
} else if (a < b) {

76
src/web/snippet/advancePathRules.html
View File

@@ -1,76 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<!-- Notes: This should be open in its original path-->
<link rel="stylesheet" href="../script/semantic/semantic.min.css">
<script src="../script/jquery-3.6.0.min.js"></script>
<script src="../script/semantic/semantic.min.js"></script>
</head>
<body>
<br>
<div class="ui container">
<!-- Path Rules -->
<div class="ui header">
<div class="content">
Special Path Rules
<div class="sub header">Advanced customization for response on particular matching path or URL</div>
</div>
</div>
<h4>Current list of special path rules.</h4>
<div style="width: 100%; overflow-x: auto;">
<table class="ui sortable unstackable celled table" >
<thead>
<tr>
<th>Matching Path</th>
<th>Status Code</th>
<th class="no-sort">Exact Match</th>
<th class="no-sort">Case Sensitive</th>
<th class="no-sort">Enabled</th>
<th class="no-sort">Actions</th>
</tr>
</thead>
<tbody id="specialPathRules">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="ui divider"></div>
<h4>Add Special Path Rule</h4>
<div class="ui form">
<div class="field">
<label>Matching URI</label>
<input type="text" name="matchingPath" placeholder="Matching URL">
<small><i class="ui circle info icon"></i> Any matching prefix of the request URL will be handled by this rule, e.g. example.com/secret</small>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="exactMatch" tabindex="0" class="hidden">
<label>Require Exact Match</label>
</div>
<div class="ui message">
<p>Require exactly match but not prefix match (default). Enable this if you only want to block access to a directory but not the resources inside the directory. Assume you have entered a matching URI of <b>example.com/secret/</b> and set it to return 401</p>
<i class="check square outline icon"></i> example.com/secret<b>/image.png</b> <i class="long arrow alternate right icon" style="margin-left: 1em;"></i> (content of image.png)<br>
<i class="square outline icon"></i> example.com/secret<b>/image.png</b> <i class="long arrow alternate right icon" style="margin-left: 1em;"></i> HTTP 401
</div>
</div>
<div class="field">
<label>Response Status Code</label>
<input type="text"name="statusCode" placeholder="500">
<small><i class="ui circle info icon"></i> HTTP Status Code to be served by this rule</small>
</div>
</div>
<br><br>
<button class="ui basic button iframeOnly" style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Cancel</button>
</div>
<script>
</script>
</body>
</html>

182
src/web/snippet/customHeaders.html Normal file
View File

@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html>
<head>
<!-- Notes: This should be open in its original path-->
<link rel="stylesheet" href="../script/semantic/semantic.min.css">
<script src="../script/jquery-3.6.0.min.js"></script>
<script src="../script/semantic/semantic.min.js"></script>
</head>
<body>
<br>
<div class="ui container">
<div class="ui header">
<div class="content">
Custom Headers
<div class="sub header" id="epname"></div>
</div>
</div>
<div class="ui divider"></div>
<p>You can define custom headers to be sent
together with the client request to the backend server in
this reverse proxy endpoint / host.</p>
<table class="ui very basic compacted unstackable celled table">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Remove</th>
</tr></thead>
<tbody id="headerTable">
<tr>
<td colspan="3"><i class="ui green circle check icon"></i> No Additonal Header</td>
</tr>
</tbody>
</table>
<div class="ui divider"></div>
<h4>Add Custom Header</h4>
<p>Add custom header(s) into this proxy target</p>
<div class="scrolling content ui form">
<div class="three small fields credentialEntry">
<div class="field">
<input id="headerName" type="text" placeholder="X-Custom-Header" autocomplete="off">
</div>
<div class="field">
<input id="headerValue" type="text" placeholder="value1,value2,value3" autocomplete="off">
</div>
<div class="field" >
<button class="ui basic button" onclick="addCustomHeader();"><i class="green add icon"></i> Add Header</button>
</div>
<div class="ui divider"></div>
</div>
</div>
<div class="ui divider"></div>
<div class="field" >
<button class="ui basic button" style="float: right;" onclick="closeThisWrapper();">Close</button>
</div>
</div>
<br><br><br><br>
<script>
let editingEndpoint = {};
if (window.location.hash.length > 1){
let payloadHash = window.location.hash.substr(1);
try{
payloadHash = JSON.parse(decodeURIComponent(payloadHash));
$("#epname").text(payloadHash.ep);
editingEndpoint = payloadHash;
}catch(ex){
console.log("Unable to load endpoint data from hash")
}
}
function closeThisWrapper(){
parent.hideSideWrapper(true);
}
//$("#debug").text(JSON.stringify(editingEndpoint));
function addCustomHeader(){
let name = $("#headerName").val().trim();
let value = $("#headerValue").val().trim();
if (name == ""){
$("#headerName").parent().addClass("error");
return
}else{
$("#headerName").parent().removeClass("error");
}
if (value == ""){
$("#headerValue").parent().addClass("error");
return
}else{
$("#headerValue").parent().removeClass("error");
}
$.ajax({
url: "/api/proxy/header/add",
data: {
"type": editingEndpoint.ept,
"domain": editingEndpoint.ep,
"name": name,
"value": value
},
success: function(data){
if (data.error != undefined){
if (parent != undefined && parent.msgbox != undefined){
parent.msgbox(data.error,false);
}else{
alert(data.error);
}
}else{
listCustomHeaders();
if (parent != undefined && parent.msgbox != undefined){
parent.msgbox("Custom header added",true);
}
//Clear the form
$("#headerName").val("");
$("#headerValue").val("");
}
}
});
}
function deleteCustomHeader(name){
$.ajax({
url: "/api/proxy/header/remove",
data: {
"type": editingEndpoint.ept,
"domain": editingEndpoint.ep,
"name": name,
},
success: function(data){
listCustomHeaders();
if (parent != undefined && parent.msgbox != undefined){
parent.msgbox("Custom header removed",true);
}
}
});
}
function listCustomHeaders(){
$("#headerTable").html(`<tr><td colspan="3"><i class="ui loading spinner icon"></i> Loading</td></tr>`);
$.ajax({
url: "/api/proxy/header/list",
data: {
"type": editingEndpoint.ept,
"domain": editingEndpoint.ep,
},
success: function(data){
if (data.error != undefined){
alert(data.error);
}else{
$("#headerTable").html("");
data.forEach(header => {
$("#headerTable").append(`
<tr>
<td>${header.Key}</td>
<td>${header.Value}</td>
<td><button class="ui basic circular mini red icon button" onclick="deleteCustomHeader('${header.Key}');"><i class="ui trash icon"></i></button></td>
</tr>
`);
});
if (data.length == 0){
$("#headerTable").html(`<tr>
<td colspan="3"><i class="ui green circle check icon"></i> No Additonal Header</td>
</tr>`);
}
}
},
});
}
listCustomHeaders();
</script>
</body>
</html>