javascript - Detecting user tampering with DOM - Stack Overflow

I've written a web app that uses an ad banner on the side to support free accounts. Problem is, since the ad is loaded in its own <div>, it's relatively easy to go into developer/debug console in any modern browser and either remove the div or resize the ad to 0px using CSS overrides (the users might do this to gain more real-estate in the app workspace). To prevent this, I was considering checking periodically if the properties of the div with the ad change at all (including CSS style), and if they do, reload the page. Since I'm relying on a canvas element for some drawing, a reload would be relatively annoying to the user since it would clear the canvas, so I don't want to do it unless the advertisement was tampered with.

I've seen some similar questions about tracking DOM changes where people suggest using mutation events. However, based on the answers, it doesn't seem like the support is there in all browsers yet (then again, the threads I've seen are from 2008 and 2009, so things might have changed since then).

Another alternative I was considering is just reading in offsetWidth, offsetHeight, offsetTop, offsetLeft of the div with the ad after the page finishes loading, and keep paring them periodically against current values (there is not a whole lot you can do to make the div go away if you can't move it).

What do you guys suggest?

I've written a web app that uses an ad banner on the side to support free accounts. Problem is, since the ad is loaded in its own <div>, it's relatively easy to go into developer/debug console in any modern browser and either remove the div or resize the ad to 0px using CSS overrides (the users might do this to gain more real-estate in the app workspace). To prevent this, I was considering checking periodically if the properties of the div with the ad change at all (including CSS style), and if they do, reload the page. Since I'm relying on a canvas element for some drawing, a reload would be relatively annoying to the user since it would clear the canvas, so I don't want to do it unless the advertisement was tampered with.

I've seen some similar questions about tracking DOM changes where people suggest using mutation events. However, based on the answers, it doesn't seem like the support is there in all browsers yet (then again, the threads I've seen are from 2008 and 2009, so things might have changed since then).

Another alternative I was considering is just reading in offsetWidth, offsetHeight, offsetTop, offsetLeft of the div with the ad after the page finishes loading, and keep paring them periodically against current values (there is not a whole lot you can do to make the div go away if you can't move it).

What do you guys suggest?

• javascript
• html
• css
• dom

Share Improve this question Follow asked Jun 15, 2011 at 2:52 Alexander TsepkovAlexander Tsepkov 4,18644 gold badges3838 silver badges6565 bronze badges 4

• 1 Web development would be no way near as fun if you couldn't tamper with the DOM. – mrk Commented Jun 15, 2011 at 3:55
• 1 If the user might be doing this to gain more real estate, could you prevent that (fix the width of the usable area) to take away that reason? – Don Zacharias Commented Jun 15, 2011 at 4:05
• Thanks @Don, that's what I ultimately ended up doing. I have several divs aligning to the size they would take up if the ad was there, so even if the user removes the ad, there would be nothing to gain unless either js code is modified as well or user modifies multiple other divs and does not resize the window afterwards. While other people bring up very valid points, I don't agree that they have answered the question. If I StackOverflow let me accept ments as a solution, I would accept your ment :) – Alexander Tsepkov Commented Jun 15, 2011 at 19:03
• Glad I could help! I went with a ment because I figured I wasn't technically answering your question. – Don Zacharias Commented Jun 15, 2011 at 19:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You'll never stop someone who is fortable enough with the DOM inspector from doing that. It's not even worth the cat and mouse game. 99.999% of users would probably call tech support if they accidentally accessed the DOM inspector.

If a visitor is using say Firefox with Adblock, your banner is never going to appear in the page so mutation events won't be dispatched. You can look at the style properties and re-load the page, but it won't make the ad appear. A constantly re-loading page will annoy users so they'll leave.

If you're OK with that, go for it. Otherwise, realise that anyone disabling your ad was never going to respond to it anyway so what's the point?