如何防止用户更改HTML或JavaScript中的值 [英] How to prevent the user from changing values in the HTML or the JavaScript

问题描述

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

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

我从codepen.io

I created this DEMO from codepen.io

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

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

我只允许该颜色:#fa743e,#323949,#0000,#d8dbdf.但是问题出在这里，如果用户使用开发者控制台将#ffffff颜色发布到数据库中，例如将#fa743e更改为#ffffff.不好.

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.

这是表格:

<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方法:

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

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

}
?>

推荐答案

最重要的是:永远不要信任客户端的任何东西.客户端可以更改他们想要的任何内容，甚至可以编辑要发送到服务器的数据.如果希望确保他们无法执行某些操作，则必须检查他们唯一不能更改的内容(服务器). 此处是解释其好处的好指南我所说的.

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;

?>

这篇关于如何防止用户更改HTML或JavaScript中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！