编程语言大前端算法
Web 应用架构与安全漏洞学习框架
系统梳理了 Web 应用架构的前后端分工及 API 交互流程，详细阐述了 JSON 数据格式、API 调用机制及安全性。重点分析了常见 Web 安全漏洞类型，包括 SQL 注入、XSS、文件上传、越权访问等，并结合 CTF 实战介绍了 PHP 特性、命令执行及文件包含等进阶技巧，旨在帮助学习者建立完整的 Web 安全防御体系。
系统梳理了 Web 应用架构的前后端分工及 API 交互流程，详细阐述了 JSON 数据格式、API 调用机制及安全性。重点分析了常见 Web 安全漏洞类型，包括 SQL 注入、XSS、文件上传、越权访问等，并结合 CTF 实战介绍了 PHP 特性、命令执行及文件包含等进阶技巧，旨在帮助学习者建立完整的 Web 安全防御体系。
前端（XSS, CSRF）- 后端（SQL，越权，文件上传，文件包含...）- 数据库
前端负责展示界面、收集数据、调用 API、处理响应。
构建界面：画出登录页面，有手机号输入框、密码输入框和'登录'按钮。
监听事件：用户点击'登录'按钮时，前端代码被触发。
收集与校验：前端获取输入框里的手机号和密码，先做基本校验（如手机号格式、密码非空）。
调用 API（最关键一步）：前端使用 axios 或 fetch 等工具，发送这个请求。这个动作就叫 '调用 API'。之后，前端就进入等待状态，控制权转移给后端。
https://api.yourservice.com/v1/user/loginPOSTContent-Type: application/json前端按照后端提供的 API 文档，组装一个 HTTP 请求。比如：
{"phone_number":"13800138000","password":"encryptedPassword123"}
后端负责接收请求、处理业务逻辑、操作数据库、返回结果。它通过 API 来暴露自己的能力。
https://api.yourservice.com/v1/user/login 这个地址上监听。收到前端发来的请求后，路由找到对应的处理函数（如 loginController）。SELECT * FROM users WHERE phone_number = '13800138000'，查询用户信息。组装并返回响应：后端处理完毕，按照 API 文档的约定，组装一个 HTTP 响应返回给前端。
响应体 (Body)：一个 JSON 对象。
{"code":200,"message":"登录成功","data":{"user_id":12345,"nickname":"张三","avatar":"https://xxx.jpg","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."}}
控制权随着 API 的响应，回到了前端。
code 是 200（成功），前端将 token 和用户信息保存到本地（如 localStorage），然后跳转到首页。code 是 401（密码错误），前端在页面上弹出提示：'手机号或密码错误'。| 角色 | 职责 | 与 API 的关系 |
|---|---|---|
| 前端 | 交互与展示。负责'是什么'和'怎么做'。 是什么：这是什么页面？按钮是什么颜色？ 怎么做：点击后数据怎么发？收到结果怎么显示？ | API 的调用方。严格按照 API 文档的格式'提问'。 |
| 后端 | 逻辑与数据。负责'能不能'和'给什么'。 能不能：这个用户能登录吗？密码对吗？ 给什么：登录成功后，返回什么数据给前端？ | API 的提供方。定义 API 的规则，并实现 API 背后的所有复杂逻辑。 |
| API (HTTP 接口) | 前后端的'合同'/'菜单'。 | 分工的边界与协作的桥梁。它明确规定了： 1. 地址 (URL)：请求发到哪？ 2. 方法 (Method)：是查询 (GET) 还是提交 (POST)？ 3. 格式 (Format)：前端怎么传数据 (Params/Body)？后端怎么返回数据 (JSON 结构)？ |
整个过程就像一个流水线：
前端（客户端） -> （通过 API 发出请求） -> 后端（服务器） -> （处理业务、操作数据库） -> 后端 -> （通过 API 返回响应） -> 前端 -> （更新界面）。
API 就是这条流水线上的标准化传输带和货物装箱规范，确保前后端两个不同的'工厂'能无缝协同工作。
JSON 是一种轻量级的数据交换格式，可以理解为一种在网络中传输数据的、人和机器都能看懂的'通用语言'。
举例：
{"name":"张三","age":25,"isStudent":false,"hobbies":["阅读","编程","篮球"],"address":{"city":"北京","street":"中关村大街"}}
是，但不仅仅是。 API 的核心是'接口'，任何能按照约定发送请求的程序，都可以是调用方。
结论：前端是 API 的主要使用者，但 API 是为所有'客户端' 设计的。这里的'客户端'指任何需要该服务的程序。
答案是：不仅有，而且这是 API 安全最主要的威胁之一，也是安全工程师工作的重中之重。
'跨过前端' 是极其常见且容易的。因为任何发送到网络的请求，本质上都是一段遵循 HTTP/HTTPS 协议的数据包。攻击者根本不需要你的前端界面。
'amount': 100 改成 'amount': 1000000。GET /api/user/profile?user_id=123user_id 改成 124，就可能看到用户 124 的资料。这就是'水平越权'。GET /api/admin/all_users，普通用户如果尝试调用，就可能是'垂直越权'。正因为前端完全不可信，所以所有安全校验都必须放在后端。
终极结论：
API 就像你家房子的门。 前端 App 是正大光明从门进来的客人。但攻击者会尝试撬锁、翻窗、伪造钥匙，甚至用攻城锤撞门。后端安全工程师的工作，就是安装最坚固的门锁、设置警报系统、在屋内每个房间门口再加一道安检，确保无论请求从哪里、以何种方式过来，非法者都无法得逞。
是的，攻击者不仅可以轻易'跨过前端'伪造调用，这本身就是网络安全攻防的主战场。 一个健壮的 API 后端，必须假定所有来自前端的请求都可能是恶意的，并在此基础上进行层层验证。
Linux 和 Windows 环境下均存在读取敏感文件的风险。
核心原理正是'利用已知路径，通过访问行为写入恶意代码，再包含执行'。
检验是否存在：出现弹窗，说明代码被执行了，漏洞是存在的。还可以获得网页 cookie。
永久性，常见于留言框，评论等实现保存 + 展示的地方。无需用户访问包含恶意代码的 URL。XSS 钓鱼，XSS 挂码，XSS 蠕虫。比前面的漏洞危害更大。也可以用反射型的方式测试，也会有弹窗，而且是永久性的，哪怕刷新也会继续弹出。会发现 JavaScript 已经作为页面源代码插入与执行。
| 特征 | 存储型 XSS | 反射型 XSS |
|---|---|---|
| 存储位置 | 服务器数据库 | 不存储，在 URL 中 |
| 触发条件 | 访问被污染页面 | 必须点击恶意链接 |
| 持久性 | 永久（直到管理员删除） | 一次性（关闭页面即失效） |
| 攻击场景 | 留言板、评论、用户资料 | 搜索框、错误页面、URL 参数 |
| 危害等级 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
利用 BurpSuite 抓包，send to intruder，导入字典，即可暴力破解。
基于数据库，web 应用。
攻击者和受害者权限级别相同，攻击者通过修改参数等手段，访问受害者资料。
攻击者和受害者权限级别不同，分为常见的向上越权（admin）和向下越权。
以 DVWA 这道题为例。先抓包，了解到是通过 GET 传参更改的 password。
GET /vulnerabilities/csrf/?password_new=password&password_conf=password&Change=Change
在存储型 XSS 处抓包，改包，由于 cookie 一样，虽然是不同的站点，仍然可以实现更改密码操作。这是错误演示，因为 XSS 仍然要求通过 POST 传参，不能直接更改，而是要用它能接受的方式（同前面 XSS 测试）传参。
正确的 Payload 示例：
<img src="http://127.0.0.1:42001/dvwa/vulnerabilities/csrf/?password_new=password1&password_conf=password1&Change=Change" style="display:none;"/>
可以发现发出去以后马上收到了另一个更改密码的包，这个是来自 CSRF 的。
攻击者诱导服务器向内网/外部发送请求，可能用于探测内网信息或读取敏感文件。
例如：?url=file:///etc/passwd
强弱类型比较、科学计数法。
strcmp、md5、hash（都是接收到数组就返回 NULL）。
is_numeric（自动转换，如 404a 转换成 404）。
注释（F12 看）、robots.txt（防爬虫，但是有的时候暴露重要信息或路径）、JS 信息泄露（前端代码审计）、Vim 信息泄露（先下载，再用 Linux 系统命令 vim -r 文件名 查看）。
特征：$$。传参：GLOBALS，会输出所有变量。
Cookie、X-Forwarded-For。
变量函数（$a, $b 这样的可以传入参数如 system cat）。
异或或者自增，变量为$_（可以下划线作为变量名避免出现字母）。
绕过 0：用弱比较漏洞返回 false。
绕过 A：利用数组的 array 的第一个字母，然后利用自增可以得到所有字母。
取反。原字符串：system。按每个字母转化成 ASCII 对应数字：[115, 121, 115, 116, 101, 109]。数组中每个数字写成二进制，然后按位取反 [140, 134, 140, 139, 154, 146]。十进制转化成十六进制，然后 URL 编码。
与上面的比起来更直接，一般可以直接获得 flag。
; 和 & 两个都执行，不管前面的真假。
| 直接执行后面的。
|| 逻辑或，前假才后。
&& 逻辑与，前假后不执行。
%0a 换行。
拼接，通配符 *，?，分割 \。
方法一：?file=data://text/plain,aaa（传入文本内容 aaa）。
方法二：?file=php://input 通过抓包 POST 传参。
需 allow_url_include=On (PHP 配置)。包含远程 URL（如 http://attacker.com/evil.txt）。
目录遍历、已上传（图片马、日志等）。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online