Javascript 计算前端不安全的价格？

我想知道是否有可能操纵在前端进行的价格计算？我读了很多关于JavaScript价格计算器的书，这些价格计算器的业务逻辑只在客户端，而对安全性却一无所知

考虑以下场景：

• React应用程序有一个组件（表单），它根据其子组件（表单输入）的状态（用户交互）计算价格
• 这些子组件的价格来自API
• 但计算由前端的父组件处理

---

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

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

编辑：这方面的更多细节

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

对于您来说，学习如何使用一个工具（例如，了解如何实现这一点）并了解更多有关web安全的一般信息是一个很好的实践

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

---

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

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

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

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

---

您没有服务器环境的控制权吗？如果是这样，为什么不想在那里实现验证呢？如果您能告诉我们更多关于您的设置的信息，那么我们可能会帮助您找到解决问题的好方法：）

让我们想象一下您在一家商店当收银员。一位顾客来了，说

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

你信任你的客户，给他开了2美元的账单。现在，另一个（恶意）客户端到达并说：

“我想买这个冰淇淋，它要-1000美元”

你信任他，给他1000美元

不是很对吗？就像出纳检查价格一样，你的服务器也必须这样做。或者收银员/服务员只是自己查价格

“我想要这个冰淇淋”

---

“4美元”

可能吗？当然有没有可能走进商店，告诉收银员你的一罐牛奶只卖0.5美元？肯定但也有类似UPC代码的系统，希望您在服务器/支付网关上构建一个系统来防止这种情况。恶意用户可以使用代理工具动态修改http请求。在前端计算价格，但确保在后端再次验证价格。您决不能盲目信任服务器收到的任何输入。客户机可以通过多种方式进行操作，或者被完全不使用表单/页面的代码所取代，而只是将数据发送到同一服务器URL。在客户端计算作为预览是可以的，但仅限于此，“永远不要相信客户端”。不要信任客户机发送给您的任何东西，除非先对其进行验证。如果他们说他们想要甜甜圈，检查一下你的库存系统，你是否真的提供了甜甜圈，并且有可用的甜甜圈。不要问客户他们花了多少钱。这个问题与项目无关。但我可以想象一个托管在GitHub页面上的Gatsby静态站点，它没有服务器来验证数据，并使用Formspree发送表单。如何验证通常直接发送到该服务的数据？如果您使用的是Formspree之类的东西，那么我想提交的数据无论如何都必须手动处理。在这一点上，我想还是手动检查为好。我真的建议为此使用动态后端。但是，如果您不想这样做，某些服务（如PayPal）将允许您在其后端配置有效的产品，以便您的代码只能在客户端使用。在前端显示计算出的价格以在结帐时显示总额是否安全，然后将购物车项目发送到后端进行重新计算？这是一种普遍的做法吗？