如何利用 MutationObserver 监控并防止恶意浏览器脚本修改网页中受法律保护的内容声明

在网站安全防护中，版权声明、法律条款等受法律保护的内容极易成为恶意脚本的攻击目标。如何有效监控并防止这些关键信息被篡改或隐藏？原生 JavaScript 提供的 MutationObserver API 是一个强大的解决方案，但配置不当可能导致性能问题甚至防御失效。本文将详细解析如何精准配置 MutationObserver，实现对受保护内容的可靠监控与自动修复。

精准定位法律声明容器的 DOM 变更监控

核心原则是：精确监控，避免全局监听。绝对不要直接监听 document.body 或整个 document 对象。原因在于，全局监听会捕获页面所有无关的 DOM 变动，导致误报率飙升、页面性能严重下降。更危险的是，攻击者可能利用你的监听逻辑，故意触发大量 DOM 变更以制造无限循环，最终导致浏览器崩溃。

实际应用中，法律声明通常位于一个具有特定标识的容器内，例如 id="legal-notice" 或 class="copyright-text"。最佳实践是首先使用 document.querySelector 精准获取该容器元素的引用，再将其作为 MutationObserver 的监控目标。

const noticeEl = document.querySelector('#legal-notice') ||
                  document.querySelector('.copyright-statement');
if (!noticeEl) return; // 容器不存在，不启动监控

这里有一个关键细节：应尽量避免依赖由第三方库动态生成、可能变化的类名（例如包含时间戳或随机哈希值的类名）。优先选择语义明确、长期稳定的 id 属性，或使用自定义的 data-* 属性（如 data-protected="copyright"）来定位元素，以确保监控目标的持久稳定性。

优化配置：只订阅关键的变更类型

恶意脚本篡改受保护内容的手法通常有限：直接修改文本、删除节点、注入广告元素，或通过样式隐藏内容。我们的监控配置应针对这些“高风险操作”，关闭不必要的监听选项以最大化性能。

• childList: true —— 必须启用。用于监控子节点的添加与移除，例如整个声明区块被替换为广告