Question 309077 in Html Question posted in
Some basic documentation can be found here.

Is it bad practice to use unique id of DB row and setting it at html id attriburte?

To keep it simple, I’m creating a list of of items in React that are pulled from the DB. Part of this is that we can delete/add items to the list, which i also want to reflect in the DB.

On creation of the item, I am generating a unique id for it and storing in the DB, and then when the list is rendered, I’m setting it’s generated unique id as the id attribute in the div. So, upon user selecting that item to be deleted, i can just reference the id attribute and map back to my DB for removal.

I’ll also validate that the unique ID is coming in correct format/length before hitting the DB to prevent mysql injection.

for ex:

<div>

   <div id='UniqueIdOfItem1'
      Item 1
   </div>

   <div id='UniqueIdOfItem2'
      Item 2
   </div>

   <div id='UniqueIdOfItem3'
      Item 3
   </div>

</div

Is this a bad practice? And security risk? If so, what other options could go with?

Tags:

2

Answers


  1. 0

    No this is not a bad practice, in the contrary it is a good practice as react requires a .mapped array to have unique identifiers.

    However, the way you are suggesting is not really a reacty way.

    In react it is not recommended to refer directly to HTML attributes but we can handle things a bit different. In react we can pass this unique identifier as a key on your mapped array and add a handler to the element.

    For your example this could be similar to:

    const MyReactComponent = () => {
  const [myData, setMyData] = useState()

  const handleItemSelect = useCallback((item) => {
    console.log("selected ", item)
  }, [])

  useEffect(() => {
    fetch(HTTP://my.api)
    .then(data => {
      setMyData(data)
    })
    .catch(console.warn)
  }, [])

  return (
   <div>
    {myData.map((item, index) => (
      <div key={item.id} onClick={event => handleItemSelect(item)}>
        item {index}
      </div>
    ))}
   </div>
  )
}
    Login or Signup to reply.
  2. 0

    Storing important or confidential information, such as unique identifiers, in HTML attributes like "id" presents a security hazard as it exposes potentially valuable data directly in the client-side markup. This can result in security vulnerabilities, as malicious users can manipulate or guess these values to gain unauthorized access or carry out unintended actions within your application. It is crucial to maintain sensitive data and data management operations on the server-side, where you can enforce proper authentication, authorization, and validation mechanisms to guarantee data integrity and safeguard against security risks.

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

Back To Top
Search