杂记 01：F12、编码识别、Requests 与 Linux 文件命令

一、浏览器 F12 开发者工具详解

按 F12 或页面右键【检查】即可打开开发者工具，是前端调试与 Web 渗透的基础利器。

1.1 顶部核心标签

标签	作用	使用场景
元素（Elements） ⭐最常用	查看、临时修改网页 HTML 结构 + CSS 样式	改页面文字、调布局、看 DOM
控制台（Console）	JS 运行窗口，打印日志与报错信息，可直接执行 JS 代码	排查报错、快速测试脚本
源代码（Sources）	查看网页加载的 JS / CSS / 图片等原始文件，支持断点调试	分析前端逻辑、下断点
网络（Network） ⭐渗透常用	监控页面所有请求：接口、图片、AJAX、表单提交	抓接口、看请求参数与响应
性能（Performance）	录制页面运行过程，分析卡顿、加载慢的原因	前端性能优化

Network 面板核心信息：请求 URL、请求方法（GET/POST）、请求头、响应内容、状态码（200 成功 / 404 不存在 / 500 服务器错误）。勾选【保留日志】可防止页面跳转后清空记录。

1.2 元素（Elements）面板分区

• 上半区：DOM 树 —— 网页 HTML 树形结构，html → head → body 层层嵌套，即网页骨架。:before / :after 是 CSS 伪元素，不是真实 HTML 标签。

• 下半区：样式面板

  • 样式：当前选中元素生效的 CSS，可勾选禁用、修改数值实时调试；

  • 已计算：查看元素最终生效的真实宽、高、字体、颜色；

  • 布局：查看盒模型（margin、border、padding、content 尺寸）。

核心技巧：点击左上角箭头图标（选择元素），再点网页任意内容，可自动定位到对应 DOM 代码。所有修改只作用于本地浏览器显示，不修改服务器原始代码，刷新即恢复，可放心试错。

1.3 高频实操场景

场景	操作
查看 / 临时修改网页文字	Elements 中找到对应 <div>，双击文字直接修改，浏览器立即生效
抓取接口、查看提交数据	Network 中刷新页面，筛选 Fetch/XHR 查看前后端接口通信
页面排版错乱，调试 CSS	选中错乱元素，在样式面板修改 width、display、flex、grid 等参数
查找网页报错	切到 Console，红色报错即为 JS 代码问题，逐条排查

1.4 快捷键速查

快捷键	功能
F12 / Ctrl+Shift+I	打开 / 关闭开发者工具
Ctrl+Shift+C	快速激活【选取元素】箭头
Ctrl+R	刷新页面
Esc	底部调出控制台（其他标签页可同时显示 Console）

二、五种常见编码识别速查表（CTF 必背）

核心认知：编码 ≠ 加密，以上五种编码均可逆向还原。做题时先看特征，一秒判断类型。

2.1 特征识别总表（先看格式）

编码	标志性外观特征	识别口诀
Base64	字符集 A-Z a-z 0-9 + /，末尾常有 = 填充	大小写字母数字 + /，末尾可能带 =
HEX（十六进制）	只有 0-9 a-f，常两两一组，有时空格分隔	只有 09、af，两字符代表 1 字节
HTML 实体编码	以 &# 开头：&#十进制; 或 &#x十六进制;	看到 &# / &#x → HTML 实体
Unicode 转义（\u）	\u + 4 位十六进制，如 \u597D	看到 \uXXXX → JS/JSON Unicode 转义
URL 编码（百分号编码）	% + 两位十六进制，如 %66%6c	看到大量 %xx → URL 编码

2.2 五种编码详解（统一明文：flag{abc}）

① URL 编码（百分号编码）

• 格式：% + 两位十六进制

• 示例：

%66%6c%61%67%7b%61%62%63%7d

• JS 解码：decodeURIComponent()；Python 解码：urllib.parse.unquote()

• 用途：HTTP URL、GET/POST 参数中传输特殊字符

• 双重编码特征：% 被编码为 %25

② HEX 十六进制编码

• 格式：连续或空格分隔的 0-9 a-f，每 2 字符 = 1 字节

• 示例：

66 6c 61 67 7b 61 62 63 7d

• JS 解码：String.fromCharCode(parseInt(xx, 16))；Python 解码：bytes.fromhex(...)

• 用途：流量抓包、二进制数据展示、文件十六进制视图

③ Base64

• 字符：大小写字母、数字、+ /，结尾 = 填充

• 示例：

​​​​​​​ZmxhZ3thYmN9

• JS 解码：atob()；Python 解码：base64.b64decode()

