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

Question

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

这里是例子：

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

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

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});

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

使用this React extension尤其容易删除元素。如果我们使用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>