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

Question

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

我创建了这个 DEMO 来自 codepen.io

在此演示中，您可以看到当您选中任何单选按钮时，文本中的 .colored-text div 将自动更改。

我只想允许那种颜色:#fa743e,#323949,#0000,#d8dbdf。但是，如果用户使用开发人员控制台将 #ffffff 颜色发布到数据库中，则问题就在这里，例如 #fa743e 更改为 #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 post 方法:

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

底线:永远不要相信客户的任何东西。客户端可以根据需要进行更改，甚至可以编辑发送到服务器的数据。如果你想确保他们不能做某事，那么你将不得不检查他们唯一不能改变的东西(服务器)。 Here是一个很好的指南，解释了我提到的内容的好处。

在下面回答您的评论:

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;

?>