CODEWITHSUNDEEP
javascriptreactjs
Garrett Credi
Garrett Credi

Reputation: 110

Can the end-user edit a React Component's state?

Say I have a React Component like

class User extends React.Component{
  constructor(props){
    super(props);
    this.state={userId:""}
  }
  componentWillMount(){
    this.setState({userId: cookies.get('id')});
  }
  componentHasMounted(){
    getSensitiveLoginData(this.state.userId);
  }
  render(){
    return <SomeSensitiveData/>
  }
}

Would it be possible for the end-user to somehow edit the component's state? Could the end-user, in this scenario, edit the state's userId?

Upvotes: 2

Views: 1075

Answers (1)

Freeman Lambda
Freeman Lambda

Reputation: 3665

It is really easy to edit the state of a component. You do not need any ninja skills. All it takes is to install the React Dev Tools extension in Chrome for example.

With this extension, whenever you open your Dev Tools in Chrome, a new Tab appears, named React. It allows you to view the DOM as seen by React's component hierarchy. It also allows you to inspect each component individually. While inspecting a component, you can easily change it's props and/or state, through an inline-editable style GUI.

Even if it wasn't for React Dev Tools, there are always ways for the client to manipulate it's own data. As Joseph the Dreamer said in the comments, server-side validation is always a must.

Upvotes: 5

Related Questions