计算前端不安全的价格？答案

【问题标题】：Calculate price on frontend insecure?计算前端不安全的价格？
【发布时间】：2019-01-06 23:16:19
【问题描述】：

我想知道是否可以操纵在前端完成的价格计算？我阅读了很多关于 JavaScript 价格计算器的文章，其业务逻辑仅在客户端，但对安全性一无所知。

考虑以下场景：

是否可以通过表单发送经过处理的计算结果？

【问题讨论】：

有可能吗？当然。有没有可能走进商店告诉收银员你的一罐牛奶只卖 0.50 美元？确实。但是有像 UPC 代码这样的系统，希望您在服务器/支付网关上构建一个系统，以防止这种情况发生。
恶意用户可以使用代理工具动态修改 http 请求。在前端计算价格，但一定要在后端再次验证。
您绝不能盲目相信服务器收到的任何输入。客户端可以通过多种方式进行操作，或者替换为根本不使用您的表单/页面的代码，而只是将数据发送到相同的服务器 URL。可以在客户端作为 preview 进行计算，但仅限于此。
“永远不要相信客户”。不要相信客户在没有先验证的情况下发送给您的任何东西。如果他们说他们想要甜甜圈，请检查您实际提供的库存系统，并有可用的甜甜圈。不要问客户他们花了多少钱。

【解决方案1】：

这里有一个重要的教训 - 某人完全有可能更改浏览器和服务器之间发送的任何值，因为他们可以拦截 HTTP 请求并修改这些值。

编辑：更多细节。

当您提交表单或触发带有参数的 API 请求时，浏览器会创建一个指向您的 URL 的 HTTP 请求，并且您的参数被编码在其中。这个数据包可以被拦截和更改，这样它就可以通过你所有的客户端验证（这实际上只是为了用户体验），并且可以随意修改。

学习如何使用诸如Burp Suite 之类的工具来了解这是如何完成的，并总体上了解有关网络安全的更多信息，这将是一个很好的做法。

这就是我们同时使用客户端和服务器端验证的原因。

您应该在前端运行正确的逻辑，但本质上在服务器上复制此逻辑并验证数据是否正确。如果不是，则由您决定如何处理，但您应该始终警惕从客户端 -> 服务器移动的数据。

【讨论】：

【解决方案2】：

是的，单独的客户端计算（没有服务器端验证）是不安全的。

不幸的是，限制（客户端）表单可以发送的值不足以防止操纵。这是因为 HTTP 请求可以通过各种不同的方法发送，而不仅仅是通过您构建的表单。

要绕过此保护，攻击者只需检查您对服务器的 API 请求（例如使用 Chrome 或 Firefox 中的开发人员工具），然后重新发送计算值更改的请求。 Firefox 的开发人员工具甚至有一个“编辑和重新发送”功能，专门允许您执行此操作（它还具有调试和测试 API 的合法用途）。

您无法控制服务器环境吗？如果你这样做了，你为什么不想在那里实施验证？如果您告诉我们更多有关您的设置的信息，那么我们也许可以帮助您找到解决问题的好方法:)

【讨论】：

这个问题与项目无关。但我可以想象一个托管在 GitHub Pages 上的 Gatsby 静态站点，它没有服务器来验证数据并使用 Formspree 发送表单。如何验证通常直接发送到该服务的数据？
如果您使用的是 Formspree 之类的东西，那么我想无论如何都必须手动处理提交。在这一点上，我想它也可以手动检查。我真的建议为此使用动态后端。但是，如果您不想这样做，某些服务（例如 PayPal）将允许您在其后端配置有效产品，以便您的代码只能是客户端。
显示在前端计算的价格只是为了在结帐时显示总计，然后将购物车项目发送到后端进行重新计算是否安全？这是一种常见的做法吗？
@mxdi9i7 是的，这是常见的做法。假设您没有任何 XSS 漏洞，攻击者将只能更改显示给自己的价格。而且他们根本无法更改收费价格尽管如果您有复杂的定价逻辑，例如特别优惠或特定地点的税费，那么您可能会发现调用后端 API 来计算价格更容易，这样您就可以保留它逻辑在一处。

【解决方案3】：

假设您在一家商店担任收银员。一位顾客过来说

“我想买这个冰淇淋，2美元”

您信任您的客户并向他收取 2 美元的费用。现在另一个（恶意）客户到达并说：

“我想买这个冰淇淋，价格 -1000 美元”

你信任他，给他 1000 美元。

真的不对吗？就像收银员检查价格一样，您的服务器也必须这样做。或者收银员/服务员自己查价。

“我想要这个冰淇淋”

“4 美元”

【讨论】：