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

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>

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

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

Answer 1

您将需要某种服务器端验证，以确保客户端永远不会操纵价格。 如果您要尝试处理整个购物篮和结帐系统客户端，那么据我所知，您将无法采取任何措施来防止用户操纵内容。 您可以使他们更难做到，但绝不可能做到。

我最安全的方法是只将产品ID存储在购物篮中。 因此，当用户单击“添加到购物车”时，您只需添加产品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;
}