TC
/
Zoraxy
mirror of https://git.hkwtc.org/TC/ReverseProxy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
							<!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>
            .ui.tabular.menu .item.narrowpadding{
                padding: 0.6em !important;
                margin: 0.15em !important;
            }

            #permissionPolicyEditor.disabled{
                opacity: 0.4;
                pointer-events: none;
                user-select: none;
            }

            #permissionPolicyEditor .experimental{
                background-color: rgb(241, 241, 241);
            }
        </style>
    </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>
            <div class="ui small pointing secondary menu">
                <a class="item active narrowpadding" data-tab="customheaders">Custom Headers</a>
                <a class="item narrowpadding" data-tab="security">Security Headers</a>
            </div>
            <div class="ui tab basic segment active" data-tab="customheaders">
                <table class="ui very basic compacted unstackable celled table">
                    <thead>
                    <tr>
                        <th>Key</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>
                <p>
                    <i class="angle double right blue icon"></i> Add or remove headers before sending to origin server <br>
                    <i class="angle double left orange icon"></i> Modify headers from origin server responses before sending to client
                </p>
                <div class="ui divider"></div>
                <h4>Edit Custom Header</h4>
                <p>Add or remove custom header(s) over this proxy target</p>
                <div class="scrolling content ui form">
                    <div class="five small fields credentialEntry">
                        <div class="field" align="center">
                            <button id="toOriginButton" style="margin-top: 0.6em;" title="Downstream to Upstream" class="ui circular basic active button">Zoraxy <i class="angle double right blue icon" style="margin-right: 0.4em;"></i> Origin</button>
                            <button id="toClientButton" style="margin-top: 0.6em;" title="Upstream to Downstream" class="ui circular basic button">Client <i class="angle double left orange icon" style="margin-left: 0.4em;"></i> Zoraxy</button>
                        </div>
                        <div class="field" align="center">
                            <button id="headerModeAdd" style="margin-top: 0.6em;" class="ui circular basic active button"><i class="ui green circle add icon"></i> Add Header</button>
                            <button id="headerModeRemove" style="margin-top: 0.6em;" class="ui circular basic button"><i class="ui red circle times icon"></i> Remove Header</button>
                        </div>
                        <div class="field">
                            <label>Header Key</label>
                            <input id="headerName" type="text" placeholder="X-Custom-Header" autocomplete="off">
                            <small>The header key is <b>NOT</b> case sensitive</small>
                        </div>
                        <div class="field">
                            <label>Header Value</label>
                            <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 Rewrite Rule</button>
                        </div>
                        <div class="ui divider"></div>
                    </div>
                </div>
            </div>
            <div class="ui tab basic segment" data-tab="security">
                <h4>HTTP Strict Transport Security</h4>
                <p>Force future attempts to access this site to only use HTTPS</p>
                <div class="ui toggle checkbox">
                    <input type="checkbox" id="enableHSTS" name="enableHSTS">
                    <label>Enable HSTS<br>
                    <small>HSTS header will be automatically ignored if the site is accessed using HTTP</small></label>
                </div>
                <div class="ui divider"></div>
                <h4>Permission Policy</h4>
                <p>Explicitly declare what functionality can and cannot be used on this website. </p>
                <div class="ui toggle checkbox" style="margin-top: 0.6em;">
                    <input type="checkbox" id="enablePP" name="enablePP">
                    <label>Enable Permission Policy<br>
                    <small>Enable Permission-Policy header with all allowed state.</small></label>
                </div>
                <div style="margin-top: 1em;" id="permissionPolicyEditor">
                    <table class="ui celled unstackable very compact table">
                        <thead>
                          <tr><th>Feature</th>
                            <th>Enabled</th>
                            <th>Allow All (*)</th>
                            <th>Self Only (self)</th>
                        </tr></thead>
                        <tbody id="permissionPolicyEditTable">
                          <tr>
                            <td colspan="4"><i class="ui loading spinner icon"></i> Generating</td>
                          </tr>
                        </tbody>
                      </table>
                </div>
                <small><i class="ui yellow exclamation triangle icon"></i> Grey out fields are non-standard permission policies</small>
                <br><br>
                <button class="ui basic button" onclick="savePermissionPolicy();"><i class="green save icon"></i> Save</button>
            </div>
           
            <div class="field" >
                <button class="ui basic button"  style="float: right;" onclick="closeThisWrapper();">Close</button>
            </div>
        </div>
        
        <br><br><br><br>

        <script>
            $('.menu .item').tab();
            let permissionPolicyKeys = [];

            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);
            }

            //Bind events to header mod mode
            $("#headerModeAdd").on("click", function(){
                $("#headerModeAdd").addClass("active");
                $("#headerModeRemove").removeClass("active");
                $("#headerValue").parent().show();
            });

            $("#headerModeRemove").on("click", function(){
                $("#headerModeAdd").removeClass("active");
                $("#headerModeRemove").addClass("active");
                $("#headerValue").parent().hide();
                $("#headerValue").val("");
            });

            //Bind events to header directions option
            $("#toOriginButton").on("click", function(){
                $("#toOriginButton").addClass("active");
                $("#toClientButton").removeClass("active");
            });

            $("#toClientButton").on("click", function(){
                $("#toOriginButton").removeClass("active");
                $("#toClientButton").addClass("active");
            });

            //Return "add" or "remove" depending on mode user selected
            function getHeaderEditMode(){
                if ($("#headerModeAdd").hasClass("active")){
                    return "add";
                }

                return "remove";
            }

            //Return "toOrigin" or "toClient"
            function getHeaderDirection(){
                if ($("#toOriginButton").hasClass("active")){
                    return "toOrigin";
                }
                return "toClient";
            }

            //$("#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 (getHeaderEditMode() == "add"){
                    if (value == ""){
                        $("#headerValue").parent().addClass("error");
                        return
                    }else{
                        $("#headerValue").parent().removeClass("error");
                    }
                }

                $.ajax({
                    url: "/api/proxy/header/add",
                    data: {
                        "type": getHeaderEditMode(),
                        "domain": editingEndpoint.ep,
                        "direction":getHeaderDirection(),
                        "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 => {
                                let editModeIcon = header.IsRemove?`<i class="ui red times circle icon"></i>`:`<i class="ui green add circle icon"></i>`;
                                let direction = (header.Direction==0)?`<i class="angle double right blue icon"></i>`:`<i class="angle double left orange icon"></i>`;
                                let valueField = header.Value;
                                if (header.IsRemove){
                                    valueField = "<small style='color: grey;'>(Field Removed)</small>";
                                }
                                $("#headerTable").append(`
                                <tr>
                                    <td>${direction} ${header.Key}</td>
                                    <td>${editModeIcon} ${valueField}</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();

            //Start HSTS state
            function initHSTSState(){
                $.get("/api/proxy/header/handleHSTS?domain=" + editingEndpoint.ep, function(data){
                    if (data == 0){
                        //HSTS disabled
                        $("#enableHSTS").parent().checkbox("set unchecked");
                    }else{
                        //HSTS enabled
                        $("#enableHSTS").parent().checkbox("set checked");
                    }

                    /* Bind events to toggles */
                    $("#enableHSTS").on("change", function(){
                        let HSTSEnabled = $("#enableHSTS")[0].checked;
                        $.ajax({
                            url: "/api/proxy/header/handleHSTS",
                            method: "POST",
                            data: {
                                "domain": editingEndpoint.ep,
                                "maxage": 31536000
                            },
                            success: function(data){
                                if (data.error != undefined){
                                    parent.msgbox(data.error, false);
                                }else{
                                    parent.msgbox(`HSTS ${HSTSEnabled?"Enabled":"Disabled"}`);
                                }
                            }
                        })
                    });
                });
            }
            initHSTSState();

            //Return true if this is an proposed permission policy feature
            function isExperimentalFeature(header) {
                // List of experimental features
                const experimentalFeatures = [
                    "clipboard-read",
                    "clipboard-write",
                    "gamepad",
                    "speaker-selection",
                    "conversion-measurement",
                    "focus-without-user-activation",
                    "hid",
                    "idle-detection",
                    "interest-cohort",
                    "serial",
                    "sync-script",
                    "trust-token-redemption",
                    "unload",
                    "window-placement",
                    "vertical-scroll"
                ];

                header = header.replaceAll("_","-");

                // Check if the header is in the list of experimental features
                return experimentalFeatures.includes(header);
            }

            /* List permission policy header from server */
            function initPermissionPolicy(){
                $.get("/api/proxy/header/handlePermissionPolicy?domain=" + editingEndpoint.ep, function(data){
                    if (data.error != undefined){
                        console.log(data.error);
                        $("#enablePP").parent().addClass('disabled');
                        return;
                    }

                    //Set checkbox initial state
                    if (data.PPEnabled){
                        $("#enablePP").parent().checkbox("set checked");
                        $("#permissionPolicyEditor").removeClass("disabled");
                    }else{
                        $("#enablePP").parent().checkbox("set unchecked");
                        $("#permissionPolicyEditor").addClass("disabled");
                    }

                    //Bind toggle change events
                    $("#enablePP").on("change", function(evt){
                        //Set checkbox state
                        let ppEnabled = $("#enablePP")[0].checked;
                        if (ppEnabled){
                            $("#permissionPolicyEditor").removeClass("disabled");
                        }else{
                            $("#permissionPolicyEditor").addClass("disabled");
                        }

                        $.ajax({
                            url: "/api/proxy/header/handlePermissionPolicy",
                            method: "POST",
                            data: {
                                enable: ppEnabled,
                                domain: editingEndpoint.ep
                            },
                            success: function(data){
                                if (data.error != undefined){
                                    parent.msgbox(data.error, false);
                                }else{
                                    parent.msgbox(`Permission Policy ${ppEnabled?"Enabled":"Disabled"}`)
                                }
                            }
                        })
                    });

                    //Render the table to list
                    $("#permissionPolicyEditTable").html("");
                    for (const [key, value] of Object.entries(data.CurrentPolicy)) {
                        let allowall = "";
                        let allowself = "";
                        let enabled = "checked";
                        if (value.length == 1 && value[0] == "*"){
                            allowall = "checked";
                        }else if (value.length == 1 && value[0] == "self"){
                            allowself = "checked";
                        }

                        if (value.length == 0){
                            enabled = ""
                            allowall = "checked"; //default state
                        }

                        let isExperimental = isExperimentalFeature(key);
                        $("#permissionPolicyEditTable").append(`<tr class="${isExperimental?"experimental":""}">
                            <td>${key.replaceAll("_","-")}</td>
                            <td>
                                <div class="ui checkbox">
                                    <input class="enabled" type="checkbox" name="${key}" ${enabled}>
                                    <label></label>
                                </div>
                            </td>
                            <td>
                                <div class="ui radio checkbox targetinput ${!enabled?"disabled":""}">
                                    <input type="radio" value="all" name="${key}-target" ${allowall} ${!enabled?"disabled=\"\"":""}>
                                    <label></label>
                                </div>
                            </td>
                            <td>
                                <div class="ui radio checkbox targetinput ${!enabled?"disabled":""}">
                                    <input type="radio" value="self" name="${key}-target" ${allowself} ${!enabled?"disabled=\"\"":""}>
                                    <label></label>
                                </div>
                            </td>
                        </tr>`);
                        
                        permissionPolicyKeys.push(key);
                    }

                    $("#permissionPolicyEditTable .enabled").on("change", function(){
                        console.log($(this)[0].checked);
                        let fieldGroup = $(this).parent().parent().parent();
                        if ($(this)[0].checked){
                            fieldGroup.find(".targetinput").removeClass("disabled");
                            fieldGroup.find("input[type=radio]").prop('disabled', false);
                        }else{
                            fieldGroup.find(".targetinput").addClass("disabled");
                            fieldGroup.find("input[type=radio]").prop('disabled', true);
                        }
                    })
                });
            }
            initPermissionPolicy();

            //Generate the permission policy object for sending to backend
            function generatePermissionPolicyObject(){
                function getStructuredFieldValueFromDOM(fieldKey){
                    var policyTarget = $(`#permissionPolicyEditTable input[name="${fieldKey}-target"]:checked`).val();
                    var isPolicyEnabled = $(`#permissionPolicyEditTable input[name="${fieldKey}"]`).is(':checked');
                    
                    if (!isPolicyEnabled){
                        return [];
                    }

                    if (policyTarget == "all"){
                        //Rewrite all to correct syntax
                        policyTarget = "*";
                    }
                    return [policyTarget];
                }

                let newPermissionPolicyKeyValuePair = {};
                permissionPolicyKeys.forEach(policyKey => {
                    newPermissionPolicyKeyValuePair[policyKey] = getStructuredFieldValueFromDOM(policyKey);
                });

                console.log(newPermissionPolicyKeyValuePair);
                return newPermissionPolicyKeyValuePair;
            }

            //Handle saving of permission policy
            function savePermissionPolicy(){
                let permissionPolicy = generatePermissionPolicyObject();
                let domain = editingEndpoint.ep;

                $.ajax({
                    url: "/api/proxy/header/handlePermissionPolicy",
                    method: "PUT",
                    data: {
                        "domain": domain,
                        "pp": JSON.stringify(permissionPolicy),
                    },
                    success: function(data){
                        if (data.error != undefined){
                            parent.msgbox(data.error, false);
                        }else{
                            parent.msgbox("Permission Policy Updated");
                        }
                    }
                })
            }
        </script>
    </body>
</html>