前端如何做安全策略

在前端开发中，实施安全策略至关重要，以下是针对常见攻击的14项核心防护方案及落地实践：
核心原则：最小权限 + 纵深防御 + 持续监控。

一、关键攻击防御策略

1. XSS（跨站脚本）防护
输入过滤与转义

// 使用DOMPurify过滤HTML
import DOMPurify from 'dompurify';
const cleanHTML = DOMPurify.sanitize(userInput);

内容安全策略（CSP）
在HTTP头中设置：
Content-Security-Policy: default-src ‘self’; script-src ‘nonce-随机值’
避免内联事件
禁用οnclick=“alert()”，改用addEventListener绑定事件

2. CSRF（跨站请求伪造）防御
同步Token验证
后端生成csrfToken存入Session，前端在请求头携带：axios.defaults.headers.common[‘X-CSRF-Token’] = getTokenFromCookie();
SameSite Cookie属性
设置敏感Cookie：Set-Cookie: sessionId=abc123; SameSite=Strict; HttpOnly

3. 点击劫持防护
X-Frame-Options响应头

X-Frame-Options: DENY  // 完全禁止嵌入

现代替代方案

Content-Security-Policy: frame-ancestors 'none'

二、数据安全策略
4. 敏感数据处理
避免前端存储敏感数据
禁止在localStorage存储密码、令牌等
加密客户端数据
使用Web Crypto API加密：

const encrypted = await crypto.subtle.encrypt(algo, key, data);

5. API安全加固
JWT令牌保护

// 15分钟短有效期令牌 + Refresh Token轮换
const accessToken = jwt.sign({user}, secret, {expiresIn: '15m'});

接口限流与验签
后端验证请求签名防止篡改
三、工程化防护
6. 依赖安全
自动化漏洞扫描

npm audit --production  # 检测依赖漏洞

锁定版本号
使用package-lock.json或yarn.lock
7. 构建安全
禁用Source Map生产环境
webpack配置：

module.exports = { productionSourceMap: false }

子资源完整性（SRI）

<script src="https://cdn.example.com/react.js" integrity="sha384-验签值"crossorigin="anonymous"></script>

四、运行时防护
8. 错误处理
禁止泄露堆栈信息

// 生产环境替换详细错误
app.use((err, req, res, next) => {res.status(500).send('Server Error');
});

9. 安全头部强化
完整配置示例：

Strict-Transport-Security: max-age=31536000  
X-Content-Type-Options: nosniff
Referrer-Policy: no-referrer-when-downgrade

五、前沿防护方案

六、实施路线图
基础加固（立即实施）
启用CSP
设置HttpOnly + SameSite Cookie

中级防护
接入自动化漏洞扫描
API添加签名验证

高级防护
部署WebAuthn生物认证
实现客户端数据加密

关键原则：
遵循最小权限原则（如Token仅含必要声明）
采用纵深防御（多层防护而非单点依赖）
持续监控（使用Sentry等工具实时捕获异常）