Stop Scammers Changing Webpages From Browser Devtool – DOM Guard

Preview:

Description:

DOM Guard is a JavaScript library created to stop the browser’s devtool from modifying elements to prevent fraudsters from scamming by forging your web page.

It uses MutationObserver API to watch for changes being made to the DOM tree and automatically restores the original value after a period of time.

See Also:

• Protect Your Site By Disabling The Browser Devtool (F12) – console-ban

How to use it:

1. Install and import the DOM Guard as an ES module.

# NPM
$ npm i dom-guard

import DOMGuard from 'dom-guard'

2. Or download the library and insert the dom-guard.umd.js into the document.

<script src="dist/dom-guard.umd.js"></script>

3. Create a new instance of the DOM Guard and specify the element to be protected.

<h1 id="protected">You can not change this element</h1>

const guard = new DOMGuard({
      selector: '#protected',
      heartbeat: 1000 // check every 1 second
})

4. Initialize the DOM Guard and done.

guard.init()

5. Disable the DOM Guard.

guard.disable()