Detecting user tampering with DOM

Question

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 comparing 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?

Answer 1

You'll never stop someone who is comfortable 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.