前言很多前端开发者认为安全全部是后端的事情前端不需要关心。实际上很多攻击入口来自前端页面本篇讲 4 种常见攻击原理、复现条件、防御方案以及项目开发中编码规范。1.XSS 跨站脚本攻击XSS向页面注入恶意 JS 脚本。分为存储型、反射型、DOM 型 XSS。存储型恶意代码存入数据库所有访问页面的用户都会执行脚本。DOM 型纯前端 DOM 操作把用户输入直接 innerHTML 渲染。危险代码会触发 XSS 攻击js运行//用户输入 scriptalert(盗取cookie)/script let userInput scriptalert(攻击)/script document.getElementById(box).innerHTML userInputinnerHTML 直接渲染用户输入内容脚本会执行。防御手段输入输出做转义把 转义为 html 实体字符。尽量不要使用 innerHTML 渲染用户输入内容使用 textContent。设置 CSP 内容安全策略限制脚本来源。Cookie 设置 HttpOnlyjs 无法读取 cookie防止 cookie 被窃取。简单转义函数js运行function htmlEscape(str){ if(!str) return return str.replace(//g,amp;) .replace(//g,lt;) .replace(//g,gt;) .replace(//g,quot;) .replace(//g,#039;) }2.CSRF 跨站请求伪造原理诱导用户访问恶意网站利用用户浏览器已经登录的身份偷偷发送请求。用户已经登录 A 网站访问恶意 B 网站B 网站自动发起对 A 网站的接口请求浏览器自动带上 A 网站 cookie。防御请求携带 token后端校验 token最常用校验 Referer 请求来源使用 SameSite Cookie 属性3. 点击劫持原理恶意页面用透明 iframe 盖住按钮诱导用户点击用户以为点的是当前页面实际点击 iframe 里面的按钮。防御后端设置 X‑Frame‑Options禁止页面被 iframe 嵌套。4. 前端加密误区重点面试题前端加密能不能保证数据安全 答案前端加密不能保障绝对安全只能防小白不能防黑客。前端所有代码都可以被调试器看到密钥暴露在前端是可以被破解的。 敏感数据真正安全必须依靠 HTTPS 传输 后端校验。 前端 btoa/base64 只是编码不是加密可以直接解码。业务场景密码可以前端做简单哈希但是后端仍然需要二次加密存储。前端开发安全编码规范用户输入内容渲染优先 textContent使用 innerHTML 必须先转义。所有接口请求带上 token不要单纯依赖 cookie 鉴权。不要把密钥、密码等敏感信息写在前端代码。避免 eval、new Function 执行用户传入的字符串。开启 HTTPS禁止 http 明文传输。面试真题简答QXSS 和 CSRF 的区别 XSS执行恶意 JS 脚本盗取用户信息 CSRF盗用用户身份伪造请求 XSS 不需要用户登录状态CSRF 依赖用户已经登录。本篇小结安全知识是中高级前端必备面试经常问到写进简历可以体现你的工程思维。