Question 357542 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is this enough protection in the frontend?

Im currently working on auth in a mern stack project. I built a backend API which validates the JWT which the user has when trying to render a site.

Ill show some detailed infos here in "Pseudocode":

AS SAID BEFORE THATS NOT THE REAL SYnTAX JUST THAT YOU CAN UNDERSTAND WHAT I WANT TO ACHIEVE

Backend:
server(/auth){
validateJWT
res.json("Success")
on error res.json("Unauthorized")
}

Frontend:
Useeffect({
req.server("/auth")
if(response === "Success"){
render Page
}
else{
redirect to login
}
})

So may approach was that i use the useEffect hook of react to check if the user has a valid JWT and then render the page if so and if it isn’t valid. My problem here is that i want to make sure and understand if this is save. Are there ways to edit the js files and reload the component with the edited js files? For example lets say someone doesnt have a JWT and just edits the code as followed:

Useeffect({
req.server("/auth")
if(response === "Unauthorized"){
render Page
}
else{
redirect to login
}

will this theoratically work? and if so how is it even possible to protect the frontend admin dashboard for example?

Tags:

2

Answers


  1. 0

    Security is not frontend’s responsibility. It is backend’s responsibility. Your

    if(response === "Success")

    check is of no value in terms of security. Users can (and a malicious users will) edit JS files however they want.

    So to secure say admin dashboard you need to implement proper authorization on the backend side, and ensure that the server does not serve restricted content to unauthorized people.

    The reason you do if(response === "Success") kind of checks on the frontend side is user experience. It is only so that you can render nice graphics for users. Otherwise they would have to read raw JSONs or XMLs. Not cool. But it has nothing to do with security.

    For example lets say someone doesnt have a JWT and just edits the code as followed:

    If you don’t have JWT, then the server should not serve restricted data. A (malicious) user may still bypass if(response === "Success") check and try to render Page, but where will they get the data from? So for example you can render admin page, but of what use it is without data? It’s just empty graphics. Its like a nice book cover with empty pages inside.

    That being said, if the server does serve restricted data without JWT, then you have a huge security leak. But again: this is backend’s issue and responsibility.

    Login or Signup to reply.
  2. 0

    To avoid the described scenario, you can filter the current route from the React application, based on the response you got from the backend API. By this technique, someone would never know that this route existed. If they do know they cannot change the in the JavaScript.

    Moreover, React Js cannot keep track, of when we make changes in the downloaded JavaScipt files (In the Source tabs).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search