mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-08-07 13:48:29 +02:00
Custom header support
+ Added custom header + Removed unused files
This commit is contained in:
Toby Chui
@@ -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
182
src/web/snippet/customHeaders.html
Normal 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>
|
||||
Reference in New Issue
Block a user