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);

}
?>

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);

}
?>

• javascript
• php
• jquery

• 1 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. Commented Feb 17, 2015 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() – user4082764 Commented Feb 17, 2015 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 Commented Feb 17, 2015 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 – user4082764 Commented Feb 17, 2015 at 12:56

3 Answers 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 ment 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;

?>

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.

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.