• 用途：二进制转文本，图片、文件、Cookie 中常见

④ HTML 实体编码

• 十进制：

​​​​​​​flag{abc}

• 十六进制：

​​​​​​​flag{abc}

• JS 解码：新建 div，innerHTML 赋值后读取 innerText；Python 解码：html.unescape()

• 用途：网页源码转义 < > & " 等特殊符号、防 XSS

⑤ Unicode 转义（\uXXXX，JS/JSON）

• 格式：\u + 4 位十六进制

• 示例：

\u0066\u006c\u0061\u0067\u007b\u0061\u0062\u0063\u007d

• 中文示例：\u597D（好）

• JS 特性：放入字符串引号内自动解析，无需额外函数

• ⚠️ 注意区分：\uXXXX（JS 字符串）vs &#xXXXX;（网页 HTML 实体），二者极易混淆

2.3 快速判断流程（做题步骤）

1. 字符串大量 %xx → URL 编码

2. 字符串大量 &#x / &#数字 → HTML 实体

3. 字符串大量 \uXXXX → Unicode 转义

4. 只有 0-9 a-f、两两一组 → HEX 十六进制

5. 大小写字母数字、含 +/、末尾可能有 = → Base64

2.4 常见陷阱：多层嵌套编码

题目常出现"两次编码"，如：明文 → HTML 实体 → Base64 包装。解码顺序：从外层向内层逐层解开，切忌一步到位。

---

三、Python Requests 库详解

Requests 是 Python 第三方 HTTP/1.1 客户端库，口号 HTTP for Humans（作者 Kenneth Reitz），底层封装 urllib3，API 简洁，是爬虫、接口测试、CTF Web 最常用的库。支持 GET/POST/PUT/DELETE、自动连接池、Cookie 持久化、SSL 校验、代理、文件上传、自动编码处理。

3.1 六个基础请求方法

requests.get()     # 获取资源
requests.post()    # 提交数据（表单 / json，靶场代码最常用）
requests.put()     # 更新资源
requests.delete()  # 删除资源
requests.head()    # 只拿响应头，不下载 body
requests.options() # 获取服务器支持的请求方法

3.2 通用参数详解

① headers —— 请求头（字典）

模拟浏览器，携带 UA、Cookie、Token、Content-Type：

​​​​​​​headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) Firefox/143.0",
    "Referer": "http://xxx",
    "Cookie": "PHPSESSID=abc123"
}
res = requests.get(url, headers=headers)

② params —— GET 查询参数

自动拼接到 ? 后面并编码，避免手动拼接 URL 出错：

payload = {"name": "admin", "id": 1}
res = requests.get("http://httpbin.org/get", params=payload)
# 等价于 http://httpbin.org/get?name=admin&id=1
print(res.url)

③ POST 核心：data vs json（CTF 高频考点）

参数	提交格式	Content-Type	适用场景
data={}	表单键值对 a=1&b=2	application/x-www-form-urlencoded	传统表单（靶场代码常用）
json={}	JSON 字符串（自动 json.dumps 序列化）	application/json	REST 接口

# 表单提交

res = requests.post(url, data={"flag": "1"})

# JSON 提交，请求体为 {"flag": "1"}

res = requests.post(url, json={"flag": "1"})

④ timeout —— 超时（生产 / 靶场必加）

超过设定时间未返回直接抛异常，防止脚本卡死：

res = requests.get(url, timeout=5)          # 统一超时
res = requests.get(url, timeout=(3, 10))    # (连接超时, 读取超时)

⑤ cookies —— 手动传入 Cookie 字典

cookies = {"PHPSESSID": "xxxx"}
res = requests.get(url, cookies=cookies)

⑥ verify —— SSL 证书校验

HTTPS 默认校验证书，靶场自签名证书会报错，可关闭（仅限练习环境）：

res = requests.get("https://xxx", verify=False)

⑦ proxies —— 代理（Burp 抓包必备）

proxies = {
    "http": "http://127.0.0.1:8080",
    "https": "http://127.0.0.1:8080"
}
res = requests.get(url, proxies=proxies, verify=False)

⑧ allow_redirects —— 是否跟随重定向

默认 True；CTF 遇到 302 跳转想查看原始响应时关闭：

res = requests.get(url, allow_redirects=False)

⑨ files —— 文件上传（multipart/form-data）

files = {"upload": open("test.txt", "rb")}
res = requests.post(url, files=files)

3.3 Response 对象（请求返回结果，核心）

res = requests.get(url)

