PHP+MySQL实现前端计时器值安全存储及防篡改方案咨询

嘿，这个问题的核心其实是前端计时完全不可信——用户随便用审查元素就能改隐藏域的值，所以绝对不能依赖前端传过来的时间。咱们得换个思路：让后端来掌控计时的开始和结束，前端只负责给用户看时间就行。

下面是完整的解决方案，结合你的原有代码修改：

核心思路 #

1. 用户打开解谜页面时，后端（PHP）立即记录当前精确到毫秒的时间戳，存在服务器端的Session里。
2. 前端保留你的秒表逻辑，只用来显示计时，不用把时间存到隐藏域。
3. 用户完成解谜点击提交时，后端用当前时间减去Session里的开始时间，得到真实的耗时（精确到毫秒）。
4. 把这个后端计算出的耗时直接存入MySQL，彻底杜绝篡改可能。

完整代码实现 #

1. PHP后端逻辑（示例文件：puzzle.php） #

<?php
session_start();

// 初始化解谜开始时间：仅用户第一次加载页面时设置
if (!isset($_SESSION['puzzle_start_time'])) {
    // microtime(true) 获取精确到毫秒的时间戳（浮点数，比如1699999999.123）
    $_SESSION['puzzle_start_time'] = microtime(true);
}

// 处理提交请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 验证是否有合法的开始时间记录
    if (!isset($_SESSION['puzzle_start_time'])) {
        die("无效请求：未记录开始时间");
    }

    // 计算真实耗时（秒，保留三位小数对应毫秒）
    $elapsed_time = microtime(true) - $_SESSION['puzzle_start_time'];
    
    // 连接MySQL数据库（替换成你的数据库信息）
    $conn = new mysqli('localhost', '你的用户名', '你的密码', '你的数据库名');
    if ($conn->connect_error) {
        die("数据库连接失败：" . $conn->connect_error);
    }

    // 插入耗时到数据库（假设表名为puzzle_scores，字段elapsed_time存耗时，可添加user_id关联用户）
    $stmt = $conn->prepare("INSERT INTO puzzle_scores (elapsed_time) VALUES (?)");
    $stmt->bind_param("d", $elapsed_time); // "d"表示绑定浮点数类型
    $stmt->execute();

    // 清理Session，防止重复提交
    unset($_SESSION['puzzle_start_time']);

    // 返回结果给前端
    echo "提交成功！你的耗时：" . number_format($elapsed_time, 3) . " 秒";
    exit;
}
?>

2. 前端HTML&JS修改 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 用普通div显示计时，不再需要隐藏输入框 -->
    <div id="display-area">00:00:00.000</div>
    <button id="toggle-button">SUBMIT RESULT</button>

    <script type="text/javascript">
        var timeBegan = null, timeStopped = null, stoppedDuration = 0, started = null;

        function start() {
            if (timeBegan === null) {
                timeBegan = new Date();
            }
            if (timeStopped !== null) {
                stoppedDuration += (new Date() - timeStopped);
            }
            started = setInterval(clockRunning, 10);
        }

        function stop() {
            timeStopped = new Date();
            clearInterval(started);
        }

        function reset() {
            clearInterval(started);
            stoppedDuration = 0;
            timeBegan = null;
            timeStopped = null;
            document.getElementById("display-area").innerHTML = "00:00:00.000";
        }

        function clockRunning(){
            var currentTime = new Date(),
                timeElapsed = new Date(currentTime - timeBegan - stoppedDuration),
                hour = timeElapsed.getUTCHours(),
                min = timeElapsed.getUTCMinutes(),
                sec = timeElapsed.getUTCSeconds(),
                ms = timeElapsed.getUTCMilliseconds();
            
            // 更新页面显示，不再操作隐藏输入框
            document.getElementById("display-area").innerHTML = 
                (hour > 9 ? hour : "0" + hour) + ":" +
                (min > 9 ? min : "0" + min) + ":" +
                (sec > 9 ? sec : "0" + sec) + "." +
                (ms > 99 ? ms : ms > 9 ? "0" + ms : "00" + ms);
        };

        $(document).ready(function() {
            start(); // 页面加载后开始计时

            // 点击提交按钮时的逻辑
            $("#toggle-button").click(function() {
                stop(); // 先停止前端计时
                // 用AJAX提交请求到当前PHP页面
                $.post(window.location.href, function(response) {
                    alert(response); // 显示后端返回的结果
                    reset(); // 可选：重置计时
                });
            });
        });
    </script>
</body>
</html>

关键细节说明 #

1. 防篡改核心：耗时完全由后端计算，Session存储在服务器端，用户无法直接修改开始时间，彻底避免了前端篡改的可能。
2. 毫秒级精度：用microtime(true)获取的时间戳精确到毫秒，计算出的$elapsed_time是带三位小数的浮点数（比如15.678秒），存入MySQL时建议用DECIMAL(10,3)类型来存储。
3. 额外安全措施：如果有用户登录系统，记得把user_id和耗时一起存入数据库；还可以在Session里添加随机token，提交时一起验证，防止CSRF攻击。
4. 避免重复提交：提交后立即清空Session里的开始时间，防止用户重复提交同一解谜的耗时。

内容的提问来源于stack exchange，提问作者rishiabal143