jQuery/AJAX调用如何正确传值防止用户篡改参数越权操作

首先需要明确一个前提：不存在用户绝对无法篡改的前端存储位置。所有下发到用户浏览器的代码、数据都可以通过开发者工具、抓包、内存调试等方式修改，前端只能提升篡改成本，你目前正在做的后端权限校验（限制用户仅能操作本人记录）是唯一不可替代的核心安全防线，绝对不能省略。

以下是前端层面可落地的优化方案，可大幅提升参数篡改的门槛：

1. 避免明文ID暴露在DOM属性中 #

不要将原始球局ID直接存放在DOM自定义属性上，可选择两种优化方式：

• 使用闭包存储参数：渲染页面绑定点击事件时，直接将ID放在事件回调的闭包作用域内，不会暴露在DOM结构中，用户无法直接在元素面板修改，只能通过断点调试内存变量篡改，门槛更高。示例代码如下：

// 后端渲染时直接填充对应球局ID，绑定事件无需读取DOM属性
const currentRoundId = 39;
$('#view-round').on('click', function () {
    $.post('/dashboard/pages/golf/round/ajax.php?action=load', {id: currentRoundId}, function(response) {
      // 业务逻辑
    });
});

• 混淆加密ID：后端渲染时将球局ID和当前用户ID、有效期时间戳拼接后做对称加密，生成加密串存放在DOM属性中，前端提交时直接传加密串，后端解密后先校验用户匹配性、有效期，再处理业务逻辑。即使用户篡改加密串，后端解密后校验不通过会直接拒绝请求。

2. 新增请求签名校验 #

前端发送AJAX请求时，将请求参数、当前时间戳、预设的混淆密钥拼接后生成哈希签名，和参数一起传给后端。后端收到请求后先校验：

• 时间戳是否在5分钟有效范围内，避免重放攻击
• 参数+时间戳+密钥生成的哈希是否和前端传的签名一致
  如果校验不通过直接拒绝请求，就算用户篡改了ID参数，也无法生成合法的签名。注意密钥需要做JS混淆处理，避免直接明文暴露在代码中。

3. 规范自定义属性使用（非安全类优化） #

如果确实需要在DOM上存储参数，建议使用HTML标准的data-*属性，而非自定义的attr-id，符合规范的同时也能配合jQuery的data()方法更方便读取：

<button
  type="button"
  id="view-round"
  class="btn btn-outline-primary btn-square btn-skew pull-right" 
  data-round-id="39"
>View</button>

const id = $(this).data('roundId');

再次强调：以上所有前端措施都仅能提升篡改成本，不能作为安全校验的核心逻辑，后端的权限校验必须保留，才可以彻底避免越权操作的问题。

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