How to prevent the user from changing values in the HTML or the JavaScript

Question

I am trying to make a user can change they are changing profile text color and background color.

I created this DEMO from codepen.io

In this demo you can see when you checked any radio button then .colored-text div inside text will changing automatically.

I want to allow only that color: #fa743e,#323949,#0000,#d8dbdf. But the problem is here if user change for example #fa743e to #ffffff using developer console the #ffffff color posting in database. It is not good.

this is form :

<form method="post" action="">
<!--Text Color-->
<div class="renk">
  <input type="radio" id="red" class="sr ja" name="change-text-color" value="#fa743e">
  <label for="red" class="llr"></label>
</div>
<!--Background Color-->
<div class="renk"> 
   <input type="radio" id="lr" class="lr ja" name="change-background-color" value="#000000">
   <label for="lr" class="llr"></label>
</div>

</form>

I am using this ajax post method:

$.ajax({
     type: "POST",
     url: 'change_theme.php',
     data: {change-text-color:$('input[name="change-text-color"]:checked').val(),change-background-color:$('input[name="change-background-color"]:checked').val()},
     beforeSend: function(){$("#posting").html('<img src="icons/ajaxloader.gif"/>'); },
     success: function(html) {
     $('.tduzalani, .temayi-degistir-alani').animate({'opacity':'0'}, 300, 'linear', function(){
     $('.tduzalani, .temayi-degistir-alani').css('display', 'none');});
        swal({   title: "Theme was changing succuesfully!",   text: ":)",   timer: 5000 });
      }
});

and this is change_theme.php

<?php
include_once 'includes.php';
$colors = array( '#fa743e','#ffcc4d','#94d487','#4a913c','#89c9fa','#3b94d9','#abb8c2','#dd2e44','#f5abb5','#bfcfee','#be72ea','#ea729f','#000000','#0e1d40','#0e4034','#40310e','#451468','#ffffff','#006cff','#bb0707','#660202','#44404b','#422929','#323949');
if((isSet($_POST['change-text-color']) && in_array($_POST['change-text-color'], $colors)) || (isSet($_POST['change-change-background-color']) && in_array($_POST['change-background-color'], $colors)))
{
$text-color=mysql_real_escape_string($_POST['change-text-color']);
$background-color=mysql_real_escape_string($_POST['change-background-color']);

$data=$Suavi->change_theme($uid,$text-color,$background-color);

}
?>

everything can be done in the developer tools. on your server side.. put validation there and have a default value if settings in not present. — Oli Soproni B., Feb 17 '15 at 12:41
@OliSoproniB. I understood the server must enforce it. I use array code in change_theme.php if you check then you can see. But there is one problem. The problem is: If user change only `input[name="change-text-color"]:checked').val()` color then it is posted. but if user change two color : `change-text-color:$('input[name="change-text-color"]:checked').val(),change-background-color:$('input[name="change-background-color"]:checked').val()` — , Feb 17 '15 at 12:49
you already have the validation in your server-side code, but only need to set allowed colors in `$colors` array. Like : `$colors = array('#fa743e','#323949','#000000','#d8dbdf' );` — Gopakumar Gopalan, Feb 17 '15 at 12:52
@GopakumarGopalan I do this in `change_theme.php` but it is only checking two value. for example if user change only change-text-color like `#fa743e` to `#555555` then the users color= `#555555` posting. but i have no this `#555555` color — , Feb 17 '15 at 12:56

score 3 · Accepted Answer · edited May 23 '17 at 11:56

3

The bottom line: Never trust anything from the client. The client can change whatever they desire, and can even edit the data that's going to the server. If you wish to ensure they can't do something, then you will have to put checks on the only thing they can't change (The server). Here is a good guide explaining the benefits of what I mentioned.

To answer your comment below:

Javascript:

$.ajax({
     type: "POST",
     url: 'change_theme.php',
     data: {change-text-color:$('input[name="change-text-color"]:checked').val(),change-background-color:$('input[name="change-background-color"]:checked').val()},
     beforeSend: function(){$("#posting").html('<img src="icons/ajaxloader.gif"/>'); },
     success: function(html) {
        if ( html == "1" ) {
            $('.tduzalani, .temayi-degistir-alani').animate({'opacity':'0'}, 300, 'linear', function(){
            $('.tduzalani, .temayi-degistir-alani').css('display', 'none');});
            swal({   title: "Theme was changing succuesfully!",   text: ":)",   timer: 5000 });
        } else {
            alert('There was an error saving this!')
        }
      }
});

