计算前端不安全的价格?

时间:2018-07-30 16:29:49

标签: javascript reactjs forms frontend calculator

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

请考虑以下情形:

  • React应用程序具有一个组件(窗体),该组件根据其子组件(窗体输入)的状态(用户交互)来计算价格。
  • 这些子组件的价格来自API。
  • 但是计算由前端的父组件处理。

是否可以通过表格发送可操纵的计算结果?

3 个答案:

答案 0 :(得分:4)

是的,仅客户端计算(不进行服务器端验证)是不安全的。

不幸的是,限制(客户端)表单可以发送的值不足以防止操作。这是因为HTTP请求可以通过各种不同的方法发送,而不仅仅是从您构造的形式发送。

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

您是否无法控制服务器环境?如果这样做,为什么不希望在那里进行验证?如果您告诉我们更多有关您的设置的信息,那么我们也许可以帮助您找到解决问题的好方法:)

答案 1 :(得分:1)

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

编辑:对此有更多细节。

提交表单或触发带有参数的API请求时,浏览器会创建一个HTTP请求,指向您的URL,并将您的参数编入其中。可以截取并更改此数据包,以便它可以通过所有客户端验证(实际上只是为了用户体验),并可以随意进行修改。

对于您来说,学习如何使用Burp Suite之类的工具以了解其工作原理,以及全面了解网络安全是一个很好的习惯。

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

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

答案 2 :(得分:1)

让我们想象您正在一家商店担任收银员。一位顾客到达并说

“我想购买这个冰淇淋,价格为2美元”

您信任客户,并向他收费2美元。现在,另一个(恶意)客户端到达并说:

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

您信任他,并向他发放了1000美元。

不是真的吗?正如收银员会检查价格一样,您的服务器也必须这样做。或者收银员/服务器只是自己查询价格。

“我想要这个冰淇淋”

“费用为4美元”