避免 URL 参数操纵

Question

所以在我的例子中，在用户选择某个房间后，他将入住的晚数和客人数量，计算价格（取决于某些因素），然后他们被重定向到付款页面，在那里他们将看到总价，用户可以通过操作 url 中的价格参数来更改。

在预订页面上：

<Link to={"/book?pricetotal="+total_prices+"&title="+title+"&img="+img+"&price="+price+"&checkin="+checkkin+"&checkout="+checkkout+"&idr="+idroom} >

在我正在使用的付款页面上

const windowUrl = window.location.search;
const params = new URLSearchParams(windowUrl);

然后我得到参数使用

params.get('price')

我找到的解决方案是加密Url参数的内容，然后解密。 该解决方案是否足够有效或是否有其他实施方式？

Answer 1

客户端上的任何内容都可能被足够感兴趣的人拦截和操纵。 如果您真的担心安全性，那么加密可能还不够，因为用户可以检查生成链接的代码并可能对其进行逆向工程。

您不能相信在客户端上所做的任何事情。 相反，当用户做出选择时：

用户选择某个房间后，他将入住的晚数和入住人数

将此数据保存在服务器端，并为用户提供一个 session ID（如果他们还没有 ID）。 然后当他们结帐时，您可以计算服务器端的总金额，然后以某种方式将其显示给用户。 是的，不要把它放在 URL 参数中，因为这太容易让人搞砸了，即使是无意的——但是把它放在，例如，响应获取请求，或者放在页面上的数据元素中是可行的。

当用户输入他们的支付信息并提交时，使用他们的 session ID 来确定他们选择的价格是多少。 使用这种方法，即使有人决定弄乱客户端脚本以显示其他内容，也不会影响最终价格——他们只会弄乱他们的视图（如果他们这样做，会导致任何混乱在他们身上）。

Answer 2

那是行不通的，因为您在前端进行加密和解密。

一个可行的解决方案是发送产品而不是产品的价格。 然后，当你向后台请求支付时，同时发送产品，在后台计算向用户收取多少费用。

Answer 3

我的解决方案是在链接 react-router 中传递道具

<Link to={{pathname:`/book`,state: { total_prices,title,img,price,checkkin,checkkout,idroom },}}  >

并使用我的其他 function 组件访问它们

const location = useLocation()
console.log(location.state)