其实前端安全这事儿，说难不难，核心就是把客户端可能踩的坑都提前堵上。毕竟现在针对前端的攻击手段越来越多，咱们做开发的，必须主动设防。
### 1. 防住 XSS 攻击，别让恶意脚本钻空子
这应该是前端最常见的安全问题了，说白了就是有人往页面里插恶意代码，窃取用户信息或者搞破坏。
– 用户输入的内容一定要 ** 严格转义 **，比如把 `<` 变成 `<`，`>` 变成 `>`，千万别图省事直接用 `innerHTML` 塞到页面里，优先用 `textContent` 更安全。
– 配置 **CSP（内容安全策略）** 特别管用，直接限制脚本只能从自己的可信域名加载，禁用内联脚本和 `eval` 函数，从源头掐断风险。
### 2. 挡住 CSRF 攻击，避免被“冒用身份”
这种攻击就很鸡贼，骗用户在登录状态下，悄悄发送一些非自愿的请求，比如偷偷转账、改密码。
– 给所有敏感请求加个 **CSRF Token**，服务端每次都验证这个 token 的合法性，不是自己人发的请求直接拒绝。
– 给 Cookie 设置 `SameSite=Strict/Lax` 属性，让浏览器直接拒绝跨站携带 Cookie，这招简单又高效。
– 顺便校验一下请求的 `Referer` 或者 `Origin` 头，确认请求是从咱们自己的域名发过来的。
### 3. 数据传输要加密，别让信息裸奔
数据在网络上传输的时候，可不能让人随便偷看、篡改。
– 网站必须 ** 全站启用 HTTPS**，别再用 HTTP 裸奔了。同时配置 `HSTS`，强制浏览器只能用 HTTPS 访问，防止被降级攻击。
### 4. 敏感信息别乱存，小心泄露
前端真的不适合存重要数据，别图方便就瞎放，不然很容易翻车。
– 密码、token 这类核心凭证，千万别存在 `localStorage` 或 `sessionStorage` 里，优先用 `HttpOnly` Cookie，这样 JS 拿不到，能避免被 XSS 窃取。
– 密码输入框可以禁用自动填充和剪贴板功能，减少敏感信息泄露的可能。
### 5. 防点击劫持，别让页面被“套娃”
有些坏人会把咱们的页面嵌到他们的 iframe 里，盖上一层透明的遮罩，诱导用户点不该点的按钮，比如下单、付款。
– 配置 `X-Frame-Options` 响应头为 `DENY` 或者 `SAMEORIGIN`，要么禁止所有 iframe 嵌入，要么只允许自己域名的页面嵌入。
– 也可以用 CSP 的 `frame-ancestors` 指令，控制起来更灵活。
### 6. 第三方依赖要严查，别踩“供应链”的坑
现在前端项目哪个没有一堆依赖包？但万一某个包被植入恶意代码，整个项目都得遭殃。
– 定期用 `npm audit` 扫描依赖，发现漏洞及时修复或升级版本。
– 加载 CDN 上的第三方资源时，加上 **SRI（子资源完整性）** 校验，确保资源没被篡改过。
### 最后说两句
前端安全不是一锤子买卖，而是持续的工作。咱们开发的时候多留个心眼，把这些基础措施落实到位，就能挡住大部分常见的攻击了。