使用DB行的唯一ID并将其设置为html ID属性是不好的做法吗?

noj0wjuj  于 2024-01-04  发布在  其他
关注(0)|答案(2)|浏览(143)

为了简单起见,我在React中创建了一个从DB中提取的项目列表。其中一部分是我们可以删除/添加项目到列表中,我也想在DB中反映出来。
在创建项目时,我为它生成一个唯一的id并存储在DB中,然后当呈现列表时,我将其生成的唯一id设置为div中的id属性。因此,当用户选择要删除的项目时,我可以引用id属性并Map回我的DB以进行删除。
我还将在访问数据库之前验证唯一ID的格式/长度是否正确,以防止mysql注入。
例如:

  1. <div>
  2. <div id='UniqueIdOfItem1'
  3. Item 1
  4. </div>
  5. <div id='UniqueIdOfItem2'
  6. Item 2
  7. </div>
  8. <div id='UniqueIdOfItem3'
  9. Item 3
  10. </div>
  11. </div

字符串
这是一个不好的做法吗?和安全风险?如果是的话,还有什么其他的选择可以去?

yx2lnoni

yx2lnoni1#

不,这不是一个坏的做法,相反,这是一个很好的做法,因为react需要一个.map ped数组具有唯一标识符。
然而,你所建议的方式并不是一种真正的React方式。
在react中,不建议直接引用HTML属性,但我们可以handle做一些不同的事情。在react中,我们可以将这个唯一标识符作为key传递到Map数组上,并将handler添加到元素中。
对于您的示例,这可能类似于:

  1. const MyReactComponent = () => {
  2. const [myData, setMyData] = useState()
  3. const handleItemSelect = useCallback((item) => {
  4. console.log("selected ", item)
  5. }, [])
  6. useEffect(() => {
  7. fetch(HTTP://my.api)
  8. .then(data => {
  9. setMyData(data)
  10. })
  11. .catch(console.warn)
  12. }, [])
  13. return (
  14. <div>
  15. {myData.map((item, index) => (
  16. <div key={item.id} onClick={event => handleItemSelect(item)}>
  17. item {index}
  18. </div>
  19. ))}
  20. </div>
  21. )
  22. }

字符串

展开查看全部
xggvc2p6

xggvc2p62#

在HTML属性(如“id”)中存储重要或机密信息(如唯一标识符)会带来安全隐患,因为它会直接在客户端标记中暴露潜在的有价值数据。这可能导致安全漏洞,因为恶意用户可以操纵或猜测这些值,以获得未经授权的访问或在应用程序中执行意外操作。在服务器端进行操作,您可以在其中实施适当的身份验证、授权和验证机制,以保证数据完整性并防范安全风险。

相关问题