前端如何做安全策略

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

一、关键攻击防御策略

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

javascript 复制代码

// 使用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响应头

javascript 复制代码

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

现代替代方案

javascript 复制代码

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

二、数据安全策略
4. 敏感数据处理
避免前端存储敏感数据

禁止在localStorage存储密码、令牌等

加密客户端数据

使用Web Crypto API加密：

javascript 复制代码

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

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

javascript 复制代码

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

接口限流与验签

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

bash 复制代码

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

锁定版本号

使用package-lock.json或yarn.lock
7. 构建安全
禁用Source Map生产环境

webpack配置：

javascript 复制代码

module.exports = { productionSourceMap: false }

子资源完整性（SRI）

html 复制代码

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

四、运行时防护
8. 错误处理

禁止泄露堆栈信息

bash 复制代码

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

9. 安全头部强化

完整配置示例：

javascript 复制代码

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

五、前沿防护方案

技术应用场景	实现方式
Trusted Types	DOM操作安全
WebAuthn	生物认证/硬件密钥
Offscreen Canvas	验证码防护

六、实施路线图
基础加固（立即实施）

启用CSP

设置HttpOnly + SameSite Cookie

中级防护

接入自动化漏洞扫描

API添加签名验证

高级防护

部署WebAuthn生物认证

实现客户端数据加密

关键原则：

遵循最小权限原则（如Token仅含必要声明）

采用纵深防御（多层防护而非单点依赖）

持续监控（使用Sentry等工具实时捕获异常）