JavaScript前端安全的核心是“不信任任何客户端输入”，所有校验、权限控制和敏感数据处理必须在服务端完成；需防范XSS（转义输入、禁用危险API）、防敏感信息泄露（不硬编码密钥、脱敏展示）、防CSRF（配合服务端token与SameSite策略）、保障通信安全（HTTPS、CSP、域名校验）。
JavaScript前端安全的核心是“不信任任何客户端输入”，因为前端代码完全暴露在用户面前，无法真正隐藏或保护逻辑。所有校验、权限控制、敏感数据处理都必须在服务端完成，前端只负责展示和交互。
防止XSS（跨站脚本攻击）
XSS是最常见的前端安全问题，本质是未过滤的用户输入被当作HTML/JS执行。关键在于：所有动态插入的内容必须转义，尤其是innerHTML、document.write、eval、setTimeout字符串参数等危险操作。
- 优先使用textContent代替innerHTML；需要渲染HTML时，用成熟的库（如DOMPurify）做白名单过滤
- 模板引擎（如Vue/React）默认做HTML转义，但v-html或dangerouslySetInnerHTML仍需人工把关
- URL中的#片段、location.search参数、localStorage读取的数据，都可能成为XSS入口，务必清洗后再使用
避免敏感信息泄露
前端代码、网络请求、控制台、缓存中都不应出现密钥、令牌、内部API地址、未脱敏的用户数据等。
- API密钥、数据库连接串、JWT密钥等绝不能写在前端代码里；后端应通过接口下发必要配置（且带权限校验）
- 不要在console.log中打印用户token、密码、身份证号等；上线前可借助构建工具自动移除调试日志
- 禁用autocomplete="on"用于密码字段；对页面中显示的手机号、银行卡号做前端脱敏（如138****1234），但脱敏逻辑不可替代后端真实过滤
防范CSRF（跨站请求伪造）
虽然CSRF本质是服务端漏洞，但前端可配合防御：确保关键操作（如转账、改密码）必须携带服务端签发的一次性token（CSRF Token），并由后端严格校验。
立即学习“Java免费学习笔记（深入）”；
- 登录成功后，从响应头或接口获取CSRF Token，后续请求通过headers（如X-CSRF-Token）带上
- 避免用GET请求执行修改操作；删除、提交类操作统一用POST/PUT/DELETE + token校验
- 敏感页面启用SameSite=Strict或Lax的Cookie策略（需后端设置），降低第三方站点发起请求的风险
保障通信与运行环境安全
前端无法控制用户环境，但能提升攻击门槛和异常感知能力。
- 强制使用HTTPS，避免HTTP明文传输；通过Content-Security-Policy（CSP）限制脚本来源，禁止内联脚本和eval
- 检查window.location.origin是否匹配预期域名，防止恶意iframe嵌套；对第三方SDK做沙箱隔离（如iframe sandbox）
- 关键操作（如支付）增加二次确认、图形验证码或行为验证（非纯前端实现，需后端联动）
