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 d

Answer 1

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.

Answer 2

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.

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

?>