轻松检测用户何时更改DOM

Question

是否可以轻松检测用户的DOM操作？

当用户在任何现代浏览器中使用控制台时,他/她可以以开发人员不想要的方式操纵DOM.

我有一个与某些状态的DOM非常相关的Web应用程序,如果用户通过控制台对DOM做任何事情,我希望得到通知.

答案:

1. 不需要与浏览器无关
2. 不需要完美.我完全理解大多数(如果不是全部)方法都可以被规避,但我想要一个很好的通用解决方案.
3. 不能太复杂.我对使用所有DOM事件注册事件处理程序不感兴趣,这些事件在我的代码执行DOM操作时检查一些标志集

编辑:

到目前为止,我收到的答案似乎有些混乱.正如上面#2中指出的那样,我知道大多数(如果不是全部)方法都可以被规避.

此外,这是一个内部工具,因此可以通过VPN进行保护.此外,还有服务器端检查.但是,有些原因,我无法详细说明,因为我想知道用户(数量很少)何时操纵DOM.

需要说明的是,这不是出于安全原因.我不想在这里阻止恶意用户.出于好奇,更多地想到这一点.

Answer 1

不要那样做.对您的网站进行编码,使其不信任用户输入,然后不关心用户的操作.如果提交了无效输入,则拒绝它.每个人都很开心.

很容易认为您拥有用户的浏览器.你没有.它只为用户的心血来潮而服务于你.

如果你真的必须知道DOM何时被修改 - 而这似乎是一个非常脆弱的设计 - 那么只需要计算校验和.在网站批准的功能的每个合法步骤之后,遍历您关注的DOM元素并记录他们的位置,值或您关注的任何内容.每隔一段时间,验证时间或下一次UI交互,进行比较.这是唯一全面的跨浏览器(包括旧浏览器)检测DOM更改的方法.现代浏览器提供DOM突变事件(请参阅Tim Down的答案以获取更多详细信息),但支持有限,显然会被另一个新事物所取代.

最终,你所做的一切都无法阻止有人决心打败你的计划.如果有的话,用户可以使用Firebug复制浏览器的POST请求,调整它,并编写一个小程序来提交他自己的恶意POST请求.保护您的服务器免受恶意输入比保护您的网页所谓的防弹更重要(因为它不会).

Answer 2

DOM 突变事件适用于所有主要浏览器的当前版本，并且可以执行您想要的操作。以下将涵盖整个文档中常见的 DOM 修改：

function handleDomChange(evt) {
    console.log("DOM changed via event of type " + evt.type);
}

document.addEventListener("DOMNodeInserted", handleDomChange, false);
document.addEventListener("DOMNodeRemoved", handleDomChange, false);
document.addEventListener("DOMCharacterDataModified", handleDomChange, false);

DOM 突变事件最终将被突变观察者取代，后者在最近的 Mozilla 和 WebKit 浏览器中实现。