隱藏內容以防止在JavaScript製作的遊戲中作弊

我知道完全阻止用戶欺騙和/或破解Web應用程序是不可能的，但我發現這個洞很容易發現它確實應該被堵塞。隱藏內容以防止在JavaScript製作的遊戲中作弊

https://mcthompsonatl.github.io/

我其實沒有任何代碼這一點。我被授予了這個非常基本的「找到所有6個對象」（在這種情況下，鍵）猜測遊戲，一位前僱員，不是貿易程序員，寫了一個促銷給我們的客戶。邏輯是合理的，它需要一些格式化工作，但是在開發者模式下進行測試時，我花了很少的時間才發現，僅僅通過檢查card類的每個<div>就可以輕鬆獲得遊戲。因爲這是用於促銷比賽，所以我一直在想辦法隱藏或更改遊戲破解代碼，以便在開發人員模式下檢查任何卡片時不會顯示任何提示。

我能找到的一個解決方案是將卡片元素更改爲多個HTML5 Canvas元素。這兩個問題是1.我沒有使用Canvas和2的經驗。即使我做了，它似乎是一個非常漫長和痛苦的任務，我不知道我是否會被允許的時間我'只需要學習就可以解決問題。這是可以用PHP隱藏的東西嗎？我在這裏找到了一個合理的解決方案。任何幫助表示讚賞。

來源

2017-07-19 mthomp81

我建議使每一個用戶提供了一個互動卡，無論是用Ajax以上的WebSockets時間遠程過程調用。沒有什麼能夠阻止用戶檢查客戶端代碼;所以保持信息服務器端直到需要它。 –

目前，您的遊戲與實際值已預先確定但尚未隱藏的刮刮彩票相似。理想情況下，您將執行類似@DaveSnyder建議的操作，點擊會生成一個到服務器的呼叫，告訴您該卡背後的內容，然後顯示它。然而，一個更基本的js-only方法可能是讓每個被點擊的方格有一個百分之一的機會在它後面有一個勝利者，而不是直到它被點擊。這有其自身的缺陷，因爲向服務器報告勝利仍然很容易被欺騙（完全繞過遊戲）。 – James

你使用jQuery嗎？我正在處理某些事情，並想知道您是否在使用，以便我可以在我的解決方案中使用它。 – MJoraid

太長的評論。

基於我從遊戲中瞭解的內容。你有36個盒子，你需要點擊隨機框。如果你點擊正確框的X號，你就贏了。

我能夠通過檢查HTML並搜索指示獲勝密鑰的圖像來作弊。圖像名稱爲images/keytowin/frontImage.png

一個解決方案可能是不預先指定指向HTML div的「正確」選項的圖像。相反，只有在點擊圖片後才能分配圖片。這會讓它更難找到，因爲HTML本身不會放棄它。

這裏的想法是Random。使用Javascript，生成1到36之間的3個隨機數字。這三個隨機數字表示獲獎盒子。如果用戶點擊一個盒子，並且它有相同的編號（我注意到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>

來源

2017-07-19 22:27:34 MJoraid

謝謝，對不起，我只是爲了解決這個問題，但是這個項目已經被放在加力燃燒室（不是我的電話）。不過，我正在計劃一個個人項目，這個項目的內存匹配遊戲非常相似，而且它似乎是一個很好的解決方案。 – mthomp81

@ mthomp81這種東西其實很感興趣。你想一起工作嗎？ – MJoraid

隱藏內容以防止在JavaScript製作的遊戲中作弊

回答

相關問題