安全思维链

1. XSS:代码被注入执行

现象用户评论里有 script,别人访问就执行了

本质:攻击者把恶意 JS 注入到网页里,在其他用户浏览器执行。本质是"用户输入被当代码执行了"。防御核心:输入输出永远分离(转义)。

🌊 顺藤摸瓜

① 为什么能注入

用户输入的内容被直接渲染到页面 → 没有转义 → <script> 被当代码执行 → Vue 的 {{}} 默认转义安全,v-html 危险

v-html 危险{{}} 安全未转义输出

② 危害

偷 Cookie/Token → 冒充用户 → 篡改页面 → 键盘记录 → 挖矿 → 蠕虫传播(存储型最严重)

偷 Cookie冒充用户蠕虫

③ 防御

① 输出转义(< → <);② 必须 v-html 用 DOMPurify 清洗;③ CSP 限制脚本来源;④ HttpOnly Cookie 防 JS 偷

输出转义DOMPurifyCSPHttpOnly

2. CSRF:冒充你发请求

现象你在银行网站登录着,访问了恶意网站,钱被转走了

本质:恶意网站向你登录的网站发请求,浏览器自动带上你的 Cookie,于是冒充了你。本质是"Cookie 被自动携带导致身份被冒用"。

🌊 顺藤摸瓜

① 和 XSS 区别

XSS:在你网站内注入代码执行(偷东西);CSRF:从别的网站冒充你发请求(借你身份)。XSS 防"注入",CSRF 防"冒充"

XSS 注入执行CSRF 冒充请求

② 防御

① CSRF Token(一次性 token,攻击者拿不到);② SameSite Cookie(跨站不带);③ Referer 校验;④ 关键操作二次验证

CSRF TokenSameSiteReferer 校验

3. 越权 IDOR:改 URL 看别人数据

现象改 URL 的 userId,看到别人的订单

本质:后端只校验"登录了没",没校验"这资源是不是你的"。防御核心:每个接口校验资源归属。前端隐藏菜单没用,用户能绕过前端。

🌊 顺藤摸瓜

① 两种越权

水平越权(同级用户互相看);垂直越权(普通用户调管理员接口)

水平越权垂直越权

② 防御

后端校验资源归属(查/改/删前判断 userId 是否匹配)→ 前端隐藏按钮只是体验 → 安全命门在后端

后端校验归属前端隐藏无用

4. SQL 注入:拼接 SQL 的灾难

现象登录框输入 ' OR 1=1,直接进了系统

本质:用户输入被拼接到 SQL 里,输入里的 SQL 片段被执行。防御核心:永远用参数化查询,不拼接字符串。

🌊 顺藤摸瓜

① 为什么能注入

"SELECT * FROM user WHERE name='" + input + "'" → 输入 ' OR 1=1 -- → 变成 WHERE name='' OR 1=1 → 永真,返回所有用户

字符串拼接 SQL输入被当代码

② 防御

参数化查询(预编译):MyBatis 用 #{} 不用 ${};JDBC 用 PreparedStatement → 输入当数据不当代码

参数化查询#{} 不用 ${}PreparedStatement

5. Token 存哪:安全权衡

本质:Token 存哪都有风险 —— localStorage 易受 XSS,HttpOnly Cookie 防 XSS 但易 CSRF。没有完美方案,是权衡。

🌊 顺藤摸瓜

① localStorage

JS 可读 → 灵活(自定义 header)→ 但易受 XSS(JS 注入就能偷)→ 配 CSP 防 XSS

② HttpOnly Cookie

JS 读不到 → 防 XSS 偷 → 但自动带请求 → 易受 CSRF → 配 SameSite 防 CSRF

③ 推荐

accessToken 存内存(刷新页丢,防 XSS)→ refreshToken 存 HttpOnly Cookie(防 XSS 偷 + SameSite 防 CSRF)→ 兼顾安全体验

总结

攻击	本质	防御核心
XSS	用户输入被当代码执行	转义/DOMPurify/CSP
CSRF	冒充你发请求(Cookie 自动带)	CSRF Token/SameSite
越权 IDOR	后端没校验资源归属	后端校验 userId 匹配
SQL 注入	输入拼接到 SQL	参数化查询(#{} / PreparedStatement)
Token 被偷	存储方式有漏洞	内存+HttpOnly Cookie 权衡

安全本质:所有攻击都在利用"信任边界被打破" —— 用户输入被当代码(XSS/SQL注入)、Cookie 被自动带(CSRF)、前端校验被绕过(越权)。原则:永远不信任输入,安全命门在后端。