1

I have a website that makes AJAX calls to a server-side script when a button is pressed. The only problem is that a user could type the following into their address bar:
javascript:callAjaxRoutine(); How do I prevent this from happening?

jhunter_d
  • 65
  • 8
  • 5
    You shouldn't even try. Your design should be such that it doesn't matter if they do. How does this create a problem for you? – Gerrat Apr 19 '13 at 21:04
  • 1
    I think it's impossible to do. Users could always, for example, use firebug and change the page or call javascript functions. Server-side, you should always check the data you get because you can never 100% trust client-side logic and validation. – Walid Apr 19 '13 at 21:05
  • How exactly should I design my site, __which requires a server-side script to be called__, to prevent this? – jhunter_d Apr 19 '13 at 21:13
  • I think the point of what @Gerrat is saying is that a bank wouldn't put their `addMoney(100000)` function into the client. Instead you'd have some kind of transferFunds(from,to,amount) function. what operation (that your web service exposes to the public) would be such a problem? – Shanimal Apr 19 '13 at 21:48
  • You just ensure the user is authorized to perform the server side request. There are a few ways to do this, but this is typically done by having them log in, storing a session with relevant information on the server, and with a session cookie sent to the client. Your server side scripts need to check to see if this user is authorized then (typically done for you with many frameworks). – Gerrat Apr 19 '13 at 21:49

1 Answers1

1

The people in the comments are right in saying you'll never be able to get someone out of your code 100%, but you can do a couple of things to ward off those less serious:

  1. Encapsulate your function in an object, so that it's not in the global namespace,
  2. Obfuscate your code

No 1

is a case of doing this: (I'm going to use jQuery here, but it's not essential, just shortens the code)

Instead of:

<script>
    var callAjaxRoutine = function () {
        // Do ajax
        ajax();
    }

    $('#button').on('click', callAjaxRoutine);

</script>

You take the function out of the global namespace and put it inside an object:

<script>

    // This sets up an object containing a self-executing function
    (function () {

        var callAjaxRoutine = function () {
            // Do ajax
            ajax();
        }

        $('#button').on('click', function () {
            callAjaxRoutine.apply(this);
        });

    }());

</script>

The second lot of code will do the same as the first, the code is still called when the event is fired, but typing callAjaxRoutine into the console will show undefined because of the closure of the function that only exists to declare and assign callAjaxRoutine as the event handler for #button.click()

javascript:callAjaxRoutine(); will do nothing, as there is no accessible callAjaxRoutine defined anymore.

No. 2

put your code through a minified/obfuscator like http://jscompress.com -- the second lot of code above becomes:

(function(){var e=function(){ajax()};$("#button").on("click",function(){e.apply(this)})})();

The bigger the function, the more difficult it is to read and understand. If you have a tool like firebug you can pull it apart, but it's a real pain to do, so you'll dissuade most.

Trolleymusic
  • 2,162
  • 3
  • 19
  • 26