Merge branch 'v3.0.7' into main

2025-08-11 23:55:24 +02:00 · 2024-06-16 11:42:31 +08:00
parent 443cd961d2 10048150bb
commit dd84864dd4
12 changed files with 322 additions and 34 deletions
--- a/src/web/components/httprp.html
+++ b/src/web/components/httprp.html
@@ -19,7 +19,7 @@
                    <th>Host</th>
                    <th>Destination</th>
                    <th>Virtual Directory</th>
-                    <th>Basic Auth</th>
+                    <th>Advanced Settings</th>
                    <th class="no-sort" style="min-width:150px;">Actions</th>
                </tr>
            </thead>
@@ -104,8 +104,9 @@
                        </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 data-label="" editable="true" datatype="advanced">
+                            ${subd.RequireBasicAuth?`<i class="ui green check icon"></i> Basic Auth`:`<i class="ui grey remove icon"></i> Basic Auth`}<br>
+                            ${subd.RequireRateLimit?`<i class="ui green check icon"></i> Rate Limit @ ${subd.RateLimit} req/s`:`<i class="ui grey remove icon"></i> Rate Limit`}
                        </td>
                        <td class="center aligned ignoremw" editable="true" datatype="action" data-label="">
                            <div class="ui toggle tiny fitted checkbox" style="margin-bottom: -0.5em; margin-right: 0.4em;" title="Enable / Disable Rule">
@@ -263,11 +264,11 @@
                    <i class="ui yellow folder icon"></i> Edit Virtual Directories
                </button>`);

-            }else if (datatype == "basicauth"){
+            }else if (datatype == "advanced"){
                let requireBasicAuth = payload.RequireBasicAuth;
-                let checkstate = "";
+                let basicAuthCheckstate = "";
                if (requireBasicAuth){
-                    checkstate = "checked";
+                    basicAuthCheckstate = "checked";
                }

                let skipWebSocketOriginCheck = payload.SkipWebSocketOriginCheck;
@@ -276,16 +277,36 @@
                    wsCheckstate = "checked";
                }

+                let requireRateLimit = payload.RequireRateLimit;
+                let rateLimitCheckState = "";
+                if (requireRateLimit){
+                    rateLimitCheckState = "checked";
+                }
+                let rateLimit = payload.RateLimit;
+                if (rateLimit == 0){
+                    //This value is not set. Make it default to 100
+                    rateLimit = 100;
+                }
+                let rateLimitDisableState = "";
+                if (!payload.RequireRateLimit){
+                    rateLimitDisableState = "disabled";
+                }
+
                column.empty().append(`<div class="ui checkbox" style="margin-top: 0.4em;">
-                    <input type="checkbox" class="RequireBasicAuth" ${checkstate}>
+                    <input type="checkbox" class="RequireBasicAuth" ${basicAuthCheckstate}>
                        <label>Require Basic Auth</label>
                    </div>
-                    <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>
+                    <br>
+                    <button class="ui basic compact 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>
+                    <br>
+                    <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 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
+                                Security Options
                            </div>
                            <div class="content">
                                <div class="ui checkbox" style="margin-top: 0.4em;">
@@ -294,13 +315,33 @@
                                    <small>Check this to allow cross-origin websocket requests</small></label>
                                </div>
                                <br>
-                                <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 class="ui checkbox" style="margin-top: 0.4em;">
+                                    <input type="checkbox" onchange="handleToggleRateLimitInput();" class="RequireRateLimit" ${rateLimitCheckState}>
+                                    <label>Require Rate Limit</label>
+                                </div><br>
+                                <div class="ui mini right labeled fluid input ${rateLimitDisableState}" style="margin-top: 0.4em;">
+                                    <input type="number" class="RateLimit" value="${rateLimit}" min="1" >
+                                    <label class="ui basic label">
+                                        req / sec / IP
+                                    </label>
+                                </div>
                            </div>
                        </div>
                    <div>
                `);

+            } else if (datatype == "ratelimit"){
+               
+                column.empty().append(`
+                    <div class="ui checkbox" style="margin-top: 0.4em;">
+                        <input type="checkbox" class="RequireRateLimit" ${checkstate}>
+                        <label>Require Rate Limit</label>
+                    </div>
+                    <div class="ui mini fluid input">
+                        <input type="number" class="RateLimit" value="${rateLimit}" placeholder="100" min="1" max="1000" >
+                    </div>
+                `);
+
            }else if (datatype == 'action'){
                column.empty().append(`
                <button title="Save" onclick="saveProxyInlineEdit('${uuid.hexEncode()}');" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui green save icon"></i></button>
@@ -331,6 +372,17 @@
        $("#httpProxyList").find(".editBtn").addClass("disabled");
    }

