├── netlify.toml
├── package.json
├── README.md
├── .gitignore
├── index.js
└── index.html


/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "npm run build"
3 |   publish = "./"


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dom-guard",
 3 |   "version": "0.0.3",
 4 |   "description": "Protect DOM nodes from tampering",
 5 |   "source": "index.js",
 6 |   "main": "dist/dom-guard.js",
 7 |   "exports": "./dist/dom-guard.modern.js",
 8 |   "module": "dist/dom-guard.module.js",
 9 |   "unpkg": "dist/dom-guard.umd.js",
10 |   "files": [
11 |     "index.js",
12 |     "README.md",
13 |     "dist"
14 |   ],
15 |   "scripts": {
16 |     "build": "microbundle --name DOMGuard",
17 |     "dev": "microbundle watch",
18 |     "serve": "serve .",
19 |     "publish": "git push origin && git push origin --tags",
20 |     "release:patch": "npm version patch && npm publish",
21 |     "release:minor": "npm version minor && npm publish",
22 |     "release:major": "npm version major && npm publish"
23 |   },
24 |   "homepage": "https://github.com/DavidWells/dom-guard#readme",
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "https://github.com/DavidWells/dom-guard"
28 |   },
29 |   "keywords": [
30 |     "dom",
31 |     "security"
32 |   ],
33 |   "author": "DavidWells",
34 |   "license": "MIT",
35 |   "devDependencies": {
36 |     "microbundle": "^0.13.0",
37 |     "serve": "^11.3.2"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # DOM Guard
 2 | 
 3 | Stop scammers from the manipulating DOM. [See demo](https://dom-guard.netlify.app)
 4 | 
 5 | ## About
 6 | 
 7 | Scammers are using dev tools to manipulate values in pages to trick unsuspecting victims into sending them money. These victims are typically the elderly. 😢
 8 | 
 9 | They connect to their victim's machines via remote desktop software under the guise of tech support or some other well known company.
10 | 
11 | The scammer then attempts to convince the victim they have received a larger than expected "refund" by manipulating the victim's bank user interface via chrome dev tools with the goal of getting the victim to mail them cash.
12 | 
13 | See this video for [how the refund scams work](https://www.youtube.com/watch?v=J4mkZU2Y0as).
14 | 
15 | DOMGuard is a small javascript library (~130 lines of code) & proof of concept to help put an end to these criminals.
16 | 
17 | ## How does this work?
18 | 
19 | Any changes attempted via Javascript are detected by MutationObserver.
20 | 
21 | Additionally, guarded DOM nodes are checked via a "hearbeat" every `500ms` to ensure the values are what they should be.
22 | 
23 | View the <a href="https://github.com/DavidWells/dom-guard/blob/master/index.js">source code</a>.
24 | 
25 | ## Install
26 | 
27 | ```bash
28 | npm install dom-guard
29 | ```
30 | 
31 | ## Usage
32 | 
33 | ```js
34 | import DOMGuard from 'dom-guard'
35 | 
36 | const guard = new DOMGuard({
37 |   selector: '#protected', // DOM Selector to protect
38 |   heartbeat: 1000 // Check for manipulation every 1 second
39 | })
40 | 
41 | // Initialize DOMGuard on the #protected selector
42 | guard.init()
43 | 
44 | // Turn off guard
45 | guard.disable()
46 | ```
47 | 
48 | ## Running the demo
49 | 
50 | ```bash
51 | npm install
52 | npm run build
53 | npm run serve
54 | ```
55 | 
56 | ## Caveats
57 | 
58 | Please note, there isn't a foolproof solution for stopping social engineering attacks against your users.
59 | 
60 | Please educate your users on the dangers of these scams & add 2FA etc into your apps.


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | 
  8 | # Runtime data
  9 | pids
 10 | *.pid
 11 | *.seed
 12 | *.pid.lock
 13 | 
 14 | dist
 15 | 
 16 | # Directory for instrumented libs generated by jscoverage/JSCover
 17 | lib-cov
 18 | 
 19 | # Coverage directory used by tools like istanbul
 20 | coverage
 21 | 
 22 | # nyc test coverage
 23 | .nyc_output
 24 | 
 25 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 26 | .grunt
 27 | 
 28 | # Bower dependency directory (https://bower.io/)
 29 | bower_components
 30 | 
 31 | # node-waf configuration
 32 | .lock-wscript
 33 | 
 34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 35 | build/Release
 36 | 
 37 | # Dependency directories
 38 | node_modules/
 39 | jspm_packages/
 40 | 
 41 | # TypeScript v1 declaration files
 42 | typings/
 43 | 
 44 | # Optional npm cache directory
 45 | .npm
 46 | 
 47 | # Optional eslint cache
 48 | .eslintcache
 49 | 
 50 | # Optional REPL history
 51 | .node_repl_history
 52 | 
 53 | # Output of 'npm pack'
 54 | *.tgz
 55 | 
 56 | # Yarn Integrity file
 57 | .yarn-integrity
 58 | 
 59 | # dotenv environment variables file
 60 | .env
 61 | .env.test
 62 | 
 63 | # parcel-bundler cache (https://parceljs.org/)
 64 | .cache
 65 | 
 66 | # next.js build output
 67 | .next
 68 | 
 69 | # nuxt.js build output
 70 | .nuxt
 71 | 
 72 | # vuepress build output
 73 | .vuepress/dist
 74 | 
 75 | # Serverless directories
 76 | .serverless/
 77 | 
 78 | # FuseBox cache
 79 | .fusebox/
 80 | 
 81 | # DynamoDB Local files
 82 | .dynamodb/
 83 | 
 84 | # General
 85 | .DS_Store
 86 | .AppleDouble
 87 | .LSOverride
 88 | 
 89 | # Icon must end with two \r
 90 | Icon
 91 | 
 92 | 
 93 | # Thumbnails
 94 | ._*
 95 | 
 96 | # Files that might appear in the root of a volume
 97 | .DocumentRevisions-V100
 98 | .fseventsd
 99 | .Spotlight-V100
100 | .TemporaryItems
101 | .Trashes
102 | .VolumeIcon.icns
103 | .com.apple.timemachine.donotpresent
104 | 
105 | # Directories potentially created on remote AFP share
106 | .AppleDB
107 | .AppleDesktop
108 | Network Trash Folder
109 | Temporary Items
110 | .apdiske


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 |  // inServer for SSR support
  2 |  const inServer = typeof window === 'undefined'
  3 | 
  4 |  class DOMGuard {
  5 |   constructor(opts = {}) {
  6 |     this.detachListener = () => {}
  7 |     if (inServer) {
  8 |       return
  9 |     }
 10 | 
 11 |     const originalElement = document.querySelector(opts.selector)
 12 |     if (!originalElement) {
 13 |       throw new Error(`Selector "${opts.selector}" not found`)
 14 |     }
 15 |     this.opts = opts
 16 |     this.selector = opts.selector
 17 |     this.initialText = normalizeText(originalElement.innerText)
 18 |     this.originalParent = originalElement.parentNode
 19 |     this.stashedClone = originalElement.cloneNode(true)
 20 |   }
 21 |   init() {
 22 |     /* Detect changes to any selector instantly */
 23 |     const detachListener = domGuard({
 24 |       selector: this.selector,
 25 |       initialText: this.initialText,
 26 |       stashedClone: this.stashedClone,
 27 |       originalParent: this.originalParent,
 28 |     })
 29 |     /* Heartbeat to listen for changes via dev tools */              
 30 |     const heartbeat = setInterval(function () {
 31 |       restoreDom({
 32 |         selector: this.selector,
 33 |         initialText: this.initialText,
 34 |         stashedClone: this.stashedClone,
 35 |         originalParent: this.originalParent,
 36 |       })
 37 |     }.bind(this), this.opts.heartbeat || 500)
 38 |     
 39 |     this.detachListener = () => {
 40 |       clearInterval(heartbeat)
 41 |       detachListener()
 42 |     }
 43 |     /* Detach listener */
 44 |     return this.detachListener
 45 |   }
 46 |   disable() {
 47 |     this.detachListener()
 48 |   }
 49 | }
 50 | 
 51 | function domGuard(apiOpts) {
 52 |   const { selector, initialText, originalParent, stashedClone, debug } = apiOpts
 53 |   /* attach observer to parent element */
 54 |   let detachListener = observeDOM(originalParent, function(m) {
 55 |     var addedNodes = [], removedNodes = [];
 56 |     m.forEach(record => record.addedNodes.length & addedNodes.push(...record.addedNodes))
 57 |     m.forEach(record => record.removedNodes.length & removedNodes.push(...record.removedNodes))
 58 |     if (debug) {
 59 |       console.log('addedNodes:', addedNodes)
 60 |       console.log('removedNodes:', removedNodes)
 61 |     }
 62 |     if (addedNodes.length || removedNodes.length) {
 63 |       /* Disable listener to avoid infinite loop */
 64 |       detachListener()
 65 |       /* Immediately restore DOM */
 66 |       restoreDom({ selector, initialText, stashedClone, originalParent })
 67 |       /* Reattach observeDOM Javascript listener */
 68 |       detachListener = domGuard(apiOpts)
 69 |     }
 70 |   })
 71 |   return detachListener
 72 | }
 73 | 
 74 | function normalizeText(str) {
 75 |   return str
 76 |     .split('\n')
 77 |     .map((x) => x.trim())
 78 |     .filter((x) => Boolean(x))
 79 |     .join('\n')
 80 | }
 81 | 
 82 | function restoreDom({ selector, initialText, originalParent, stashedClone, debug }) {
 83 |   if (inServer) return
 84 |   currentElement = document.querySelector(selector)
 85 |   if (!currentElement) return
 86 | 
 87 |   if (debug) {
 88 |     console.log(`────${selector}────`)
 89 |     console.log('currentElement', currentElement)
 90 |     console.log('stashedClone', stashedClone)
 91 |   }
 92 | 
 93 |   // const originalText = originalElement.innerText
 94 |   const currentElementText = normalizeText(currentElement.innerText)
 95 |   const stashedCloneText = normalizeText(stashedClone.innerText)
 96 |   if (debug) {
 97 |     console.log(`initialText:    "${initialText}"`)
 98 |     console.log(`currentText:    "${currentElementText}`)
 99 |     console.log(`persistedText:  "${stashedCloneText}"`)
100 |   }
101 | 
102 |   if (currentElementText !== initialText) {
103 |     if (stashedCloneText === initialText) {
104 |       if (debug) {
105 |         console.log('DOM has changed! Reset it!')
106 |       }
107 |       const dirtyNode = stashedClone.cloneNode(true)
108 |       /* Replace altered DOM with cloned original */
109 |       originalParent.replaceChild(dirtyNode, currentElement)
110 |     }
111 |   }
112 | }
113 | 
114 | function observeDOM(element, callback) {
115 |   if (inServer) return
116 |   if (!element || element.nodeType !== 1) return
117 | 
118 |   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver
119 |   if (MutationObserver) {
120 |     // define a new observer
121 |     var mutationObserver = new MutationObserver(callback)
122 |     // have the observer observe foo for changes in children
123 |     mutationObserver.observe(element, { childList: true, subtree: true })
124 |     // Cleanup mutationObserver
125 |     return () => {
126 |       mutationObserver.disconnect()
127 |     }
128 |   } else if (window.addEventListener) {
129 |     // browser support fallback
130 |     element.addEventListener('DOMNodeInserted', callback, false)
131 |     element.addEventListener('DOMNodeRemoved', callback, false)
132 |     // Cleanup
133 |     return () => {
134 |       element.removeEventListener('DOMNodeInserted', callback)
135 |       element.removeEventListener('DOMNodeRemoved', callback)
136 |     }
137 |   }
138 | }
139 | 
140 | export default DOMGuard


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html class="no-js" lang="">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <title>DOM Guard</title>
  7 |     <meta name="description" content="DOMGuard - Stop scammers from the manipulating DOM">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <script type="application/javascript" src="./dist/dom-guard.umd.js"></script>
 10 |     <style>
 11 |       body {
 12 |         margin: 28px 48px;
 13 |         margin-bottom: 10px;
 14 |         font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
 15 |         line-height: 1.75rem;
 16 |       }
 17 |       .content {
 18 |         display: flex;
 19 |       }
 20 |       .content-left {
 21 |         margin-right: 60px;
 22 |         min-width: 740px;
 23 |       }
 24 |       .content-left p {
 25 |         max-width: 660px;
 26 |       }
 27 |       #protected, #large-div div {
 28 |         color: green;
 29 |         font-weight: bold;
 30 |         font-size: 20px;
 31 |       }
 32 |       .pointer {
 33 |         font-size: 36px;
 34 |         display: inline-block;
 35 |         position: relative;
 36 |       }
 37 |       .pointer span {
 38 |         position: relative;
 39 |         top: 7px;
 40 |         left: 10px;
 41 |       }
 42 |       .github-corner svg {
 43 |         height: 80px;
 44 |         width: 80px;
 45 |         fill: #151513;
 46 |         color: #fff;
 47 |         position: absolute;
 48 |         top: 0;
 49 |         border: 0;
 50 |         right: 0
 51 |       }
 52 |       .github-corner:hover .octo-arm {
 53 |         animation: octocat-wave .56s ease-in-out
 54 |       }
 55 |       @keyframes octocat-wave {
 56 |         0%,to { transform: rotate(0) }
 57 |         20%,60% { transform: rotate(-25deg) }
 58 |         40%,80% { transform: rotate(10deg) }
 59 |       }
 60 |       @media (max-width: 720px) {
 61 |         .content, .content-left, iframe {
 62 |           flex-direction: column;
 63 |           max-width: 100%;
 64 |           min-width: 100%;
 65 |         }
 66 |         
 67 |         h1 { font-size: 24px; }
 68 |         #protected, #large-div div {
 69 |           font-size: 18px;
 70 |         }
 71 |         .github-corner svg {
 72 |           height: 60px;
 73 |           width: 60px;
 74 |         }
 75 |       }
 76 |       @media (max-width: 500px) {
 77 |         .github-corner:hover .octo-arm { animation:none }
 78 |         .github-corner .octo-arm { animation: octocat-wave .56s ease-in-out }
 79 |       }
 80 |     </style>
 81 |   </head>
 82 |   <body>
 83 |     <!--[if lt IE 8]>
 84 |       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
 85 |     <![endif]-->
 86 |     <a href="https://github.com/DavidWells/dom-guard" class="github-corner" aria-label="View source on GitHub"><svg viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
 87 |     <h1>DOMGuard - Stop scammers from the manipulating DOM</h1>
 88 |     <div class='content'>
 89 |       <div class='content-left'>
 90 |         <div class='about'>
 91 |           <p>
 92 |             Scammers are using dev tools to manipulate values in pages to trick unsuspecting victims into sending them money. These victims are typically the elderly. 😢
 93 |           </p>
 94 |           <p>
 95 |             They connect to their victim's machines via remote desktop software under the guise of tech support or some other well known company.
 96 |           </p>
 97 |           <p>
 98 |             The scammer then attempts to convince the victim they have received a larger than expected "refund" by manipulating the victim's bank user interface via chrome dev tools with the goal of getting the victim to mail them cash.
 99 |           </p>
100 | 
101 |           <p>
102 |             DOMGuard is a small javascript library (~130 lines of code) & proof of concept to help put an end to these criminals.
103 |           </p>
104 | 
105 |         </div>
106 | 
107 |         <h2>See it in action</h2>
108 |     
109 |         <div>
110 |           <p>
111 |             Try to edit the green dollar amount below with Javascript or via chrome dev tools. 
112 |             The values are automatically reset if altered.
113 |           </p>
114 |           <span id="protected">$40,000 (protected, you cant change this)</span><span class='pointer'><span>👈</span></span>
115 |         </div>
116 | 
117 |         <p>Try to mutate the protected selected in the JS console</p>
118 |         <pre>document.querySelector('#protected').innerText = 'ah ah ah didnt say the magic word'</pre>
119 | 
120 |         <p>No soup for you!</p>
121 | 
122 |         <div id="large-div">
123 |           <p>Here is a larger protected div. They are also guarded</p>
124 |           <div>$130,000 (protected, you cant change this)</div>
125 |           <div>$140,000 (protected, you cant change this)
126 | 
127 |           </div>
128 |           <div>$150,000 (protected, you cant change this)</div>
129 |         </div>
130 | 
131 |         <p>Cool huh?</p>
132 | 
133 |       </div>
134 | 
135 |       <div class='content-right'>
136 |         <p>Here is a quick video on how the scammers operate.</p>
137 |         <iframe width="560" height="315" src="https://www.youtube.com/embed/J4mkZU2Y0as" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
138 |         <p><strong>Please share this with people you think might be vulnerable to such a scam ❤️</strong></p>
139 |         <h2>How does this work?</h2>
140 |         <p>Any changes attempted via Javascript are detected by MutationObserver.</p>
141 |         <p>Additionally, guarded DOM nodes are checked via a "hearbeat" every `500ms` to ensure the values are what they should be.</p>
142 |         <p>View the <a href="https://github.com/DavidWells/dom-guard/blob/master/index.js">source code</a>.</p>
143 |       </div>
144 | 
145 |     </div>
146 | 
147 |     <script>
148 | 
149 |       function protectTheDom() {
150 |         /* Usage examples */ 
151 |         const guard = new DOMGuard({
152 |           selector: '#protected',
153 |           heartbeat: 500 // Check for manipulation every .5 second
154 |         })
155 |         // Initialize
156 |         guard.init()
157 | 
158 |         const guardThree = new DOMGuard({
159 |           selector: '#large-div',
160 |           heartbeat: 1000
161 |         })
162 |         // Initialize
163 |         guardThree.init();
164 |       }
165 |       
166 |       protectTheDom();
167 | 
168 |     </script>
169 |   </body>
170 | </html>


--------------------------------------------------------------------------------