关键点安全点：JS 完全暴露在前端（按 F12 就能查看完整源码），攻击者可以随意阅读、修改、调试，因此会产生下面四类安全测试利用点。

JS 前端安全审计四大维度

从 JS 中挖掘站点路径、接口、域名等资产信息

原理：

前端 JS 写死了大量程序访问地址，开发不会刻意隐藏，直接写在代码字符串里。

能挖到什么资产：

• 正式站、测试站、预发布后台域名 / URL；
• 管理后台路径、隐藏功能页面（如 /admin、/manage、/debug）；
• 前后端交互 API 接口地址（增删改查、上传、查询接口）；
• 内部文件路径、文件下载地址、内网服务地址。

攻击价值：

拿到隐藏后台、未公开接口后，可直接访问未授权页面、调用后端接口做越权、批量查询数据。

从 JS 提取硬编码敏感机密信息

原理：

开发偷懒，把账号、密码、密钥直接写死在 JS 源码（明文），注释里也常残留开发调试信息，任何人查看源码都能看到。

风险点：

1、硬编码账号密码 写死测试账号、后台管理员账号 + 明文密码，攻击者直接登录后台；

2、各类密钥泄露 第三方 API Key、签名密钥、加密密钥、OSS / 存储访问密钥，拿到可调用第三方付费接口、盗取存储文件；

3、注释残留敏感内容 开发调试注释遗留：数据库地址、内网账号、服务器 IP、开发环境密码、SQL 语句、接口调试参数。

高危后果：

密钥泄露可造成大量数据泄露、产生高额第三方服务账单；账号泄露直接后台沦陷。

识别危险 JS 函数，判断存在的前端漏洞

文中举例 eval()、dangerouslySetInnerHTML 都是高危代码，这类代码代表网站存在输入渲染、代码执行风险，对应常见漏洞：

1、eval() 作用：把字符串当成 JS 代码执行； 风险：如果字符串内容可控（用户输入），会产生前端代码注入；

2、dangerouslySetInnerHTML（React 框架专用） 作用：直接将文本渲染成 HTML 标签； 风险：未过滤用户输入就使用，直接触发 XSS 跨站脚本漏洞；

配套漏洞场景：

• URL 跳转漏洞：JS 用 window.location 拼接用户可控 URL，无白名单限制，可钓鱼跳转恶意网站；
• XSS 跨站：直接解析用户输入的 HTML/JS 代码，窃取用户 Cookie、登录凭证；
• SSTI 模板注入：前端模板引擎解析可控变量，特殊语法可执行任意代码、读取本地信息。

简单说：只要源码出现这类危险函数，就要重点测试是否存在注入类漏洞。

逆向 JS，分析前端业务逻辑与校验规则

核心作用：

看透前端所有限制，绕过前端防护

1、前端校验绕过 登录验证码、密码复杂度、上传文件大小 / 后缀、支付金额限制、权限判断全部写在 JS 里； 攻击者可直接修改 JS、删除校验代码、抓包改参数，绕过所有前端限制（前端校验仅做体验，不能当安全防线）；

2、加密逆向 很多接口请求参数会用 JS 加密（MD5、AES、自定义签名算法），密钥、加密逻辑全部在前端； 读懂 JS 就能还原加密算法，伪造合法请求数据包；

3、梳理数据走向 跟踪 JS 代码：用户输入数据→如何处理→哪些接口上传→后端返回哪些敏感数据； 快速定位数据传输漏洞（明文传输敏感信息、接口返回过多用户隐私）。

实战价值：

绝大多数业务限制只放在前端，看懂 JS 逻辑就能绕过风控、伪造请求、篡改交易 / 查询参数。

// 获取用户订单接口
$.ajax({
  url: "/api/getOrder",
  method: "get",
  success: function(res){
    // 只在前端判断是否管理员
    if(res.isAdmin === true){
      // 展示全部订单
      showAllOrder(res.data);
    }else{
      alert("无权限");
    }
  }
})

漏洞：

攻击者 F12 删除if(res.isAdmin)判断代码，直接打印res.data，就能看到所有人订单；或者抓包直接调用/api/getOrder，后端没做身份校验，直接返回敏感数据→垂直越权。

安全风险 2

AJAX 参数前端可控，未做后端过滤（SQL 注入、越权）

let orderId = $("#orderId").val();
$.get("/api/orderDetail?id="+orderId, res=>{
  render(res);
})  //前端传订单 ID

漏洞：

攻击者抓包修改id=1001改为id=10088别人的订单，后端没校验该订单归属当前用户，直接返回数据→水平越权。

安全风险 3

异步接口未做 CSRF 防护

漏洞：

AJAX 请求默认携带 Cookie，无 token 校验，钓鱼网站可伪造 AJAX 请求篡改用户数据。

安全风险 4

接口路径、API 地址全部暴露在 JS 源码

漏洞：

前文提到的 JS 源码泄露接口，AJAX 全部写死接口地址，黑客批量扫描测试接口。

文件上传模块安全问题（前端 JS 过滤，后端依赖前端校验）

业务流程：页面选择文件→JS 校验后缀→AJAX 提交文件→PHP 后端接收

前端后缀校验可直接绕过（代码演示）

