javascript - 如何保护 Django 模板以通过 Web 浏览器的检查元素功能更改其值(HTML 和 Javascript)？

Question

我正在开发一个 Django 网站，我需要显示公司的一些服务，用户可以从页面上给出的单选按钮选择服务类型。不同类型服务的价格是从数据库中获取的。一旦用户选择任何类型服务的单选按钮，该服务的价格就会使用 javascript 复制到 HTML 标签，并且通过 javascript 计算所选服务的总和并显示到称为总计的不同标签。现在我想做的是，单击按钮后，我需要将用户选择和应付总金额存储到 View 中的 session 中。我想通过使用javascript的ajax调用来做到这一点，但是如果用户更改/更改在客户端计算的所有这些标签的值，使用检查元素功能比ajax调用将发送修改后的数据，因此它似乎是不安全的方法。那么谁能指导我如何处理这个问题。

下面是我的tmeplate的代码:

<table class="LeftOffers">
    <tr><th style="width:450px;">Packages</th><th>Small</th><th>Medium</th><th>Large</th></tr>
    {%for package in packages%}
        <tr><td><label id="package{{forloop.counter}}">{{package.PackageName}}</label><br>{{package.PackageDesc}}</td>
        <td> <label><input name="package{{forloop.counter}}" id="small" value="{{package.SmallPrice}}" onchange="updateTotal(name)" type="radio">Rs {{package.SmallPrice}}</label></td>
        <td> <label><input name="package{{forloop.counter}}" id="med" value="{{package.MedPrice}}" onchange="updateTotal(name)" type="radio">Rs {{package.MedPrice}}</label></td>
        <td> <label><input name="package{{forloop.counter}}" id="large" value="{{package.LargePrice}}" onchange="updateTotal(name)" type="radio">Rs {{package.LargePrice}}</label></td>
    </tr>
    {%endfor%}
</table>

这里的服务是套餐，小型、中型和大型是不同类型的套餐。

下面是用于在某些标签上显示所选商品的价格并计算应付总金额的 JavaScript:

function updateTotal(names) {
    pkgname = document.getElementById(names).innerHTML;
    rowlbl = "row_"+names;
    namelbl = "label_"+names;
    prclbl = "optionsPrice_"+names;
    btnid = "button_"+names;
    document.getElementById(rowlbl).style.display='inline';
    document.getElementById(btnid).style.display='inline';
    document.getElementById(namelbl).innerHTML = pkgname;
    document.getElementById(prclbl).innerHTML = "Rs "+ $("input[name="+names+"]:checked").val();
    totalPrice=0;
    {% for package in packages %}

        lblname = "optionsPrice_package{{forloop.counter}}";
        lblprc = document.getElementById(lblname).innerHTML;
        if (lblprc != ""){
            lblprc = lblprc.replace("Rs ","");
        } else{
            lblprc = "0";
        }
        totalPrice = totalPrice + parseInt(lblprc); 
    {% endfor %}
document.getElementById('totalPrice').innerHTML = "Rs " + totalPrice.toString();
}

如果我在这里遗漏了什么，请告诉我。

另附上我的页面截图以供引用:

Answer 1

这是 X-Y problem 的经典示例;您选择的解决方案(将计算数据存储在字段中)存在安全问题，因此您询问如何防止这种情况，而不是意识到该解决方案不合适。

您根本不应该发送表单中的总计。随意在 JS 中计算它以显示给用户，但不要发送它。您已经将所选包裹的详细信息发布到后端；使用该数据而不是发布的总额来计算实际应付金额。