TC
/
Zoraxy
镜像来自 https://git.hkwtc.org/TC/ReverseProxy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
							<!DOCTYPE html>
<html>
    <head>
        <!-- Notes: This should be open in its original path-->
        <meta charset="utf-8">
        <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>
        <style>
            .upstreamActions{
                position: absolute;
                top: 0.6em;
                right: 0.6em;
            }

            .upstreamLink{
                max-width: 220px;
                display: inline-block;
                word-break: break-all;
            }

            .upstreamEntry .ui.toggle.checkbox input:checked ~ label::before{
                background-color: #00ca52 !important;
            }

            #activateNewUpstream.ui.toggle.checkbox input:checked ~ label::before{
                background-color: #00ca52 !important;
            }

            #upstreamTable{
                max-height: 480px;
                border-radius: 0.3em;
                padding: 0.3em;
                overflow-y: auto;
            }

            @media (max-width: 499px) {
                .upstreamActions{
                    position: relative;
                    margin-top: 1em;
                    margin-left: 0.4em;
                    margin-bottom: 0.4em;
                }
            }
        </style>
    </head>
    <body>
        <br>
        <div class="ui container">
            <div class="ui header">
                <div class="content">
                    Upstreams / Load Balance
                    <div class="sub header epname"></div>
                </div>
            </div>
            <div class="ui divider"></div>
            <div class="ui small pointing secondary menu">
                <a class="item active narrowpadding" data-tab="upstreamlist">Upstreams</a>
                <a class="item narrowpadding" data-tab="newupstream">Add Upstream</a>
            </div>
            <div class="ui tab basic segment active" data-tab="upstreamlist">
                <!-- A list of current existing upstream on this reverse proxy-->
                <div id="upstreamTable">
                    <div class="ui segment">
                        <a><i class="ui loading spinner icon"></i> Loading</a>
                    </div>
                </div>
                <div class="ui message">
                    <i class="ui blue info circle icon"></i> Round-robin load balancing algorithm will be used for upstreams with same priority. Lower priority origin server will be used as fallback when all the higher priority server are offline.
                 </div>
            </div>
            <div class="ui tab basic segment" data-tab="newupstream">
                <!-- Web Form to create a new upstream -->
                <h4 class="ui header">
                    <i class="green add icon"></i>
                    <div class="content">
                        Add Upstream Server
                        <div class="sub header">Create new load balance or fallback upstream origin</div>
                    </div>
                </h4>
                <p style="margin-bottom: 0.4em;">Target IP address with port</p>
                <div class="ui fluid small input">
                    <input type="text" id="originURL" onchange="cleanProxyTargetValue(this);"><br>
                </div>
                <small>E.g. 192.168.0.101:8000 or example.com</small>
                <br><br>
                <div id="activateNewUpstream" class="ui toggle checkbox" style="display:inline-block;">
                    <input type="checkbox" id="activateNewUpstreamCheckbox" style="margin-top: 0.4em;" checked>
                    <label>Activate<br>
                    <small>Enable this upstream for load balancing</small></label>
                </div><br>
                <div class="ui checkbox" style="margin-top: 1.2em;">
                    <input type="checkbox" id="requireTLS">
                    <label>Require TLS<br>
                        <small>Proxy target require HTTPS connection</small></label>
                </div><br>
                <div class="ui checkbox" style="margin-top: 0.6em;">
                    <input type="checkbox" id="skipTlsVerification">
                     <label>Skip Verification<br>
                        <small>Check this if proxy target is using self signed certificates</small></label>
                </div><br>
                 <div class="ui checkbox" style="margin-top: 0.4em;">
                    <input type="checkbox" id="SkipWebSocketOriginCheck" checked>
                    <label>Skip WebSocket Origin Check<br>
                    <small>Check this to allow cross-origin websocket requests</small></label>
                </div>
                <br><br>
                <button class="ui basic button" onclick="addNewUpstream();"><i class="ui green circle add icon"></i> Create</button>
            </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>

        </div>
        <script>
            let origins = [];
            let editingEndpoint = {};
            $('.menu .item').tab();
           

            function initOriginList(){
                $.ajax({
                    url: "/api/proxy/upstream/list",
                    method: "POST",
                    data: {
                        "type":"host",
                        "ep": editingEndpoint.ep
                    },
                    success: function(data){
                        if (data.error != undefined){
                            //This endpoint not exists?
                            alert(data.error);
                            return;
                        }else{
                            $("#upstreamTable").html("");
                            if (data != undefined){
                                console.log(data);
                                data.ActiveOrigins.forEach(upstream => {
                                    renderUpstreamEntryToTable(upstream, true);
                                });

                                data.InactiveOrigins.forEach(upstream => {
                                    renderUpstreamEntryToTable(upstream, false);
                                });

                                if (data.ActiveOrigins.length == 1){
                                    $(".lowPriorityButton").addClass('disabled');
                                }

                                $(".ui.checkbox").checkbox();
                            }else{
                                //Assume no origins
                                $("#inlineEditTable").html(`<tr>
                                    <td colspan="2"><i class="ui red circle times icon"></i> Invalid Upstream Settings</td>
                                </tr>`);
                            }

                            
                        }
                    }
                })
            }
            
            function renderUpstreamEntryToTable(upstream, isActive){
                function newUID(){return"00000000-0000-4000-8000-000000000000".replace(/0/g,function(){return(0|Math.random()*16).toString(16)})};
                let tlsIcon = "";
                if (upstream.RequireTLS){
                    tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
                    if (upstream.SkipCertValidations){
                        tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
                    }
                }

                //Priority Arrows 
                let upArrowClass = "";
                if (upstream.Priority == 0 ){
                    //Cannot go any higher
                    upArrowClass = "disabled";
                }
                let url = `${upstream.RequireTLS?"https://":"http://"}${upstream.OriginIpOrDomain}`
                let payload = encodeURIComponent(JSON.stringify(upstream));
                let domUID = newUID();
                $("#upstreamTable").append(`<div class="ui upstreamEntry ${isActive?"":"disabled"} segment" data-domid="${domUID}" data-payload="${payload}" data-priority="${upstream.Priority}">
                    <h4 class="ui header">
                        <div class="ui toggle checkbox" style="display:inline-block;">
                            <input type="checkbox" class="enableState" name="enabled" style="margin-top: 0.4em;" onchange="saveUpstreamUpdate('${domUID}');" ${isActive?"checked":""}>
                            <label></label>
                        </div>
                        <div class="content">
                        <a href="${url}" target="_blank" class="upstreamLink">${upstream.OriginIpOrDomain} ${tlsIcon}</a>
                            <div class="sub header">Priority: ${upstream.Priority}</div>
                        </div>
                    </h4>
                    <div class="advanceOptions" style="display:none;">
                        <div class="upstreamOriginField">
                            <p>New upstream origin IP address or domain</p>
                            <div class="ui small fluid input" style="margin-top: -0.6em;">
                                <input type="text" class="newOrigin" value="${upstream.OriginIpOrDomain}" onchange="handleAutoOriginClean('${domUID}');">
                            </div>
                            <small>e.g. 192.168.0.101:8000 or example.com</small>
                        </div>
                        <div class="ui divider"></div>
                        <div class="ui checkbox">
                            <input type="checkbox" class="reqTLSCheckbox" ${upstream.RequireTLS?"checked":""}>
                            <label>Require TLS<br>
                                <small>Proxy target require HTTPS connection</small></label>
                        </div><br>
                        <div class="ui checkbox" style="margin-top: 0.6em;">
                            <input type="checkbox" class="skipVerificationCheckbox" ${upstream.SkipCertValidations?"checked":""}>
                                <label>Skip Verification<br>
                                <small>Check this if proxy target is using self signed certificates</small></label>
                        </div><br>
                            <div class="ui checkbox" style="margin-top: 0.4em;">
                            <input type="checkbox" class="SkipWebSocketOriginCheck" ${upstream.SkipWebSocketOriginCheck?"checked":""}>
                            <label>Skip WebSocket Origin Check<br>
                            <small>Check this to allow cross-origin websocket requests</small></label>
                        </div><br>
                    </div>
                    <div class="upstreamActions">
                        <!-- Change Priority -->
                        <button class="ui basic circular icon button ${upArrowClass} highPriorityButton" title="Higher Priority"><i class="ui arrow up icon"></i></button>
                        <button class="ui basic circular icon button lowPriorityButton" title="Lower Priority"><i class="ui arrow down icon"></i></button>
                        <button class="ui basic circular icon editbtn button" onclick="handleUpstreamOriginEdit('${domUID}');" title="Edit Upstream Destination"><i class="ui grey edit icon"></i></button>
                        <button style="display:none;" class="ui basic circular icon savebtn button" onclick="saveUpstreamUpdate('${domUID}');" title="Save New Destination"><i class="ui green save icon"></i></button>
                        <button style="display:none;" class="ui basic circular icon cancelbtn button" onclick="initOriginList();" title="Cancel"><i class="ui grey times icon"></i></button>
                        <button style="display:none;" class="ui basic circular icon trashbtn button" title="Remove Upstream"><i class="ui red trash icon"></i></button>
                    </div>
                </div>`);
            }

            /* New Upstream Origin Functions */

            //Clearn the proxy target value, make sure user do not enter http:// or https://
            //and auto select TLS checkbox if https:// exists
            function cleanProxyTargetValue(input){
                let targetDomain = $(input).val().trim();
                if (targetDomain.startsWith("http://")){
                    targetDomain = targetDomain.substr(7);
                    $(input).val(targetDomain);
                    $("#requireTLS").parent().checkbox("set unchecked");
                }else if (targetDomain.startsWith("https://")){
                    targetDomain = targetDomain.substr(8);
                    $(input).val(targetDomain);
                    $("#requireTLS").parent().checkbox("set checked");
                }else{
                    //URL does not contains https or http protocol tag
                    //sniff header
                    $.ajax({
                            url: "/api/proxy/tlscheck",
                            data: {url: targetDomain},
                            success: function(data){
                                if (data.error != undefined){

                                }else if (data == "https"){
                                    $("#requireTLS").parent().checkbox("set checked");
                                }else if (data == "http"){
                                    $("#requireTLS").parent().checkbox("set unchecked");
                                }
                            }
                    })
                }
            }

            //Add a new upstream to this http proxy rule
            function addNewUpstream(){
                let origin = $("#originURL").val().trim();
                let requireTLS = $("#requireTLS")[0].checked;
                let skipVerification = $("#skipTlsVerification")[0].checked;
                let skipWebSocketOriginCheck = $("#SkipWebSocketOriginCheck")[0].checked;
                let activateLoadbalancer = $("#activateNewUpstreamCheckbox")[0].checked;

                if (origin == ""){
                    parent.msgbox("Upstream origin cannot be empty", false);
                    return;
                }

                $.ajax({
                    url: "/api/proxy/upstream/add",
                    method: "POST",
                    data:{
                        "ep": editingEndpoint.ep,
                        "origin": origin,
                        "tls": requireTLS,
                        "tlsval": skipVerification,
                        "bpwsorg":skipWebSocketOriginCheck,
                        "active": activateLoadbalancer,
                    },
                    success: function(data){
                        if (data.error != undefined){
                            parent.msgbox(data.error, false);
                        }else{
                            parent.msgbox("New upstream origin added");
                            initOriginList();
                            $("#originURL").val("");
                        }
                    }
                })
            }

            //Get a upstream setting data from DOM element
            function getUpstreamSettingFromDOM(upstream){
                //Get the original setting from DOM payload
                let originalSettings = $(upstream).attr("data-payload");
                originalSettings = JSON.parse(decodeURIComponent(originalSettings));
                
                //Get the updated settings if any
                let requireTLS = $(upstream).find(".reqTLSCheckbox")[0].checked;
                let skipTLSVerification = $(upstream).find(".skipVerificationCheckbox")[0].checked;
                let skipWebSocketOriginCheck = $(upstream).find(".SkipWebSocketOriginCheck")[0].checked;

                //Update the original setting with new one just applied
                originalSettings.OriginIpOrDomain = $(upstream).find(".newOrigin").val();
                originalSettings.RequireTLS = requireTLS;
                originalSettings.SkipCertValidations = skipTLSVerification;
                originalSettings.SkipWebSocketOriginCheck = skipWebSocketOriginCheck;

                //console.log(originalSettings);
                return originalSettings;
            }

            //Handle setting change on upstream config
            function saveUpstreamUpdate(upstreamDomID){
                let targetDOM = $(`.upstreamEntry[data-domid=${upstreamDomID}]`);
                let originalSettings = $(targetDOM).attr("data-payload");
                originalSettings = JSON.parse(decodeURIComponent(originalSettings));
                let newConfig = getUpstreamSettingFromDOM(targetDOM);
                let isActive = $(targetDOM).find(".enableState")[0].checked;
                console.log(newConfig);
                $.ajax({
                    url: "/api/proxy/upstream/update",
                    method: "POST",
                    data: {
                        ep: editingEndpoint.ep,
                        origin: originalSettings.OriginIpOrDomain, //Original ip or domain as key
                        payload: JSON.stringify(newConfig),
                        active: isActive,
                    },
                    success: function(data){
                        if (data.error != undefined){
                            parent.msgbox(data.error, false);

                        }else{
                            parent.msgbox("Upstream setting updated");
                            initOriginList();
                        }
                    }
                })
            }

            //Edit the upstream origin of this upstream entry
            function handleUpstreamOriginEdit(upstreamDomID){
                let targetDOM = $(`.upstreamEntry[data-domid=${upstreamDomID}]`);
                let originalSettings = $(targetDOM).attr("data-payload");
                originalSettings = JSON.parse(decodeURIComponent(originalSettings));
                let originIP = originalSettings.OriginIpOrDomain;

                //Change the UI to edit mode
                $(".editbtn").hide();
                $(".lowPriorityButton").hide();
                $(".highPriorityButton").hide();
                $(targetDOM).find(".trashbtn").show();
                $(targetDOM).find(".savebtn").show();
                $(targetDOM).find(".cancelbtn").show();
                $(targetDOM).find(".advanceOptions").show();
            }

            //Check if the entered URL contains http or https
            function handleAutoOriginClean(domid){
                let targetDOM = $(`.upstreamEntry[data-domid=${domid}]`);
                let targetTLSCheckbox = $(targetDOM).find(".reqTLSCheckbox");
                let targetDomain = $(targetDOM).find(".newOrigin").val().trim();
                if (targetDomain.startsWith("http://")){
                    targetDomain = targetDomain.substr(7);
                    $(input).val(targetDomain);
                    $(targetTLSCheckbox).parent().checkbox("set unchecked");
                }else if (targetDomain.startsWith("https://")){
                    targetDomain = targetDomain.substr(8);
                    $(input).val(targetDomain);
                    $(targetTLSCheckbox).parent().checkbox("set checked");
                }else{
                    //URL does not contains https or http protocol tag
                    //sniff header
                    $.ajax({
                            url: "/api/proxy/tlscheck",
                            data: {url: targetDomain},
                            success: function(data){
                                if (data.error != undefined){

                                }else if (data == "https"){
                                    $(targetTLSCheckbox).parent().checkbox("set checked");
                                }else if (data == "http"){
                                    $(targetTLSCheckbox).parent().checkbox("set unchecked");
                                }
                            }
                    })
                }
            }

            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;
                    initOriginList();
                }catch(ex){
                    console.log("Unable to load endpoint data from hash")
                }
            }

            function closeThisWrapper(){
                parent.hideSideWrapper(true);
            }
        </script>
    </body>
</html>