// 危险前端过滤代码
// 前端仅校验文件后缀
function checkFile(file){
  let suffix = file.name.split(".").pop();
  let allow = ["jpg","png","gif"];
  if(!allow.includes(suffix)){
    alert("仅允许图片");
    return false;
  }
  return true;
}

// 上传按钮事件
$("#upload").click(function(){
  let file = $("#file")[0].files[0];
  if(!checkFile(file)) return;
  // ajax上传
  let formData = new FormData();
  formData.append("img", file);
  $.ajax({url:"/upload.php", data:formData, processData:false, contentType:false, type:"POST"})
})

两种绕过方式

绕过 1：浏览器禁用 JavaScript

浏览器设置关闭 JS，checkFile函数不会执行，直接提交 .php、.asp 木马文件，后端如果不再二次校验，直接上传 webshell。

绕过 2：F12 修改 / 删除 JS 过滤代码

控制台删除checkFile函数，或修改允许后缀数组：

// 控制台执行覆盖原有过滤规则
allow = ["jpg","png","gif","php"]

直接上传 php 脚本。

后端仅信任前端校验，无二次校验（PHP 危险代码）

// upload.php 错误写法
<?php
// 完全不校验文件后缀、MIME、文件内容，直接保存
$file = $_FILES['img'];
$path = "./upload/".$file['name'];
move_uploaded_file($file['tmp_name'], $path);
echo "上传成功";
?>

后果：

前端过滤被绕过，上传 php 木马，访问 upload/木马.php 接管服务器。

附加上传漏洞衍生风险

1、前端仅校验文件名后缀，抓包修改文件名：xxx.jpg → xxx.php%00.jpg（00 截断，旧版本 PHP 可绕过）

2、仅校验 Content-Type 文件类型，可抓包伪造 MIME 类型绕过

登录验证模块安全问题（AJAX 登录，前端判断逻辑，后端校验薄弱）

完整错误业务代码

前端 AJAX 登录 JS 代码

$("#loginBtn").click(function(){
  let user = $("#user").val();
  let pwd = $("#pwd").val();
  // 简单前端长度校验
  if(pwd.length < 6){
    alert("密码至少6位");
    return;
  }
  // ajax提交登录
  $.post("/login.php", {username:user, password:pwd}, function(res){
    // 只在前端判断登录结果
    if(res.code == 200){
      location.href = "/admin";
    }else{
      alert("账号密码错误");
    }
  },"json")
})

后端 PHP 登录（存在缺陷）

<?php
$user = $_POST['username'];
$pwd = $_POST['password'];
// 简单查询，无防暴力破解、无验证码
$sql = "select * from user where username='$user' and password='$pwd'";
$res = mysqli_query($conn,$sql);
if(mysqli_num_rows($res) > 0){
  echo json_encode(["code"=>200,"msg"=>"登录成功"]);
}else{
  echo json_encode(["code"=>500,"msg"=>"失败"]);
}
?>

对应的 4 类安全漏洞详解

前端密码长度校验可绕过

绕过手段：

1、禁用 JS，前端pwd.length<6判断失效，直接提交 1 位密码暴力猜解；

2、F12 删除校验代码，控制台手动发起 AJAX 请求：

$.post("/login.php",{username:"admin",password:"123"},r=>console.log(r))

漏洞：后端没有密码长度限制，可暴力破解。

前端返回判断逻辑可篡改（无后端会话凭证）

1、极端缺陷场景：后端返回用户名是否为 admin，前端自行赋予权限（高危）

2、普通缺陷场景：

后端返回：

{"isAdmin":false,"code":200}

前端代码：

if(res.code===200 && res.isAdmin===true){
  window.isAdmin = true;
}

绕过：控制台执行 window.isAdmin=true，直接访问后台地址，后端没校验 Session，直接放行。

SQL 注入（后端直接拼接参数）

攻击者账号输入：admin' or 1=1 --

拼接后 SQL：

select * from user where username='admin' or 1=1 -- ' and password='xxx'

无需密码直接登录管理员账号。

无验证码、无登录失败次数限制→暴力破解

前端仅做简单拦截，禁用 JS 后可批量脚本循环发送 AJAX 请求，爆破后台账号密码。

补充：登录接口无 CSRF Token

攻击者搭建钓鱼页面，自动发送 AJAX 登录请求窃取账号。

安全问题核心根本原因

把安全校验放在前端 JS，前端不可信

1、JavaScript 代码完全暴露，任何人可查看、修改、删除、禁用；

2、所有前端的格式校验、长度校验、权限判断、后缀过滤都只能做用户体验优化，不能作为安全防线；

3、AJAX 异步接口如果后端缺少二次校验、权限判断、输入过滤，会产生越权、注入、文件上传、未授权访问漏洞。

修复通用方案

1、所有安全校验必须在后端完成：文件后缀、参数长度、权限、账号密码校验；

2、前端校验仅做辅助拦截，不能替代后端；

3、AJAX 接口增加 CSRF Token、请求签名校验；

4、文件上传：后端同时校验后缀、MIME、文件二进制内容，限制上传目录执行脚本权限；

5、登录模块：增加图形验证码、登录失败锁定、参数预编译防 SQL 注入、登录后校验 Session 身份；

6、敏感 API 增加接口访问频率限制，防止暴力扫描。