要实时检测特定DOM元素属性篡改，应使用MutationObserver精准监听目标元素，仅启用attributes:true、指定attributeFilter（如class/style/disabled等）并设置attributeOldValue:true；回调中须校验target、type、attributeName及新旧值差异，确认真实篡改后先disconnect，再轻量修复并重新observe。
要实时检测特定 DOM 元素的属性篡改，关键不是监听整个页面，而是让 MutationObserver 精准盯住目标元素本身，并只关注属性类变更——这样既高效，又避免被广告、埋点、轮播等正常变动干扰。
只观察目标元素，不监听 body 或 document
把观察范围缩到最小：直接选中你要保护的那个元素，比如一个支付按钮 #pay-btn 或隐私协议容器 [data-role="terms-content"]。不要用 document.body，否则每帧广告刷新、统计脚本加 class 都会触发回调，导致误报和性能损耗。
- 正确写法：
const target = document.querySelector('#pay-btn'); - 错误做法：
observer.observe(document.body, {...})—— 范围太大，噪声太多
配置 attributes + attributeFilter，聚焦可疑属性
第三方插件篡改属性，常见于修改 class（如加 hidden 或伪造样式）、style（如 display:none）、disabled、data-*（注入追踪标识）等。只需监听这些，不必开启所有选项。
- 启用
attributes: true - 指定
attributeFilter: ['class', 'style', 'disabled', 'data-tracked']（按需增减） - 加上
attributeOldValue: true，方便比对是否真的被改了——比如原来disabled=""，现在被清空，就属于高危操作
在回调里做轻量判定，识别真实篡改
收到 mutation 记录后，别急着响应，先快速验证是不是你关心的改动：
立即学习“前端免费学习笔记（深入）”；
- 确认
mutation.target === target，排除子元素或无关节点触发 - 检查
mutation.type === 'attributes'且mutation.attributeName在你关注的列表里 - 用
target.getAttribute(mutation.attributeName)和旧值（来自mutation.oldValue）对比，确认是否发生实质性修改 - 例如：发现
class从"btn primary"变成"btn primary tampered"，就可判定为异常
安全响应，避免死循环和副作用
一旦确认是恶意篡改，修复动作必须克制、可控：
- 先调用
observer.disconnect()，防止修复操作再次触发回调 - 优先恢复单个属性：
target.setAttribute('class', 'btn primary')，而不是重写整个 innerHTML - 修复完再调用
observer.observe(target, config)恢复监听 - 如果篡改高频（比如客服 SDK 每秒改 style 多次），可加简单节流：记录上次处理时间，100ms 内重复变更暂不响应
