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

Question

In web development it's quite popular idea to create the element with fixed position and transparent background color which covers the whole page until the user interacts somehow (by accepting consent or paying for the service). Then the element is removed and user can use the web page.

Here's the example:

However user can remove the element manually, using dev tools in the browser.

Is there any way to prevent it? Is it possible to disallow some particular element to be deleted?

Answer 1

You can't.

The browser belongs to the user and is completely under their control.

If you don't want to provide them with something before they accept terms, then don't send the something to the browser until they have.

Answer 2

This is not possible. You can make it harder for the user to get around it, but you can't prevent them from removing it from the page.

I've seen websites use a lot of different solutions for making it harder to get around, ranging from locking the scrolling of the page to fully removing the content behind the pop up, but ultimately you can't prevent the user from modifying the DOM.

Answer 3

You need to add control server side. Your user can control the data they receive. Don't send the data if you don't want them to access data.

Answer 4

As far as it seems to be impossible to prevent the user from removing an element it is possible to detect the element removal.

The MutationObserver API allows us to detect changes of a particular DOM element.

Here's example by 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});

When the element is removed we can of course add it again or redirect to error page indicating that any manipulations of the page are illegal.

In particular the deletion of the element is easy with this React extension . If we use React then we can just wrap the element we want to prevent from being deleted in the component:

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

...

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