前端安全 完整精讲

前端安全 完整精讲一、同源策略一切安全的基础浏览器规定协议、域名、端口三者必须完全一致否则就是跨域。跨域时Cookie、LocalStorage 无法读取AJAX 请求被浏览器拦截DOM 无法访问目的防止恶意网站窃取用户数据、伪造请求。二、XSS 跨站脚本攻击1. 定义攻击者向网页注入恶意 JavaScript 代码使其在用户浏览器执行。2. 危害窃取 Cookie、Session劫持用户账号监听用户输入篡改页面、跳转钓鱼网站发动 CSRF3. 三种类型存储型 XSS最危险恶意代码存入数据库所有人访问都会执行。例评论区输入scriptsteal()/script反射型 XSS恶意代码在 URL 中诱导点击触发。例http://xxx?searchscriptalert(1)/scriptDOM 型 XSS前端 JS 直接把用户输入插入 DOM不经过后端。例innerHTML location.hash.substr(1)4. 防御方案必背对用户输入进行转义→lt;→gt;→quot;等Cookie 设置 HttpOnlyJS 无法读取从根源防止偷 Cookie使用 CSP内容安全策略限制脚本来源禁止内联脚本避免使用 innerHTML、outerHTML、document.write尽量用textContent前端框架自带防 XSSVue/React 默认转义插值表达式不会执行 HTML三、CSRF 跨站请求伪造1. 定义攻击者利用用户已登录状态在恶意网站自动发起请求冒充用户操作。2. 攻击流程用户登录 A 网站 → Cookie 保存用户打开恶意网站 BB 自动发送请求到 A如转账、删帖浏览器自动带上 A 的 Cookie → 请求成功3. 特点不需要注入 JS利用浏览器自动带 Cookie 的机制只能“发请求”不能“读数据”4. 防御方案使用 CSRF Token最有效后端生成随机 token 放入页面请求必须携带Cookie 设置 SameSiteStrict完全禁止跨站带 CookieLax大部分情况禁止仅安全 GET 允许验证 Referer / Origin判断请求来源是否合法敏感操作加验证码、二次验证改密码、支付、绑定手机四、点击劫持 Clickjacking1. 原理攻击者用透明 iframe把你的网站覆盖在恶意页面上诱导用户点击执行危险操作。2. 防御X-Frame-OptionsDENY禁止所有 iframeSAMEORIGIN只允许同域嵌套CSP 限制 frame-ancestors前端防嵌套脚本if(top!self){top.locationself.location}五、中间人攻击 MITM1. 原理攻击者在公共网络窃听、篡改你和服务器之间的数据。2. 防御全站 HTTPS证书锁定Certificate Pinning禁用 HTTP 明文传输六、Cookie 安全非常重要1. HttpOnlyJS 无法读取防止 XSS 偷 Cookie2. Secure仅 HTTPS 传输3. SameSiteStrict/Lax防 CSRF4. 过期时间合理设置避免长期有效七、CSP 内容安全策略作用从源头限制资源加载是防 XSS 终极手段。可限制脚本来源 script-src样式 style-src图片 img-src媒体、字体、连接、框架等示例Content-Security-Policy: default-src self; script-src self https://trusted.cdn; style-src self; img-src self data:;八、其他常见安全问题1. 文件上传漏洞校验后缀、类型、文件头随机文件名存放到非执行目录2. 敏感信息泄露不要把 token、密码存在 localStorage不要在 URL 传敏感信息控制台不要打印敏感数据3. 第三方依赖风险定期 npm audit不使用不知名、长期不维护的包九、前端安全 终极总结XSS注入脚本执行 → 转义、HttpOnly、CSP、框架保护CSRF跨站伪造请求 → Token、SameSite、Referer 校验点击劫持透明 iframe 诱导点击 → X-Frame-Options中间人攻击→ HTTPSCookie 安全→ HttpOnly Secure SameSite全局防护→ CSP代码安全→ 避免内联脚本、不信任用户输入