如何禁止用户从DOM手动删除HTML元素？

Question

在Web开发中，创建具有固定位置和透明背景颜色的元素是非常流行的想法，该元素覆盖整个页面，直到用户以某种方式进行交互（通过接受同意或支付服务）。 然后删除该元素，用户可以使用该网页。

这是一个例子：

但是，用户可以使用浏览器中的dev工具手动删除元素。

有什么办法可以预防吗？ 是否可以禁止某些特定元素被删除？

Answer 1

你不能。

浏览器属于用户，完全由他们控制。

如果您不想在接受条款之前向他们提供某些内容，那么在他们拥有之前不要将内容发送到浏览器 。

Answer 2

这是不可能的。 您可以让用户更难以绕过它，但是您无法阻止它们从页面中删除它。

我已经看到网站使用了许多不同的解决方案，使其更难以解决，从锁定页面的滚动到完全删除弹出窗口后面的内容，但最终你无法阻止用户修改DOM 。

Answer 3

您需要添加控制服务器端。 您的用户可以控制他们收到的数据。 如果您不希望他们访问数据，请不要发送数据。

Answer 4

就防止用户移除元素似乎是不可能的，可以检测元素移除。

MutationObserver API允许我们检测特定DOM元素的更改。

以下是Jakub Jankiewicz的例子

var in_dom = document.body.contains(element);
var observer = new MutationObserver(function(mutations) {
    if (document.body.contains(element)) {
        if (!in_dom) {
            console.log("element inserted");
        }
        in_dom = true;
    } else if (in_dom) {
        in_dom = false;
        console.log("element removed");
    }

});
observer.observe(document.body, {childList: true});

当元素被删除时，我们当然可以再次添加它或重定向到错误页面，指示对页面的任何操作都是非法的。

特别是使用此React扩展可以轻松删除元素。 如果我们使用React，那么我们可以将我们想要阻止的元素包装在组件中：

import { WatchForRemoval } from 'react-mutation-observer';

...

<WatchForRemoval onRemoval={console.log.bind(null, 'Child removal triggered.')}>
  <div>
    Removing this element will trigger callback
  </div>
</WatchForRemoval>