• 0

HTML data-* security


Question

I have a question about the security of the data-* attributes in HTML.  Lets say we have some AJAX function that uses a product ID of an item.  I am trying to keep my javascript separate from my HTML.  So I would do something like this:

<a href="Product.aspx?id=7" class="select_product" data-productid="7">Product Name</a>

With jQuery, I would then do this:

$("a.select_product").click(function(e){
     e.preventDefault();

     var id = $(this).data("productid");

     //validate if ID is an integer
     if(isInt(id)){
          //call AJAX function
     }
});

So I validate the user input, but how can I validate that the specific product has that valid ID?  What is preventing somebody from using one of the many developer tools and changing data-productid to 8 or some other integer?

Link to comment
https://www.neowin.net/forum/topic/1218851-html-data-security/
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Nothing is stopping them. What you could do is set the function onload and have the variable set "in memory" on the object. so that the click doesn't re-run and check the variable attribute again.

 

run this on ready.....

$("a.select_product").each(function(){
 
var id = $(this).data("productid");
 
$(this).click(function(e){     
e.preventDefault();
     
     //validate if ID is an 
integer     
if(isInt(id)){          //call 
AJAX function     }});
 
});

Would this work...?

  • 0

Nothing is preventing a user from modifying things. This is why you must always validate things as necessary server-side. Any and all client-side validation should be considered to be just a nice enhancement - it can take some of the strain off the server by catching some of the most common invalid inputs in form fields, such as mandatory forms fields being left blank, and it can also potentially enhance the usability of the page, the most obvious aspect being through cutting out unnecessary page reloading.

 

Regarding your example, where a user is clicking on a product, perhaps to purchase it, and you may be worried that they could change the ID of the product they purchase; you need to implement security checks in the server-side code to prevent them doing something they shouldn't be allowed to do. If they're only allowed to purchase products with certain ID's, check the supplied ID is on that list of allowed IDs for that user. Do not submit the price of the item they are purchasing to the server via AJAX, get it from your database, and get it based on the supplied ID of the item being purchase, don't make any assumptions if there are any to be made.

 

Be mindful to not try and take things unnecessarily too far though; if a user does have the ability to change the ID of the product they are purchasing, as long as they are allowed to purchase that item, and you retrieve the correct price for it, etc, it doesn't matter. You don't need to waste time trying to block the odd rare person from doing so.

 

With that said, you should perhaps consider implementing CSRF protection, which could significantly help bolster the security for things like this.

  • Like 1
  • 0
  On 21/06/2014 at 15:34, lunamonkey said:

Nothing is stopping them. What you could do is set the function onload and have the variable set "in memory" on the object. so that the click doesn't re-run and check the variable attribute again.

 

run this on ready.....

$("a.select_product").each(function(){
 
var id = $(this).data("productid");
 
$(this).click(function(e){     
e.preventDefault();
     
     //validate if ID is an 
integer     
if(isInt(id)){          //call 
AJAX function     }});
 
});

Would this work...?

 

Work to stop me from modifying the javascript/jQuery in the page and getting a different ID sent to the server via AJAX? No! I could always save an offline copy of the webpage to my computer, modify the code, open it in my browser and submit the form / AJAX request / whatever.

  • 0

There's no way to prevent someone from changing values clientside, you could set the id in a database server side before you sent the page and after the user clicks the href you can check that value with the server side value.

  • 0
  On 21/06/2014 at 15:35, theblazingangel said:

Nothing is preventing a user from modifying things. This is why you must always validate things as necessary server-side. Any and all client-side validation should be considered to be just a nice enhancement - it can take some of the strain off the server by catching some of the most common invalid inputs in form fields, such as mandatory forms fields being left blank, and it can also potentially enhance the usability of the page, the most obvious aspect being through cutting out unnecessary page reloading.

 

Regarding your example, where a user is clicking on a product, perhaps to purchase it, and you may be worried that they could change the ID of the product they purchase; you need to implement security checks in the server-side code to prevent them doing something they shouldn't be allowed to do. If they're only allowed to purchase products with certain ID's, check the supplied ID is on that list of allowed IDs for that user. Do not submit the price of the item they are purchasing to the server via AJAX, get it from your database, and get it based on the supplied ID of the item being purchase, don't make any assumptions if there are any to be made.

 

Be mindful to not try and take things unnecessarily too far though; if a user does have the ability to change the ID of the product they are purchasing, as long as they are allowed to purchase that item, and you retrieve the correct price for it, etc, it doesn't matter. You don't need to waste time trying to block the odd rare person from doing so.

 

With that said, you should perhaps consider implementing CSRF protection, which could significantly help bolster the security for things like this.

 

Yeah of course the AJAX function will just retrieve the price and other stats from the database.  The only thing it will send is the ID of the product, everything else will be retrieved from the server side (if it is in stock, price, ...).  I guess it really doesn't matter.  They can use developer tools to modify the href attribute too.

 

Thanks!

This topic is now closed to further replies.
  • Posts

    • It's so sensitive to prompts. I asked it to create a video of two friends fighting over a trophy and it blocked it.
    • i think the above says it all about whats wrong with nutrek
    • Google Chrome 137.0.7151.69 (offline installer) by Razvan Serea The web browser is arguably the most important piece of software on your computer. You spend much of your time online inside a browser: when you search, chat, email, shop, bank, read the news, and watch videos online, you often do all this using a browser. Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier. Use one box for everything--type in the address bar and get suggestions for both search and Web pages. Thumbnails of your top sites let you access your favorite pages instantly with lightning speed from any new tab. Desktop shortcuts allow you to launch your favorite Web apps straight from your desktop. Chrome has many useful features built in, including automatic full-page translation and access to thousands of apps, extensions, and themes from the Chrome Web Store. Google Chrome is one of the best solutions for Internet browsing giving you high level of security, speed and great features. Important to know! The offline installer links do not include the automatic update feature. Google Chrome 137.0.7151.69 changelog: [N/A][420636529] High CVE-2025-5419: Out of bounds read and write in V8. Reported by Clement Lecigne and Benoît Sevens of Google Threat Analysis Group on 2025-05-27. This issue was mitigated on 2025-05-28 by a configuration change pushed out to Stable across all Chrome platforms. [$1000][409059706] Medium CVE-2025-5068: Use after free in Blink. Reported by Walkman on 2025-04-07 Google is aware that an exploit for CVE-2025-5419 exists in the wild. Download web installer: Google Chrome Web 32-bit | Google Chrome 64-bit | Freeware Download: Google Chrome Offline Installer 64-bit | 128.0 MB Download: Google Chrome Offline Installer 32-bit | 115.0 MB Download page: Google Chrome Portable Download: Google Chrome MSI Installers for Windows (automatic update) View: Chrome Website | Release Notes Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Last night I watched "I, Robot" movie: https://www.youtube.com/watch?v=7Dlo-VB0-HI The day they put AI into Robots is our END... I really scare from that day!!
    • This site is just old men ranting at clouds. Neowin knows its audience.
  • Recent Achievements

    • First Post
      nothin earned a badge
      First Post
    • Enthusiast
      Epaminombas went up a rank
      Enthusiast
    • Posting Machine
      Fiza Ali earned a badge
      Posting Machine
    • One Year In
      WaynesWorld earned a badge
      One Year In
    • First Post
      chriskinney317 earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      188
    2. 2
      snowy owl
      134
    3. 3
      ATLien_0
      130
    4. 4
      Xenon
      119
    5. 5
      +FloatingFatMan
      97
  • Tell a friend

    Love Neowin? Tell a friend!