I am trying to secure checkbox in Reactjs to only authorized users with following method but problem is that if someone want can change state from false to true in dev tool and bypass security. the checkbox is in table having more than 100s of rows, for every row there is a checkbox. at the moment I check against the state of isAuthorized, if false I disable checkbox and it is working fine but can be changed in Dev tool. I also tried by calling a function for every table row to check API if authorized but problem is there is 100s of calls to API for every row grateful for any suggestion to help me with this problem. much appreciated. PS. I checked google and all information is about route security and couldn't find anything relate to my problem.

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";
import { useLocation } from "react-router-dom";

const WorkList = (props) => {

  const [isAuthorized, setIsAuthorized] = useState(false);

  useEffect(() => {
    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        EMPID: "2514",
      }),
    };
    fetch(
      `https://api......`,
      requestOptions
    )
      .then((response) => response.json())
      .then((responseJSON) => {
        setIsAuthorized(responseJSON);
      });
  }, []);


  ///////////////////////////////////////////////////////////Map Data In Table//////////////////////////////////////////////////////////

    return (
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Done </th>
              </tr>
            </thead>
            <tbody>
              {items.map((item) => (
                <tr key={item.Name}>
                  <td>{item.IsDone}</td>
                  <td>
                    {isAuthorized ? (<input type="checkbox" />) :
                     (<input type="checkbox" disabled />)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
    );
};

export default WorkList;

CodePudding user response：

Client side validation of user input is necessary but will never be sufficient. You should always check user input on the server-side as well. Your issue is one of the example as to why it is not sufficient.

Sadly there is nothing you can do to prevent it. Someone with malicious intent will always be able to counteract the mesures you take on the client side.

You should validate that the user is authorized to make the change on the server.

However, client-side validation should not be considered an exhaustive security measure! Your apps should always perform security checks on any form-submitted data on the server-side as well as the client-side, because client-side validation is too easy to bypass, so malicious users can still easily send bad data through to your server.

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

Here are a few links if you want to learn more about authorization token and JWT: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization

https://jwt.io

CodePudding user response：

1 what SamiElk commented, but outside of the fact that you should validate this input on both the client and server side, a cleaner way to do it would be to retrieve the authorization status of the user in a parent component, and pass it down to this component here as a prop, instead of initializing it as state. Furthermore, if you're running a production build of React on your application (as you should be, since it trims out the irrelevant developer and debugging functionality), then they can't use the React devtools directly to change the state's value.