+    //handleToggleRateLimitInput will get trigger if the "require rate limit" checkbox
+    // is changed and toggle the disable state of the rate limit input field
+    function handleToggleRateLimitInput(){
+        let isRateLimitEnabled = $("#httpProxyList input.RequireRateLimit")[0].checked;
+        if (isRateLimitEnabled){
+            $("#httpProxyList input.RateLimit").parent().removeClass("disabled");
+        }else{
+            $("#httpProxyList input.RateLimit").parent().addClass("disabled");
+        }
+    }
+
    function exitProxyInlineEdit(){
        listProxyEndpoints();
        $("#httpProxyList").find(".editBtn").removeClass("disabled");
@@ -348,6 +400,8 @@
        let requireTLS = $(row).find(".RequireTLS")[0].checked;
        let skipCertValidations = $(row).find(".SkipCertValidations")[0].checked;
        let requireBasicAuth = $(row).find(".RequireBasicAuth")[0].checked;
+        let requireRateLimit = $(row).find(".RequireRateLimit")[0].checked;
+        let rateLimit = $(row).find(".RateLimit").val();
        let bypassGlobalTLS = $(row).find(".BypassGlobalTLS")[0].checked;
        let bypassWebsocketOrigin = $(row).find(".SkipWebSocketOriginCheck")[0].checked;
        console.log(newDomain, requireTLS, skipCertValidations, requireBasicAuth)
@@ -364,6 +418,8 @@
                "tlsval": skipCertValidations,
                "bpwsorg" : bypassWebsocketOrigin,
                "bauth" :requireBasicAuth,
+                "rate" :requireRateLimit,
+                "ratenum" :rateLimit,
            },
            success: function(data){
                if (data.error !== undefined){
@@ -438,10 +494,6 @@
        })
    }

-    /* Access List handling */
-    
-    
-
    //Bind on tab switch events
    tabSwitchEventBind["httprp"] = function(){
        listProxyEndpoints();
--- a/src/web/components/rules.html
+++ b/src/web/components/rules.html
@@ -76,6 +76,22 @@
                                        <label>Allow plain HTTP access<br><small>Allow this subdomain to be connected without TLS (Require HTTP server enabled on port 80)</small></label>
                                    </div>
                                </div>
+                                <div class="field">
+                                    <div class="ui checkbox">
+                                        <input type="checkbox" id="requireRateLimit">
+                                        <label>Require Rate Limit<br><small>This proxy endpoint will be rate limited.</small></label>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label>Rate Limit</label>
+                                    <div class="ui fluid right labeled input">
+                                        <input type="number" id="proxyRateLimit" placeholder="100" min="1" max="1000" value="100">
+                                        <div class="ui basic label">
+                                           req / sec / IP
+                                        </div>
+                                    </div>
+                                    <small>Return a 429 error code if request rate exceed the rate limit.</small>
+                                </div>
                                <div class="field">
                                    <div class="ui checkbox">
                                        <input type="checkbox" id="requireBasicAuth">
@@ -150,6 +166,8 @@
        var skipTLSValidation = $("#skipTLSValidation")[0].checked;
        var bypassGlobalTLS = $("#bypassGlobalTLS")[0].checked;
        var requireBasicAuth = $("#requireBasicAuth")[0].checked;
+        var proxyRateLimit = $("#proxyRateLimit").val();
+        var requireRateLimit = $("#requireRateLimit")[0].checked;
        var skipWebSocketOriginCheck = $("#skipWebsocketOriginCheck")[0].checked;
        var accessRuleToUse = $("#newProxyRuleAccessFilter").val();
        
@@ -179,6 +197,8 @@
                bpwsorg: skipWebSocketOriginCheck,
                bypassGlobalTLS: bypassGlobalTLS,
                bauth: requireBasicAuth,
+                rate: requireRateLimit,
+                ratenum: proxyRateLimit,
                cred: JSON.stringify(credentials),
                access: accessRuleToUse,
            },
@@ -267,6 +287,16 @@
    }
    $("#requireBasicAuth").on('change', toggleBasicAuth);
    toggleBasicAuth();
+    
+    function toggleRateLimit() {
+        if ($("#requireRateLimit").parent().checkbox("is checked")) {
+            $("#proxyRateLimit").parent().parent().removeClass("disabled");
+        } else {
+            $("#proxyRateLimit").parent().parent().addClass("disabled");
+        }
+    }
+    $("#requireRateLimit").on('change', toggleRateLimit);
+    toggleRateLimit();


    /*
@@ -400,11 +430,6 @@
        initNewProxyRuleAccessDropdownList();
    }

-    $(document).ready(function(){
-        $("#advanceProxyRules").accordion();
-        $("#newProxyRuleAccessFilter").parent().dropdown();
-    });
-
    function openDockerContainersList(){
        showSideWrapper('snippet/dockerContainersList.html');
    }
@@ -414,5 +439,9 @@
        $('#proxyDomain').val(`${item.ip}:${item.port}`)
        hideSideWrapper(true);
    }
+   
+    $("#advanceProxyRules").accordion();
+    $("#newProxyRuleAccessFilter").parent().dropdown();
+   
    
 </script>
--- a/src/web/components/status.html
+++ b/src/web/components/status.html
@@ -74,7 +74,7 @@
        <input type="text" id="incomingPort" placeholder="Incoming Port" value="80">
        <button class="ui green notloopbackOnly button" style="background: linear-gradient(60deg, #27e7ff, #00ca52);" onclick="handlePortChange();"><i class="ui checkmark icon"></i> Apply</button>
    </div>
-    <br><br>
+    <br>
    <div id="tls" class="ui toggle notloopbackOnly checkbox">
        <input type="checkbox">
        <label>Use TLS to serve proxy request</label>