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?

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?

• javascript
• html

• No, the user ultimately has control over the page contents, you won't be able to disallow dev tools. This is by design. – Romain Valeri Commented Jul 23, 2018 at 8:43
• No it's not preventable. Anything you send to the client can be modified. – Ben Fortune Commented Jul 23, 2018 at 8:43
• Why do you need that though? I mean, if it's pulsory to do some step before seeing the page it should be done with a separate page which doesn't allow the user to proceed until a valid input has been provided. In your specific case I would just leave it as it is: if the user deletes the node from DevTools, he will get the popup again as soon as he reloads the page/changes page. So, don't worry about that. – BackSlash Commented Jul 23, 2018 at 8:47

4 Answers 4

You can't.

The browser belongs to the user and is pletely 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.

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 ponent:

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

...

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

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.

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.