将数据库行唯一ID设为HTML元素id属性是否为不良实践及有安全风险？

API 探路者

2026-7-3

问题解答

这种做法算不算不良实践？

不算绝对的不良实践，不少项目为快速实现功能都会采用类似方案，但存在可优化的点和潜在风险。

潜在安全风险

权限校验缺失风险：即便做了ID格式与长度验证，如果后端没校验当前用户是否有权限操作该ID对应的条目，攻击者可通过开发者工具获取其他条目ID，构造请求删除不属于自己的内容——ID格式验证完全不能替代权限控制，这是最核心的风险。
ID泄露的信息风险：如果ID是自增整数这类可猜测的格式，攻击者能通过公开的DOM ID推断系统条目数量，甚至批量猜测其他用户的条目ID进行恶意操作；就算是UUID这类随机ID，若ID本身嵌入了业务敏感信息，也会造成信息泄露。
DOM命名空间冲突：如果ID和第三方库、页面其他元素的ID重名，可能导致DOM操作异常，比如getElementById获取到错误元素。

替代方案

使用data-*属性存储ID：把ID放在自定义数据属性里，语义更清晰，也不会和DOM的ID命名空间冲突，示例：
```
<div data-item-id="UniqueIdOfItem1">Item 1</div>
```
删除时通过event.currentTarget.dataset.itemId即可获取ID。

React组件内部维护数据：不从DOM读取ID，而是在列表项组件中直接持有条目数据，删除时直接从组件props/state中获取ID，更符合React数据流逻辑：

// 列表项组件
const TodoItem = ({ todo, onDelete }) => {
  return (
    <div onClick={() => onDelete(todo.id)}>
      {todo.content}
    </div>
  );
};

// 列表渲染
{todos.map(todo => (
  <TodoItem key={todo.id} todo={todo} onDelete={handleDelete} />
))}