一、先搞懂：前端安全的核心逻辑
前端永远不能信任：用户输入、URL 参数、本地存储、第三方接口、第三方 JS 插件、浏览器传过来的任何数据。
前端安全三件核心目标：
- 防止恶意代码注入（XSS）
- 防止身份冒用、请求伪造（CSRF）
- 防止敏感信息泄露、越权访问、被劫持、被抓包
二、日常编码层面：写代码时必须遵守的安全规则
1. HTML 层面安全（防 XSS 基础）
禁止危险写法
❌ 绝对不要用：
<!-- 直接拼接用户内容 -->
<div>{{ userContent }}</div>
<!-- 动态拼接 onclick、href -->
<a onclick="func('{{name}}')">点击</a>
<a href="javascript:{{code}}"></a>✅ 正确做法：
- 渲染用户文本只用
textContent，不用innerHTML - Vue/React 模板默认自动转义 ，不要用
v-html/dangerouslySetInnerHTML随意渲染用户内容 - 若必须富文本渲染：后端统一过滤标签、前端加 CSP 限制
特殊字符强制转义
用户输入的 < > & " ' / 必须转义：
<→<>→>&→&"→"'→'
前端可封装通用转义函数，所有用户展示内容先转义再渲染。
2. JavaScript 层面安全
2.1 绝对不要 eval、new Function
❌ 高危：
eval(urlParams)
new Function(codeStr)恶意参数可以直接执行任意 JS，禁止使用。
2.2 禁止直接操作 DOM 拼接 HTML
❌ 危险：
let html = `<div>${userInput}</div>`
dom.innerHTML = html✅ 安全：
dom.textContent = userInput;2.3 严格校验 URL 参数、路由参数
所有 location.search、路由 params、query 必须做格式校验、白名单校验，不能直接拿来用、直接渲染。
2.4 禁止使用不安全的全局变量
不把 token、用户信息、密钥挂在 window 上，容易被第三方 JS 窃取。
3. 本地存储安全（LocalStorage / SessionStorage / Cookie）
3.1 LocalStorage / SessionStorage 禁忌
❌ 禁止存储：
- 账号密码、后端密钥、私钥
- 永久 Token、敏感身份信息
- 支付相关、手机号、身份证明文
✅ 只存：普通展示文本、非敏感配置、临时 UI 状态。
原因：XSS 一旦发生，攻击者可以直接读取本地所有存储。
3.2 Cookie 安全配置（前端配合后端）
后端设置 Cookie 必须带这几个属性，前端不用写，但要懂、要要求后端配置：
- HttpOnly：JS 无法读取 Cookie，XSS 偷不走登录态
- Secure：只在 HTTPS 环境下传输，HTTP 不发送
- SameSite=Strict/Lax：防止 CSRF 跨站请求伪造
- Path / Domain：限制 Cookie 作用域，缩小泄露范围
3.3 关闭浏览器本地存储多余权限
不要随意允许网站读取缓存、持久化存储，业务够用即可。
三、接口请求层面安全（Ajax / Axios / 小程序请求）
1. 请求鉴权安全
- 登录态用 Token，不要只用 Cookie
- Token 放在 请求头 Authorization ，不要放 URL 参数❌ 危险：
/api/user?token=xxx日志、路由、Referer 都会泄露 - Token 设置短期有效期，做自动刷新，避免永久有效被盗用
2. 接口防越权（前端 + 后端双重保障）
- 水平越权：普通用户能看别人的数据
- 垂直越权：普通用户能调用管理员接口
前端做法：
- 菜单、按钮权限由后端返回，前端只做展示控制
- 绝对不能只靠前端隐藏按钮，接口层面后端必须二次鉴权
- 所有敏感接口（删、改、查个人隐私）都要带身份校验
3. 请求参数安全
- 前端所有输入参数做类型、长度、格式校验（手机号、邮箱、身份证、金额）
- 禁止直接把用户输入原样传给后端，先过滤特殊字符
- 敏感接口禁止 GET 请求，只用 POST/PUT，避免参数在地址栏泄露
4. 防止接口恶意请求、刷接口
前端做：
- 按钮防重复点击（节流、loading 锁定）
- 频繁查询接口做防抖配合后端：限流、频率限制、验证码
四、第三方资源 & 插件安全
-
慎用第三方 CDN、第三方 JS 第三方库一旦被篡改，全站被植入恶意代码。优先：本地打包引入、官方稳定 CDN、锁定版本号，不使用最新动态版本。
-
禁止引入来路不明的 统计、广告、弹窗 JS
-
Vue/React 不要装小众不知名 npm 包，防止恶意包植入后门
五、页面响应头 & 项目部署安全（上线必配）
前端开发要懂，并且要求运维 / 后端配置安全响应头：
- Content-Security-Policy (CSP) 限制页面只能加载指定域名的 JS、样式、图片，禁止执行内联脚本、禁止 eval，最强 XSS 防御。
- X-Frame-Options: DENY 禁止页面被 iframe 嵌套，防点击劫持。
- X-XSS-Protection: 1; mode=block开启浏览器自带 XSS 防护。
- X-Content-Type-Options: nosniff禁止浏览器随意解析文件类型，防止 MIME 嗅探攻击。
- Referrer-Policy控制请求 Referer 信息泄露，保护接口地址、路由不被第三方窃取。
- 全站强制 HTTPS杜绝中间人抓包、请求篡改、劫持流量。
六、表单 & 用户输入安全
- 所有输入框：长度限制、特殊字符过滤、格式正则校验
- 登录、支付、改密等关键操作：加图形验证码 / 滑块 / 短信验证
- 富文本编辑器：
- 前端限制标签
- 后端严格过滤危险标签（script、iframe、onclick 等）
- 文件上传安全：
- 前端校验文件类型、大小、后缀
- 禁止上传 html、js、php 等可执行文件
- 上传后后端重新生成文件名、存储隔离、禁止直接访问
七、路由 & 前端权限安全
- 路由守卫不能只做前端拦截，敏感页面接口后端必须鉴权
- 路由参数不传递敏感 ID、手机号、证件号
- 隐藏路由、加密路由地址，不暴露后台结构
八、开发过程中绝对不能犯的安全低级错误
- 代码里硬编码密钥、接口秘钥、账号密码、Token
- 把后端接口真实地址写死在前端，不做环境区分
- 提交代码到 Git 时，上传配置文件含敏感信息
- 控制台随便打印用户手机号、身份证、Token
- 随意使用
v-html、innerHTML渲染用户内容 - 本地存储存密码、永久登录凭证
- 内网测试接口直接暴露到公网
九、前端开发日常安全操作总结（可当工作规范）
- 不相信任何用户输入，所有内容先转义、再校验、再渲染
- 不用 innerHTML、eval、new Function，少用 v-html
- 敏感数据绝不放 LocalStorage、绝不挂 window
- Token 放请求头，不放 URL，短期有效、自动续期
- 按钮防重、接口防抖，关键操作加验证码
- 菜单权限后端控制，不依赖前端隐藏做安全
- 上线配置安全响应头、全站 HTTPS、开启 CSP
- 慎用第三方 JS 和 npm 包，不引来路不明资源
- 文件上传严格校验类型、后缀、大小
- 代码严禁硬编码任何密钥、账号、私密配置