Скрытие контента для предотвращения мошенничества в JavaScript-игре

Я знаю, что невозможно полностью запретить пользователям обманывать и / или взламывать веб-приложение, но я обнаружил, что эту дыру так легко обнаружить, что ее действительно нужно подключить.

https://mcthompsonatl.github.io/

Я на самом деле ничего этого не кодировал. Мне дали очень простую игру на угадывание "найди все 6 объектов" (в данном случае, ключей), которую бывший сотрудник, который по профессии не был программистом, написал для продвижения по службе для одного из наших клиентов. Логика логична, и она требует некоторой работы по форматированию, но, тестируя ее в режиме разработчика, мне потребовалось очень мало времени, чтобы обнаружить, что игру можно легко выиграть, просто осмотрев каждую <div> из card учебный класс. Поскольку это используется в рекламном конкурсе, я пытался найти способ либо скрыть, либо изменить код, нарушающий правила игры, чтобы проверка любых карт в режиме разработчика не выявила никаких подсказок.

Единственное решение, которое я смог найти, - это заменить элементы карточки на несколько элементов HTML5 Canvas. Две проблемы с этим: 1. У меня нулевой опыт работы с Canvas и 2. Даже если бы я это сделал, это кажется чрезвычайно долгой и болезненной задачей, и я не уверен, что мне позволят Мне нужно учиться достаточно, чтобы решить проблему. Это то, что можно скрыть с помощью PHP? Я немного озадачен поиском разумного решения. Любая помощь приветствуется.

Источник

1 ответ

Слишком долго для комментария.

Исходя из того, что я понял из игры. У вас 36 ящиков, вам нужно нажимать на случайные ячейки. Если вы нажмете на число X правильных полей, вы выиграете.

Я смог обмануть, проверив HTML и ища изображение, которое указывает на выигрышный ключ. Имя изображения былоimages/keytowin/frontImage.png

Решение может заключаться в том, чтобы не назначать заранее изображение, указывающее на "правильный" выбор, для HTML div. Лучше назначать изображение только после того, как по нему щелкнули. Это затруднит поиск, поскольку один HTML не выдаст его.

Идея y здесь Random. Используя Javascript, сгенерируйте 3 случайных числа от 1 до 36. Эти три случайных числа обозначают выигрышные коробки. Если пользователь нажимает на поле с тем же номером (я заметилdiv пронумерованы data-id="1") затем используйте JS для добавления изображения во внутренний div на лету.

Однако три случайных числа будут определены при запуске игры. Поэтому важно скрыть переменные.

Я предоставил образец кода для демонстрации концепции.

var luckyNumbers = getUniqueNumbers();
var winImg = "<img  src='https://mcthompsonatl.github.io/images/keytowin/frontImage.png' alt='X LOGO'>";
var loseImg = "<img  src='https://mcthompsonatl.github.io/images/keytowin/TryAgain.png' alt='X LOGO'>";

console.log(luckyNumbers);

$(".card").on("click", function() {

  if (!$(this).hasClass("clicked")) {
    $(this).addClass("clicked");

    selected = Number($(this).attr("data-id"));
    if (luckyNumbers.indexOf(selected) > -1) {
      //code to put a key image     
      $(this).find(".back").append(winImg);
    } else {
      console.log("wrong: " + selected);
      //code to put not-winning image     
      $(this).find(".back").append(loseImg);
    }

  }

});



function getUniqueNumbers() {
  var arr = []
  while (arr.length < 3) {
    var someRand = Math.ceil(Math.random() * 36)
    if (arr.indexOf(someRand) > -1) continue;
    arr[arr.length] = someRand;
  }
  return arr;
}
img {
  width: 50px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta content="width=device-width" name="viewport">
  <title>JS Bin</title>
</head>

<body>
  <div class="game">


    <div class="card" data-id="5">
      <div class="inside">
        <div class="front">
          <img src="image/someimage.jpg" alt="keytowin">
        </div>
        <div class="back">
        </div>
      </div>
    </div>

    <div class="card" data-id="6">
      <div class="inside">
        <div class="front">
          <img src="image/someimage.jpg" alt="keytowin">
        </div>
        <div class="back">
        </div>
      </div>
    </div>


    <div class="card" data-id="7">
      <div class="inside">
        <div class="front">
          <img src="image/someimage.jpg" alt="keytowin">
        </div>
        <div class="back">
        </div>
      </div>
    </div>


  </div>
  <script src="https://code.jquery.com/jquery-2.2.4.js">
  </script>
</body>

</html>

Источник
Другие вопросы по тегам