前端安全测试该从哪入手？

❤雨欣提问于 2026-03-12 15:39:20 阅读 62

安全

我们团队最近开始搞安全开发生命周期，轮到我负责前端的安全测试。但我有点懵，不知道该测哪些点——XSS、CSRF 这些听说过，但具体怎么测？用什么工具？

比如我试过在输入框里输 alert(1)，但页面没反应，是说明没问题吗？还是说我的测试方式太简单了？有没有系统一点的 checklist 或者自动化方案？

安全开发生命周期安全测试

我来解答赞 12 收藏

反馈

1 条解答

上官萍萍 Lv1

先回答你的核心困惑：alert(1)没反应不等于安全。现代前端框架（React、Vue等）默认会转义内容，浏览器也有XSS过滤器，你的payload可能根本没机会执行。真正的测试要比这复杂得多。

前端安全测试的的几个重点方向

XSS（跨站脚本攻击）是前端最常考量的攻击面，分为三种类型，反射型和存储型比较好理解，DOM型比较坑——它完全在客户端发生，后端日志根本看不到。测试DOM型XSS要重点关注这些API：innerHTML、outerHTML、document.write、eval、setTimeout/setInterval的第一个参数、还有各种事件处理器。

CSRF（跨站请求伪造）的测试关键是看请求有没有随机token保护。你可以试着去掉cookie或者在另一个域名下发请求，看看服务器还认不认这个请求。

点击劫持就是把你的页面嵌套在透明的iframe里，诱导用户点击。测试方法很简单，检查响应头里有没有X-Frame-Options或者CSP的frame-ancestors指令。

具体的测试checklist

XSS测试要准备多payload，因为单一payload容易被过滤。基础的可能无效，但、、这些变体经常能绕过。DOM型XSS还要关注URL参数直接写入页面的场景，比如?redirect=https://evil.com这种。

CSRF测试先看表单有没有csrf token，再看token是否绑定用户session，然后尝试删除token或者用无效token发请求，看服务器是否正确拒绝。

敏感信息泄露要检查localStorage/sessionStorage里有没有存token或用户隐私数据，控制台Network面板看请求返回有没有泄漏敏感字段。

自动化工具和方案

如果想要半自动化，可以用OWASP ZAP的爬虫功能扫一遍，它能发现常见的XSS和CSRF问题。配合npm的audit工具检查依赖漏洞：

# 检查依赖漏洞

npm audit



# 加上fix参数自动修复

npm audit fix

对于前端代码，可以用eslint-plugin-security这个插件，它会在lint阶段检测危险API的使用：

// .eslintrc.js 配置

module.exports = {

  plugins: ['security'],

  rules: {

    // 检测eval使用

    'security/detect-eval-with-expression': 'error',

    // 检测不安全的正则

    'security/detect-non-literal-regexp': 'error',

    // 检测不安全的innerHTML

    'security/detect-innerhtml': 'warn',

    // 检测console.log是否会泄露敏感信息（生产环境禁用）

    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'

  }

};

一个简单的CSRF测试脚本示例

// csrf-test.js

const fetch = require('node-fetch');



async function testCSRF(targetUrl, cookie) {

  // 测试1：不带CSRF token的请求

  const noTokenResponse = await fetch(targetUrl, {

    method: 'POST',

    headers: {

      'Content-Type': 'application/json',

      'Cookie': cookie

    },

    body: JSON.stringify({ action: 'delete', id: 123 })

  });

  

  console.log('无token请求状态:', noTokenResponse.status);

  // 如果返回200说明没有CSRF保护，很危险

  

  // 测试2：跨域发送请求（模拟CSRF攻击）

  try {

    const corsResponse = await fetch(targetUrl, {

      method: 'POST',

      mode: 'no-cors', // 跨域模式

      body: JSON.stringify({ action: 'transfer', amount: 9999 })

    });

    console.log('跨域请求发送成功，可能存在CSRF漏洞');

  } catch (e) {

    console.log('跨域请求被阻止');

  }

}



// 使用方式

testCSRF('https://your-app.com/api/action', 'session=abc123');

需要注意的常见坑

很多前端开发者会忽略一点：前端的安全措施主要是提升攻击门槛，真正的安全验证必须在后端完成。比如你可以在前端做输入过滤和转义，但后端必须重新验证和过滤，因为攻击者可以直接绕过前端直接调用API。

还有就是CSP（内容安全策略）这个好东西配置起来比较复杂，很多团队嫌麻烦就放弃了，其实它能有效阻止XSS攻击和跨域请求。

最后说句掏心话：自动化工具只能发现大概70%的问题，剩下那些业务逻辑相关的漏洞（比如越权操作、参数篡改）还是得靠人工代码审计。你们团队要是刚起步做SDL，可以先把XSS和CSRF的基础防护做了，再逐步覆盖其他攻击面。

2026-03-12 16:04