PHP:

<?php
include_once 'includes.php';

$textcolors = array('#fa743e','#323949','#000000','#d8dbdf');
$bgcolors = array('#fa743e','#ffcc4d','#94d487','#4a913c','#89c9fa','#3b94d9','#abb8c2','#dd2e44','#f5abb5','#bfcfee','#be72ea','#ea729f','#000000','#0e1d40','#0e4034','#40310e','#451468','#ffffff','#006cff','#bb0707','#660202','#44404b','#422929','#323949');

//
if( isSet($_POST['change-text-color']) && in_array($_POST['change-text-color'], $textcolors) && isSet($_POST['change-change-background-color']) && in_array($_POST['change-background-color'], $bgcolors) )
{
    $text-color=mysql_real_escape_string($_POST['change-text-color']);
    $background-color=mysql_real_escape_string($_POST['change-background-color']);

    $data=$Suavi->change_theme($uid,$text-color,$background-color);
    echo 1;
}
else
{
    echo 0;
}

exit;

?>

edited May 23 '17 at 11:56

Community

1
1

answered Feb 17 '15 at 12:42

I understood the server must enforce it. I use array code in change_theme.php if you check then you can see. But there is one problem. The problem is: If user change only `input[name="change-text-color"]:checked').val()` color then it is posted. but if user change two color : `change-text-color:$('input[name="change-text-color"]:checked').val(),change-bac‌kground-color:$('input[name="change-background-color"]:checked').val()` – Feb 17 '15 at 12:50
That's just an issue with your if statement. I would break them apart into two if/else statements. Check my answer edit. – Feb 17 '15 at 12:57
it is something went wrong. If user change two color and post that color then successfully posting. – Feb 17 '15 at 13:14
I'm entirely confused at what you're trying to accomplish here. Perhaps check out Gopakumars answer below if you're dealing with two different arrays, or rephrase your question so I can better understand it. I need to know exactly what needs to happen when a user submits the form. – Feb 17 '15 at 13:17
I need like if theme color is invalid then I want to open this warning.: `The theme color value is invalid, try again by selecting a color` – Feb 17 '15 at 13:22
I just updated my post again! (Last time). This should do what you're looking for. – Feb 17 '15 at 13:41
the ajax everytime showing `alert('There was an error saving this'');` what is wrong ? – Feb 17 '15 at 19:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/71118/discussion-between-danbopes-and-innovation). – Feb 17 '15 at 22:12

score 2 · Answer 2 · answered Feb 17 '15 at 12:40

There is no way you can prevent users from changing stuff in their console. All the front-end code (HTML, JS, CSS) is sent to the browser, then anybody can view it and change it to their will. If you really want to limit the allowed colors, make a server-side check.

score 0 · Answer 3 · answered Feb 17 '15 at 12:59

In the server-side code change_theme.php you should have two seperate arrays for textcolors and background colors.

<?php
    include_once 'includes.php';
    $bgcolors = array('#fa743e','#ffcc4d','#94d487','#4a913c','#89c9fa','#3b94d9','#abb8c2','#dd2e44','#f5abb5','#bfcfee','#be72ea','#ea729f','#000000','#0e1d40','#0e4034','#40310e','#451468','#ffffff','#006cff','#bb0707','#660202','#44404b','#422929','#323949');
    $textcolors = array('#fa743e','#323949','#000000','#d8dbdf');
    if((isSet($_POST['change-text-color']) && in_array($_POST['change-text-color'], $textcolors)) || (isSet($_POST['change-change-background-color']) && in_array($_POST['change-background-color'], $bgcolors)))
    {
        $text-color=mysql_real_escape_string($_POST['change-text-color']);
        $background-color=mysql_real_escape_string($_POST['change-background-color']);

        $data=$Suavi->change_theme($uid,$text-color,$background-color);

    }
?>

Hope this helps you.

How to prevent the user from changing values in the HTML or the JavaScript

3 Answers3

Linked

Related