Question

我正在尝试更新基于javascript的购物车。产品列出

<ul>
  <li class="product" data-price="5.00">
    <h2>Product Name</h2>
    <p> Product Descriptions>
    ....
    <a href="#" onclick="addToCart">$ 5.00</a>
  </li>
  <li class="product" data-price="6.70">
    <h2>Product Name</h2>
    <p> Product Descriptions>
    ....
    <a href="#" onclick="addToCart">$ 6.70</a>
  </li>
</ul>

在schopping购物车中，我们阅读data-price来获取价格。这意味着如果用户在Firebug或任何其他工具中更改此属性，则价格会自动在购物车中更改。

我无法重写整个购物车，但也希望确保价格逻辑。有什么方法可以解决这个问题

Answer 1

您需要某种服务器端验证，以确保客户永远不会操纵价格。如果您正在尝试整个购物篮和结帐系统客户端，那么就我所知，您无法阻止用户操作内容。你可以让他们更难以这样做，但绝不可能。

最安全的方式，以及我的方式，只是将产品ID存储在购物篮中。因此，当用户点击＆＃34;添加到购物车＆＃34;你只需添加产品ID。无论何时您需要计算篮子总数或获得其中单个产品的价格，您都可以遍历产品ID并将其与您在某处明确定义的价格相匹配。

理想情况下，您可以执行此服务器端并将数据保存在数据库或类似内容中。这样，无论出于何种意图和目的，他们都无法操纵价格。他们能做的最糟糕的事情是操纵篮子中的产品ID，然后他们最终做的就是为错误的事情付出代价，但是因为他们正试图破坏你的系统。他们的问题而不是你的问题。

如果你真的无法做这个服务器端，无论出于何种原因，那么你可以将产品价格硬编码到javascript文件中并以这种方式检查ID。它比服务器端更不安全，但操作网页中javascript文件的内容要比编辑dom元素的属性要困难得多。

这是一个使用前端实现的非常简单的示例：

var products = {
    1: 5.99,
    2: 7.99,
    3: 2.50
};

var basket = [];

function addToBasket(productId) {
    basket.push(productId);
}

function getBasketTotal() {

    var total = 0;

    basket.forEach(function(productId) {
        total += products[productId];
    });

    return total;
}

基于javascript的购物车 - 确保价格归属

1 个答案: