6

I have two components. One component that the user must use to login and one component to show some content.

I was thinking of implementing my application by having one component that has some react state that tells it to render either the login component or the other one.

If I do this, would it be possible for on the client-side to manually set the state so that the login screen is bypassed and the content is shown?

EDIT: Added some example code.

render () { if (this.state.authorized) { return <Content /> } else { return <Login /> } }

With this code in mind, given that only the <Login /> component is capable of setting the authorized state to true, is it possible for the client-side to simply get around this by manually setting the state somehow? For example through the chrome react dev tools or something?

Ogen
  • 6,499
  • 7
  • 58
  • 124
  • Client-side JS is insecure by design. Everything that runs in browser can be tampered and exploited by a user. Authorization and authentication should be performed on server side. – Estus Flask Sep 20 '18 at 03:21
  • The actual authentication WILL be performed on the server side. The login component will call a server. But my question is mainly about the client side rendering - can the client-side simply change the react state so that the login component isn't rendered AT ALL. – Ogen Sep 20 '18 at 03:22
  • Yes. It will show content component that isn't filled with data. Because data wasn't provided by the backend for unauthorized users. – Estus Flask Sep 20 '18 at 03:24
  • @estus I added an edit for some code. – Ogen Sep 20 '18 at 03:29

1 Answers1

3

Client-side JavaScript isn't secure by design, i.e. user has full control over the script that runs in user's browser. Considering that a user has enough access rights locally, the code always can be read and modified. Security measures that are applicable to client-side code only make this process more complicated.

This isn't unrelated to security, as long as the access to sensitive data is controlled by the backend.

It's certainly possible to change component state and show a component that wasn't supposed to be shown. For instance, React dev tools can be used for this demo to set authorized to true:

state tampering

A user basically ruins own experience with the application. A blank component will be shown without sensitive data because a user skipped backend authentication process.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • So is there any way around my problem? – Ogen Sep 20 '18 at 03:57
  • What exactly is the problem? There is no security problem if this was the question. – Estus Flask Sep 20 '18 at 03:59
  • Oh sorry, so you're saying as long as everything that the login screen is protecting also has security behind it then there is no security issue? – Ogen Sep 20 '18 at 04:33
  • 1
    That's correct. This is the only choice we have, considering that a user has full control over the script that is evaluated in his/her browser. – Estus Flask Sep 20 '18 at 04:37