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

时间:2018-07-23 08:41:52

标签: javascript html

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

这里是例子:

enter image description here

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

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

4 个答案:

答案 0 :(得分:8)

你不能。

浏览器属于用户,并且完全在他们的控制之下。

如果您不希望在他们接受条款之前向他们提供某些东西,那么在他们同意之前,不要将它们发送给浏览器

答案 1 :(得分:1)

这是不可能的。您可以使用户更难以绕开它,但不能阻止他们将其从页面中删除。

我已经看到网站使用许多不同的解决方案来使访问变得更困难,从锁定页面滚动到完全删除弹出窗口后的内容,但最终您不能阻止用户修改DOM。

答案 2 :(得分:0)

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

答案 3 :(得分:0)

在似乎无法阻止用户删除元素的情况下,有可能检测到元素删除。

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>