How to not let anyone inspect elements of a webpage?

Question

I was thinking to make some jQuery functions that will use ajax to control mysql. The whole idea is to make separate files of PHP (e.g query.php, addRow.php, update.php and delete.php) provide data to them via the GET variables like query.php?sql=SELECT * FROM table and then control them with jQuery AJAX functions that I'll make later. Expected code:

$(element).click(function (e) {
    mysql.query("DELETE row FROM table WHERE name = 'John Doe'");
});

And then it'll send query through AJAX and the query will be performed.
So the problem is SECURITY . I mean anyone can just change javascript from browser's inspector or use console to control my databases. What can be done for this problem. Is there anyway to not let anyone change elements in the browser console. If not is there ANYWAY to overcome this security problem?

Answer 1

Never expose direct access to your database from the web layer. You can never lock that down; someone will send "DROP TABLE table" to your server, however much you lock down the JS source.

All they have to do is see what the browser sends to your server to detect that your server accepts arbitrary SQL commands.

Not that you can lock down the JS code; it is not the browser you need to worry about, anyone can send a HTTP request and start introspecting your client-side code anyway.

Build a RESTful API instead, use that from the client. Such an API is limited in the damage it can do if someone starts calling it directly.

Answer 2

Is there anyway to not let anyone change elements in the browser console. If not is there ANYWAY to overcome this security problem?

No.

Anything that is in an HTTP response delivered to a user's machine can be intercepted and read / changed by the user ... if they have a little bit of technical expertise. That includes anything that is delivered encrypted, and decrypted on the fly in the user's browser.

And even if you could prevent the user tweaking your SQL in the webpage, you can't prevent them sending a different SQL to your database, using the database auth credentials that you embedded in your Javascript.

Answer 3

I would suggest not to expose your database over the web this will have high risk on SQL Injection and data distortion.

Rather than to this you can create a separate data access layer which is a short of database functions which will interact with data base. Every time you need to include the required function file to your code and pass the connection object by reference to the function.

Also make sure function will not use $_SESSION register global at all.

Make separate database configuration file which contain database name, user name and password other relevant information. Now create connection object with use of those configuration details and pass the single connection object by reference to whatever query you fire.

Advantages of this.

1. This will reduce total no of database connection
2. reduce security risk because dbconfig.inc, dataretrive.fn.php and other related file are kept in limited access directory which is even not accessible by crawlers.
3. Site will use common database connection pool automatically.

Answer 4

Is there anyway to not let anyone change elements in the browser console

Use Flash ;)

But seriously... never make your security depend on anything in the browser. Someone could always simulate a browser, for example. Whatever is not in your direct control (i.e. on a locked server) has no guarantees.

Answer 5

As a 20+ years programmer i am surprised HTML/php programming is so weak in how a user can use inspect element to change a value e.g product id before submitting.

My solution is to use java script variables and only use HTML such as textboxes to inform the user of my intentions.

eg declare variables in a global space i.e outside of a function.

Example below uses j query library.

It is a small example.

The demonstration is that changing the value of textbox c using inspect element will not change the final result displayed in result textbox.

When saving the data to server save the javascript values to the server... not the html values.

             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

      <script>
      var a = 0;
      var b = 0;
      var result= 0;
      </script>

and i can use the values while informing the user in HTML textboxes

      <script>
       a = 5;
       $('#a').val(a);
       b = 3;
       $('#b').val(b);




       result=a+b;
       $('#result').val(result);

       alert(result);

       </script>

Answer 6

I think you should go for disable right click on your web page

<script type="text/javascript">

$(document).ready(function () { //Disable cut copy paste

$('body').bind('cut copy paste', function (e) {

    e.preventDefault();

});

//Disable mouse right click
$("body").on("contextmenu",function(e){
    return false;
});

});