How to avoid tampering of javascript / HTML elemen

Question

in my fiddle I have an example that should only allow a user to click submit by turning the submit button element disabled to false based on some calculated javascript.

  function enable(TVD) {
    if (TVD[TVD.length - 1] >= trueTVD - 5 && TVD[TVD.length - 1] <= trueTVD + 5) {
      //console.log(TVD[TVD.length - 1]);
      $('#submitButton').prop("disabled", false);
    } else {
      $('#submitButton').prop("disabled", true);
    }
  }

What has happened is that I have found that some users have managed to bypass this presumably by using something like dev tools.

I would like to design this such that my security cant be bypassed. How do I accomplish this goal or hide the javascript from dev tools?

Answer 1

1. The best way is validate on the server. Never trust anything that comes from a client. It could be tampered with.

2. It's never completely possible to stop dev-tools from being loaded, however you can make it difficult by disabling the F12-button and contextmenus, but that's a road you don't want to walk on.

3. Use code that is minified, so it becomes much harder to read and comprehend and to tamper with using dev-tools or other sniffers.

summerized: use minified (obfuscated) code in combination with sanity checks on the client and on the server (preferable on the database too).

Answer 2

Afaik, you can't hide javascript code to users. See this.

A low level way of achieving obfuscation would be to have minified javascript files, as most users wouldn't bother tracing single letter named variables and such.

Answer 3

Short answer: You can't

Long answer: Everyone can send anything to your server. The only way to securely filter and check the user input is therefore on the server side only

Sorry