属性 / 方法	含义
res.status_code	HTTP 状态码：200 成功、404 不存在、401 未授权、500 服务器错误
res.text	自动解码后的字符串文本（网页源码、flag）
res.content	原始 bytes 二进制，下载图片、文件用
res.json()	将返回文本解析为 Python 字典（接口返回 JSON 才可用，否则抛异常）
res.headers	服务器响应头（字典）
res.cookies	服务器返回的 CookieJar 对象
res.url	最终请求的 URL（重定向后的地址）
res.encoding	当前编码，可手动设置 res.encoding = "utf-8"
res.raise_for_status()	状态码为 4xx/5xx 时主动抛出 HTTPError 异常

⚠️ 重点区分：text 是字符串（网页、flag 文本），content 是字节（图片、压缩包），json() 是方法，括号不能丢。

3.4 Session 会话对象

普通 requests.get/post 每次请求都是全新连接，不会自动保存 Cookie；

而 Session() 会自动持久化 Cookie、复用 TCP 连接，可完整模拟浏览器登录状态：

import requests
​
s = requests.Session()
# 登录后，服务器 set-cookie 自动存入 session
s.post("http://xxx/login", data={"user": "admin", "pass": "123456"})
# 访问需要登录的 flag 页面，自动携带 Cookie
res = s.get("http://xxx/flag")
print(res.text)

还可设置全局默认请求头：

s.headers.update({"User-Agent": "Firefox/143"})

3.5 异常体系（写稳健脚本必备）

所有异常均继承自 requests.exceptions.RequestException：

异常	触发场景
ConnectionError	网络不通、DNS 失败、拒绝连接
Timeout	请求超时（含 ConnectTimeout / ReadTimeout 子类）
HTTPError	调用 raise_for_status() 后，4xx/5xx 抛出
TooManyRedirects	重定向次数超限
SSLError	SSL 证书校验失败

统一捕获示例：

import requests
​
try:
    res = requests.get(url, timeout=3)
    res.raise_for_status()
except requests.exceptions.RequestException as e:
    print(f"请求出错：{e}")

---

四、Linux 常用文件命令速查

4.1 文件查看类

① cat —— 查看文件内容

cat /tmp/flag.txt

• cat > test.txt：创建并写入文件；

• cat file1 file2：拼接多个文件

② tac —— 反向输出（行倒序）

tac /tmp/flag.txt

cat 从上往下读，tac 从最后一行向上输出，顺序恰好相反。

③ head —— 查看文件开头（默认前 10 行）

head /tmp/flag.txt      # 默认前 10 行
head -n 3 /tmp/flag.txt # 指定前 3 行

④ tail —— 查看文件末尾（默认最后 10 行）

tail /tmp/flag.txt       # 默认最后 10 行
tail -n 3 /tmp/flag.txt  # 取最后 3 行
tail -f /tmp/flag.txt    # 实时监听新增内容（看日志常用）

⑤ more —— 分页浏览（只能向下翻页）

more /tmp/flag.txt

交互按键：空格翻页、回车下一行、q 退出。

⑥ less —— more 增强版（推荐）

less /tmp/flag.txt

常用交互：空格下一页、b 上一页、/关键词 向下搜索、?关键词 向上搜索、q 退出。

⑦ nl —— 打印行号

nl /tmp/flag.txt     # 默认空行不显示行号
nl -b a /tmp/flag.txt  # 空行也添加行号

区别：cat -n 所有行都编号；nl 默认空行不显示行号。

4.2 文本处理类

⑧ sort —— 按行排序（默认字典序）

sort /tmp/flag.txt          # 字典序排序
sort /tmp/flag.txt | uniq   # 排序后去重
sort -r /tmp/flag.txt       # 逆序
sort -n /tmp/flag.txt       # 按数字大小排序

⑨ uniq —— 去除相邻连续重复行

sort /tmp/flag.txt | uniq    # 排序后全局去重
sort /tmp/flag.txt | uniq -c # 统计各行重复次数

uniq 单独使用只能去除相邻重复行，全局去重需搭配 sort。 参数：-c 统计次数、-d 只显示重复行、-u 只显示唯一不重复行。

4.3 文件操作类

⑩ cp —— 复制文件或目录

cp /tmp/flag.txt /home/flag.txt  # 文件复制
cp -r 源目录 目标目录             # 递归复制目录

⑪ mv —— 移动文件 / 重命名

mv /tmp/flag.txt /home/  # 移动文件
mv old.txt new.txt       # 重命名

---

参考资料

• 浏览器 F12 开发者工具的使用 - CSDN 博客