javascript - 轻松检测用户何时更改 DOM

Question

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

当用户在任何现代浏览器中使用控制台时，他/她可以以开发人员不希望的方式操作 DOM。

我有一个网络应用程序与处于特定状态的 DOM 密切相关，如果用户通过控制台对 DOM 执行任何操作，我希望收到通知。

答案:

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

编辑:

到目前为止，我收到的答案似乎有些困惑。正如上面 #2 中所指出的，我知道大多数(如果不是全部)方法都可以规避。

此外，这是一个内部工具，因此受到 VPN 的保护。此外，还有服务器端检查。但是，有一些我无法详细说明的原因，因为我想知道用户(数量很少)何时操纵了 DOM。

需要明确的是，这不是出于安全原因。我不想在这里阻止恶意用户。将此视为出于好奇。

Answer 1

不要那样做。将您的网站编码为不信任用户输入，然后不关心用户做什么。如果提交了无效输入，则拒绝它。大家都很开心。

很容易认为您拥有用户的浏览器。你不知道。它为您服务，但仅在用户心血来潮的情况下。

如果您真的必须知道 DOM 何时被修改——这似乎是一个非常脆弱的设计——那么只需执行相当于计算校验和的操作即可。在站点批准的功能的每个合法步骤之后，遍历您关心的 DOM 元素并记录它们的位置、值或您关心的任何内容。在间隔、验证时间或下一次 UI 交互时，进行比较。这是检测 DOM 变化的唯一全面的、跨浏览器(包括旧浏览器)的方法。现代浏览器提供 DOM 突变事件(有关更多详细信息，请参阅 Tim Down 的回答)但支持有限并且显然会被另一种新事物所取代。

最终，无论您做什么都无法阻止决心挫败您的阴谋的人。如果有的话，用户可以使用 Firebug 复制浏览器的 POST 请求，对其进行调整，然后编写一个小程序来提交他自己的恶意 POST 请求。保护您的服务器免受恶意输入比让您的网页防弹(因为它不会)更重要。