I have a litle shop basket where I can add products.

Here is my index.php

...<script type="text/javascript" src="function.js"></script> 
<a title="Add to basket" onclick="add_product_to_cart('apple','1');" href="#">Apple</a><br>...

Here is the functions.js

function add_product_to_cart(item, id) {
    var item = item;
    var id = id;

    $.ajax({
      url: "ajax.php",
      type: "POST",
      data: {
        action: "add",
        name: item,
        id: id
      },
    success: function(data) {
      //do something
    }
  });
};

When I click on "Apple", the parameters are send to the ajax, and they are visible for example in the Firefox-Web-Developer. Is there a chance to hide these POST-parameters? Maybe to protect it from attacs from outside? Is my thinking maybe totally wrong how to add it to the basket? Thanks for any help!!

Here is a screenhot from my web-developer. Web-Developer Firefox

I have a litle shop basket where I can add products.

Here is my index.php

...<script type="text/javascript" src="function.js"></script> 
<a title="Add to basket" onclick="add_product_to_cart('apple','1');" href="#">Apple</a><br>...

Here is the functions.js

function add_product_to_cart(item, id) {
    var item = item;
    var id = id;

    $.ajax({
      url: "ajax.php",
      type: "POST",
      data: {
        action: "add",
        name: item,
        id: id
      },
    success: function(data) {
      //do something
    }
  });
};

When I click on "Apple", the parameters are send to the ajax, and they are visible for example in the Firefox-Web-Developer. Is there a chance to hide these POST-parameters? Maybe to protect it from attacs from outside? Is my thinking maybe totally wrong how to add it to the basket? Thanks for any help!!

Here is a screenhot from my web-developer. Web-Developer Firefox

• javascript
• php
• jquery
• ajax

• 3 Shouldn't matter if they see it or not - if they can see it in the network request, they can find it in your client code. – tymeJV Commented Apr 3, 2014 at 15:55
• 3 We had a problem just like this on our pany site. Customers were getting product codes from discontinued items and putting them into another Add To Cart button using dev tools. I didn't find a way to hide the parameters, so I instead put a check in the AJAX to ensure that the values are real and haven't been tampered with. – Dan Johnson Commented Apr 3, 2014 at 15:55
• @tymeJV: Is there a way to make it better than calling an url to add something? In my ajax.php is a simple function which add the prouct to a SESSION. – Zwen2012 Commented Apr 3, 2014 at 15:58
• 1 It shouldn't be a problem, just make sure you are validating all of the input then anyone can post anything they want to it and nothing bad will happen. – jd182 Commented Apr 3, 2014 at 15:58
• 4 Using client side is never a secure option if you need to perform secure operations. – user1 Commented Apr 3, 2014 at 15:58

2 Answers 2

You can't hide what is being logged in the Network tab of Chrome Developer Tools. Even if you could, a hacker could sniff the requests using Fiddler or other web proxy. Client side validation is nice, but not the end all. Most people wouldn't be trying to send requests to your server illegitimately but some will I suppose.

You really should be doing server side validation that data sent to the server is indeed valid. Don't rely on the client to do this as anyone can modify what is sent directly to the server. In your PHP code, you would do something like this:

function validate_data($data)
{
    // other code here
    if(!is_discontinued($data['product_id']))
        add_to_cart($data['product_id']);
    // other code after
}

function is_discontinued($product_id)
{
    // do database query
    $is_discontinued = lookup_product($product_id);
    return $is_discontinued;
}

This is very barebones, but it should give you the idea of what needs to be done.

EDIT: After looking at some of your recent ments, you may also like to include CSRF tokens to make sure that requests originate from your domain. These tokens are generated on the server and often stored in hidden fields in the form to be sent back to the server with each request. Then you validate the token on the server and after it passes validation, you perform your action.

Note, this will only slow down most hackers, but it can deter some who aren't dead set on performing illegitimate requests.

In terms of sending the value with AJAX requests, you would need to select your hidden field and add its value to the POST data. Your AJAX request would then look something like this:

function add_product_to_cart(item, id) {
    var item = item;
    var id = id;

    $.ajax({
      url: "ajax.php",
      type: "POST",
      data: {
        action: "add",
        name: item,
        id: id,
        token: $('#csrf_token').val()
      },
    success: function(data) {
      //do something
    }
  });
};

On the server (PHP), you would have something like this:

function get_csrf_token()
{
    $token = md5(uniqid(rand(), TRUE));

    if (!isset($_SESSION['token'])) {  
        $_SESSION['token'] = $token;
    }
    else
    {
        $token = $_SESSION['token'];
    }

    return $token;
}

function valid_csrf_token()
{
    if(isset($_POST['token'])){
        if($_POST['token'] == $_SESSION['token'])
            return true;
        else
            return false;
    }
    else {
        return false; // no token was sent with the request
    }
}

Then in your form, you would have your hidden field like this:

<input id="csrf_token" type="hidden" value="<?php get_csrf_token(); ?>" />

Finally, your original PHP validation function would include the CSRF token validation:

function validate_data($data)
{
    // other code here
    if(!is_discontinued($data['product_id']) && valid_csrf_token())
        add_to_cart($data['product_id']);
    else
        header('HTTP/1.1 400 Bad Request', true, 400); // set status to bad request
    // other code after
}

Note, setting the status to bad request is optional, but it will show the request was not as expected.

The answer is: No, there is no way you can hide the data you're sending to server using AJAX.

But this shouldn't be a problem, since you MUST validate everything on server.

You can validate things on client-side (for normal users) to have a easier/faster response on client, and to get less traffic on your server. But, as said above, you must revalidate everything on server, cause this is the only way you can ensure that, even if malicious data is sent to your server, your website will still work as expected.

Btw, you can even block/ban the users that are trying to make something different from what your not-modified client code usually does.