避免 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

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

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

Answer 2

客户端上的任何东西 都可能被足够感兴趣的人拦截和操纵。如果您真的担心安全性，加密可能还不够，因为用户可以检查生成 link 的代码，也许 reverse-engineer 它。

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

after a user chooses a certain room, the number of nights he will stay and the number of guests

保存此数据server-side，并为用户提供一个会话 ID（如果他们还没有会话 ID）。然后当他们结帐时，您可以计算总数 server-side，然后以某种方式将其显示给用户。是的，不要把它放在 URL 参数中，因为这太容易让人搞砸了，甚至是无意的 - 但是把它放在例如响应获取请求或页面上的数据元素中会工作。

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

Answer 3

我的解决方案是在 link react-router

中传递道具

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

并使用

在我的其他功能组件中访问它们

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

避免 URL 参数操作

Avoid URL parameter Manipulation

javascript

parameters

url

variable-assignment

reactjs