httprp.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. <div class="standardContainer">
  2. <div class="ui basic segment">
  3. <h2>HTTP Proxy</h2>
  4. <p>Proxy HTTP server with HTTP or HTTPS for multiple hosts. If you are only proxying for one host / domain, use Default Site instead.</p>
  5. </div>
  6. <style>
  7. #httpProxyList .ui.toggle.checkbox input:checked ~ label::before{
  8. background-color: #00ca52 !important;
  9. }
  10. </style>
  11. <div style="width: 100%; overflow-x: auto; margin-bottom: 1em; min-height: 300px;">
  12. <table class="ui celled sortable unstackable compact table">
  13. <thead>
  14. <tr>
  15. <th>Host</th>
  16. <th>Destination</th>
  17. <th>Virtual Directory</th>
  18. <th>Basic Auth</th>
  19. <th class="no-sort" style="min-width:150px;">Actions</th>
  20. </tr>
  21. </thead>
  22. <tbody id="httpProxyList">
  23. </tbody>
  24. </table>
  25. </div>
  26. <button class="ui icon right floated basic button" onclick="listProxyEndpoints();"><i class="green refresh icon"></i> Refresh</button>
  27. <br><br>
  28. </div>
  29. <script>
  30. /* List all proxy endpoints */
  31. function listProxyEndpoints(){
  32. $.get("/api/proxy/list?type=host", function(data){
  33. $("#httpProxyList").html(``);
  34. if (data.error !== undefined){
  35. $("#httpProxyList").append(`<tr>
  36. <td data-label="" colspan="5"><i class="remove icon"></i> ${data.error}</td>
  37. </tr>`);
  38. }else if (data.length == 0){
  39. $("#httpProxyList").append(`<tr>
  40. <td data-label="" colspan="5"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
  41. </tr>`);
  42. }else{
  43. data.forEach(subd => {
  44. let tlsIcon = "";
  45. let subdData = encodeURIComponent(JSON.stringify(subd));
  46. if (subd.RequireTLS){
  47. tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
  48. if (subd.SkipCertValidations){
  49. tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
  50. }
  51. }
  52. let inboundTlsIcon = "";
  53. if ($("#tls").checkbox("is checked")){
  54. inboundTlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
  55. if (subd.BypassGlobalTLS){
  56. inboundTlsIcon = `<i class="grey lock icon" title="TLS Bypass Enabled"></i>`;
  57. }
  58. }else{
  59. inboundTlsIcon = `<i class="yellow lock open icon" title="Plain Text Mode"></i>`;
  60. }
  61. //Build the virtual directory list
  62. var vdList = `<div class="ui list">`;
  63. subd.VirtualDirectories.forEach(vdir => {
  64. vdList += `<div class="item">${vdir.MatchingPath} <i class="green angle double right icon"></i> ${vdir.Domain}</div>`;
  65. });
  66. vdList += `</div>`;
  67. if (subd.VirtualDirectories.length == 0){
  68. vdList = `<small style="opacity: 0.3; pointer-events: none; user-select: none;"><i class="check icon"></i> No Virtual Directory</small>`;
  69. }
  70. var enableChecked = "checked";
  71. if (subd.Disabled){
  72. enableChecked = "";
  73. }
  74. $("#httpProxyList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
  75. <td data-label="" editable="true" datatype="inbound"><a href="//${subd.RootOrMatchingDomain}" target="_blank">${subd.RootOrMatchingDomain}</a> ${inboundTlsIcon}</td>
  76. <td data-label="" editable="true" datatype="domain">${subd.Domain} ${tlsIcon}</td>
  77. <td data-label="" editable="true" datatype="vdir">${vdList}</td>
  78. <td data-label="" editable="true" datatype="basicauth">
  79. ${subd.RequireBasicAuth?`<i class="ui green check icon"></i>`:`<i class="ui grey remove icon"></i>`}
  80. </td>
  81. <td class="center aligned" editable="true" datatype="action" data-label="">
  82. <div class="ui toggle tiny fitted checkbox" style="margin-bottom: -0.5em; margin-right: 0.4em;" title="Enable / Disable Rule">
  83. <input type="checkbox" class="enableToggle" name="active" ${enableChecked} eptuuid="${subd.RootOrMatchingDomain}" onchange="handleProxyRuleToggle(this);">
  84. <label></label>
  85. </div>
  86. <button title="Edit Proxy Rule" class="ui circular mini basic icon button editBtn inlineEditActionBtn" onclick='editEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="edit icon"></i></button>
  87. <button title="Remove Proxy Rule" class="ui circular mini red basic icon button inlineEditActionBtn" onclick='deleteEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="trash icon"></i></button>
  88. </td>
  89. </tr>`);
  90. });
  91. }
  92. });
  93. }
  94. /*
  95. Inline editor for httprp.html
  96. */
  97. function editEndpoint(uuid) {
  98. uuid = uuid.hexDecode();
  99. var row = $('tr[eptuuid="' + uuid + '"]');
  100. var columns = row.find('td[data-label]');
  101. var payload = $(row).attr("payload");
  102. payload = JSON.parse(decodeURIComponent(payload));
  103. console.log(payload);
  104. //console.log(payload);
  105. columns.each(function(index) {
  106. var column = $(this);
  107. var oldValue = column.text().trim();
  108. if ($(this).attr("editable") == "false"){
  109. //This col do not allow edit. Skip
  110. return;
  111. }
  112. // Create an input element based on the column content
  113. var input;
  114. var datatype = $(this).attr("datatype");
  115. if (datatype == "domain"){
  116. let domain = payload.Domain;
  117. //Target require TLS for proxying
  118. let tls = payload.RequireTLS;
  119. if (tls){
  120. tls = "checked";
  121. }else{
  122. tls = "";
  123. }
  124. //Require TLS validation
  125. let skipTLSValidation = payload.SkipCertValidations;
  126. let checkstate = "";
  127. if (skipTLSValidation){
  128. checkstate = "checked";
  129. }
  130. input = `
  131. <div class="ui mini fluid input">
  132. <input type="text" class="Domain" value="${domain}">
  133. </div>
  134. <div class="ui checkbox" style="margin-top: 0.4em;">
  135. <input type="checkbox" class="RequireTLS" ${tls}>
  136. <label>Require TLS<br>
  137. <small>Proxy target require HTTPS connection</small></label>
  138. </div><br>
  139. <div class="ui checkbox" style="margin-top: 0.4em;">
  140. <input type="checkbox" class="SkipCertValidations" ${checkstate}>
  141. <label>Skip Verification<br>
  142. <small>Check this if proxy target is using self signed certificates</small></label>
  143. </div>
  144. `;
  145. column.empty().append(input);
  146. }else if (datatype == "vdir"){
  147. //Append a quick access button for vdir page
  148. column.append(`<button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="quickEditVdir('${uuid}');">
  149. <i class="ui yellow folder icon"></i> Edit Virtual Directories
  150. </button>`);
  151. }else if (datatype == "basicauth"){
  152. let requireBasicAuth = payload.RequireBasicAuth;
  153. let checkstate = "";
  154. if (requireBasicAuth){
  155. checkstate = "checked";
  156. }
  157. let skipWebSocketOriginCheck = payload.SkipWebSocketOriginCheck;
  158. let wsCheckstate = "";
  159. if (skipWebSocketOriginCheck){
  160. wsCheckstate = "checked";
  161. }
  162. column.empty().append(`<div class="ui checkbox" style="margin-top: 0.4em;">
  163. <input type="checkbox" class="RequireBasicAuth" ${checkstate}>
  164. <label>Require Basic Auth</label>
  165. </div>
  166. <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>
  167. <div class="ui basic advance segment" style="padding: 0.4em !important; border-radius: 0.4em;">
  168. <div class="ui endpointAdvanceConfig accordion" style="padding-right: 0.6em;">
  169. <div class="title">
  170. <i class="dropdown icon"></i>
  171. Advance Configs
  172. </div>
  173. <div class="content">
  174. <div class="ui checkbox" style="margin-top: 0.4em;">
  175. <input type="checkbox" class="SkipWebSocketOriginCheck" ${wsCheckstate}>
  176. <label>Skip WebSocket Origin Check<br>
  177. <small>Check this to allow cross-origin websocket requests</small></label>
  178. </div>
  179. <br>
  180. <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>
  181. <!-- <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> -->
  182. </div>
  183. </div>
  184. <div>
  185. `);
  186. }else if (datatype == 'action'){
  187. column.empty().append(`
  188. <button title="Save" onclick="saveProxyInlineEdit('${uuid.hexEncode()}');" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui green save icon"></i></button>
  189. <button title="Cancel" onclick="exitProxyInlineEdit();" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui remove icon"></i></button>
  190. `);
  191. }else if (datatype == "inbound"){
  192. let originalContent = $(column).html();
  193. column.empty().append(`${originalContent}
  194. <div class="ui divider"></div>
  195. <div class="ui checkbox" style="margin-top: 0.4em;">
  196. <input type="checkbox" class="BypassGlobalTLS" ${payload.BypassGlobalTLS?"checked":""}>
  197. <label>Allow plain HTTP access<br>
  198. <small>Allow inbound connections without TLS/SSL</small></label>
  199. </div><br>
  200. <button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editAccessRule('${uuid}');"><i class="ui filter icon"></i> Edit Access Rule</button>
  201. `);
  202. $(".hostAccessRuleSelector").dropdown();
  203. }else{
  204. //Unknown field. Leave it untouched
  205. }
  206. });
  207. $(".endpointAdvanceConfig").accordion();
  208. $("#httpProxyList").find(".editBtn").addClass("disabled");
  209. }
  210. function exitProxyInlineEdit(){
  211. listProxyEndpoints();
  212. $("#httpProxyList").find(".editBtn").removeClass("disabled");
  213. }
  214. function saveProxyInlineEdit(uuid){
  215. uuid = uuid.hexDecode();
  216. var row = $('tr[eptuuid="' + uuid + '"]');
  217. if (row.length == 0){
  218. return;
  219. }
  220. var epttype = "host";
  221. let newDomain = $(row).find(".Domain").val();
  222. let requireTLS = $(row).find(".RequireTLS")[0].checked;
  223. let skipCertValidations = $(row).find(".SkipCertValidations")[0].checked;
  224. let requireBasicAuth = $(row).find(".RequireBasicAuth")[0].checked;
  225. let bypassGlobalTLS = $(row).find(".BypassGlobalTLS")[0].checked;
  226. let bypassWebsocketOrigin = $(row).find(".SkipWebSocketOriginCheck")[0].checked;
  227. console.log(newDomain, requireTLS, skipCertValidations, requireBasicAuth)
  228. $.ajax({
  229. url: "/api/proxy/edit",
  230. method: "POST",
  231. data: {
  232. "type": epttype,
  233. "rootname": uuid,
  234. "ep":newDomain,
  235. "bpgtls": bypassGlobalTLS,
  236. "tls" :requireTLS,
  237. "tlsval": skipCertValidations,
  238. "bpwsorg" : bypassWebsocketOrigin,
  239. "bauth" :requireBasicAuth,
  240. },
  241. success: function(data){
  242. if (data.error !== undefined){
  243. msgbox(data.error, false, 6000);
  244. }else{
  245. msgbox("Proxy endpoint updated");
  246. listProxyEndpoints();
  247. }
  248. }
  249. })
  250. }
  251. /* button events */
  252. function editBasicAuthCredentials(uuid){
  253. let payload = encodeURIComponent(JSON.stringify({
  254. ept: "host",
  255. ep: uuid
  256. }));
  257. showSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload);
  258. }
  259. function editAccessRule(uuid){
  260. let payload = encodeURIComponent(JSON.stringify({
  261. ept: "host",
  262. ep: uuid
  263. }));
  264. showSideWrapper("snippet/hostAccessEditor.html?t=" + Date.now() + "#" + payload);
  265. }
  266. function quickEditVdir(uuid){
  267. openTabById("vdir");
  268. $("#vdirBaseRoutingRule").parent().dropdown("set selected", uuid);
  269. }
  270. function editCustomHeaders(uuid){
  271. let payload = encodeURIComponent(JSON.stringify({
  272. ept: "host",
  273. ep: uuid
  274. }));
  275. showSideWrapper("snippet/customHeaders.html?t=" + Date.now() + "#" + payload);
  276. }
  277. function handleProxyRuleToggle(object){
  278. let endpointUUID = $(object).attr("eptuuid");
  279. let isChecked = object.checked;
  280. $.ajax({
  281. url: "/api/proxy/toggle",
  282. data: {
  283. "ep": endpointUUID,
  284. "enable": isChecked
  285. },
  286. success: function(data){
  287. if (data.error != undefined){
  288. msgbox(data.error, false);
  289. }else{
  290. if (isChecked){
  291. msgbox("Proxy Rule Enabled");
  292. }else{
  293. msgbox("Proxy Rule Disabled");
  294. }
  295. }
  296. }
  297. })
  298. }
  299. /* Access List handling */
  300. //Bind on tab switch events
  301. tabSwitchEventBind["httprp"] = function(){
  302. listProxyEndpoints();
  303. }
  304. </script>