0

So in my case, after a user chooses a certain room, the number of nights he will stay and the number of guests, the price gets calculated (depending on certain factors) and then they are redirected to the payment page where they will see the total price, which the user can change by manipulating the price parameter in the url.

on the booking page :

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

and on the paiment page i am using

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

and then i get the parameter using

params.get('price')

The solution i found is to encrypt the content of the Url parameter and then decrypt it. Is the solution effective enough or are there other ways to implement it?

Charfeddine Mohamed Ali
  • 943
  • 2
  • 14

3 Answers3

1

Anything on the client can potentially be intercepted and manipulated by someone interested enough. Encryption likely isn't enough if you're really worried about security because the user could examine the code that generates the link and perhaps reverse-engineer it.

You can't trust anything done on the client. Instead, when the user makes their choices:

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

Save this data server-side, and give the user a session ID if they don't already have one. Then when it comes time for them to check out, you can calculate the total server-side, and then show it to the user somehow. Yeah, don't put it in URL parameters, because that's too easy for someone to mess up, even unintentionally - but putting it, for example, in response to a fetch request, or in a data element on the page would work.

When the user enters their payment info and submits it, use their session ID to determine what the price for what they chose was. Using this approach, even if someone decides to mess with the client-side script to display something else, it won't affect the final price - they'll only be messing up their view (and if they do that, any confusion that results is on them).

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • putting it, for example, in response to a fetch request .. Can you explain this further please . – Charfeddine Mohamed Ali Apr 06 '22 at 22:23
  • 1
    On the checkout page, do: `fetch(getPriceURL).then(res => res.json()).then((priceResult) => { /* do stuff with priceResult */ })` - where `getPriceURL` is an endpoint set up on your server to calculate the price given the user's session – CertainPerformance Apr 06 '22 at 23:53
0

That isn't going to work, since you are encrypting and decrypting on the frontend.

A viable solution would be to send the products instead of the price of the products. Then, when you send the request to the backend for payment, also send the products, and in the backend calculate how much to charge the user.

sean-7777
  • 700
  • 4
  • 13
  • the problem is i am fetching the rooms / availability and the prices in the booking page ( using an api) . Also passing values this way https://stackoverflow.com/questions/71471833/set-value-on-a-click-button-from-a-function-component-to-another-const-component is not possible in my case – Charfeddine Mohamed Ali Apr 06 '22 at 22:19
0

My solution was to pass props in link react-router

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

and access them in my other function component using

const location = useLocation()
console.log(location.state)
Charfeddine Mohamed Ali
  • 943
  • 2
  • 14