web前端黑客技术揭秘

打开浏览器开发者工具，端黑切到Console面板，客技输入一行`document.cookie`，术揭回车。端黑如果你的客技网站没有设置HttpOnly标志，这条命令就能直接吐出当前域下的术揭所有Cookie。XSS攻击的端黑入口，有时候就这么简单。客技

前端安全常被当成后端的术揭事。很多人觉得前端不就是端黑写写页面、调调接口，客技能有什么黑客技术可言？术揭恰恰相反——浏览器是攻击者离用户最近的地方，也是端黑防御链上最薄弱的环节。用户输入的客技数据在这里渲染，第三方的术揭脚本在这里执行，跨域请求从这里发出。每一个环节都是潜在的突破口。

XSS：最古老的漏洞，最顽强的存在

跨站脚本攻击（XSS）排在OWASP Top 10里超过十五年，至今没被踢出去。原因不复杂：只要开发者还把用户输入直接拼进HTML，XSS就永远有生存空间。

反射型XSS最常见。攻击者构造一个带恶意参数的URL，诱导用户点击。比如搜索页面直接把关键词回显到页面上，URL里塞一段<script>标签，页面就执行了。存储型更麻烦——恶意代码被存进数据库，每个访问该页面的用户都会中招。评论区、用户昵称、个性签名，都是重灾区。

DOM型XSS则完全发生在浏览器端。看这段代码：

var name = location.hash.slice(1); document.getElementById('greeting').innerHTML = 'Hello, ' + name;

URL的hash部分不会发给服务器，WAF根本看不到。攻击者构造#<img src=x onerror=alert(1)>，页面直接把这段HTML塞进innerHTML，图片加载失败触发onerror，脚本执行。服务器日志里干干净净。

CSRF：借你的手，做我的事

跨站请求伪造的思路完全不同。攻击者不需要注入脚本，只需要让用户的浏览器“自愿”发出一个请求。假设某银行转账接口是GET /transfer?to=xxx&amount=1000，攻击者在自己页面上放一个<img src="https://bank.com/transfer?to=hacker&amount=10000">。用户登录着银行网站，浏览器加载这张图片时自动带上Cookie，转账就完成了。

防御手段说起来也简单：关键操作改用POST，加CSRF Token，检查Referer头，设置SameSite Cookie属性。但实际项目中，总有开发者图省事用GET做状态变更，或者Token校验逻辑写漏了某个接口。

供应链攻击：你信任的CDN可能正在偷数据

2018年，攻击者入侵了流行JavaScript库event-stream的维护者账号，在依赖包中植入恶意代码，目标是Copay比特币钱包的用户。代码藏得很深——只在特定条件下激活，窃取钱包私钥后发往指定服务器。

前端项目动辄依赖几百个npm包，每个包又有自己的依赖树。你审计过每一个吗？大部分团队连npm audit都不跑。CDN上的第三方脚本同样危险——加载一个被篡改的分析脚本，等于把用户的键盘输入、表单数据、甚至Cookie全部交出去。

Subresource Integrity（SRI）能缓解这个问题。给<script>标签加上integrity属性，浏览器会校验文件哈希值，不匹配就拒绝执行。但SRI只保护静态资源，对于动态加载的模块无能为力。

点击劫持与浏览器指纹

点击劫持利用的是视觉欺骗。攻击者用透明iframe覆盖在诱导按钮上，用户以为自己在点“领取优惠券”，实际点的是“确认转账”。X-Frame-Options和CSP的frame-ancestors指令可以阻止页面被嵌套，但很多网站至今没配。

浏览器指纹则是另一条路。Canvas指纹、WebGL指纹、字体列表、屏幕分辨率、时区、语言——这些信息组合起来，能在用户无感知的情况下生成一个高概率唯一的标识。即使用户清了Cookie、开了隐私模式，指纹依然能追踪到。Tor Browser专门做了字体和Canvas的混淆来对抗，普通Chrome用户基本是裸奔状态。

前端安全没有银弹。CSP能挡XSS但配置复杂容易出错，SRI能防篡改但覆盖率有限，SameSite Cookie能挡CSRF但旧浏览器兼容性差。真正有效的做法是把这些机制叠起来用，同时在代码层面保持警惕——每次写innerHTML之前停一秒，每次加载第三方脚本之前问一句“真的需要吗”。浏览器给了前端强大的能力，也给了攻击者同样的工具。谁更了解这些工具，谁就占上风。