如何防止用户更改HTML或JavaScript中的值

Question

我试图使用户可以更改他们正在更改配置文件的文本颜色和背景颜色。

我从codepen.io创建了这个DEMO

在此演示中，您可以看到选中任何单选按钮后.colored-text div会自动更改。

我只允许该颜色： #fa743e,#323949,#0000,#d8dbdf 。 但问题是，如果在这里例如用户改变#fa743e到#ffffff使用开发者控制台上#ffffff数据库颜色张贴。 不好

这是表格：

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

我正在使用此ajax发布方法：

$.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 });
      }
});

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

}
?>

Answer 1

底线：永远不要信任客户的任何东西。 客户端可以更改他们想要的任何内容，甚至可以编辑要发送到服务器的数据。 如果您希望确保他们无法执行某些操作，则必须检查他们唯一无法更改的内容（服务器）。 这是一个很好的指南，解释了我提到的好处。

要在下面回答您的评论：

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;

?>

Answer 2

您无法阻止用户更改其控制台中的内容。 所有前端代码（HTML，JS，CSS）都发送到浏览器，然后任何人都可以查看并将其更改为自己的意愿。 如果您确实想限制允许的颜色，请进行服务器端检查。

Answer 3

在服务器端代码change_theme.php中，您应该具有两个分别用于textcolors和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);

    }
?>

希望这对您有所帮助。