前端安全：CSRF攻击与防御

CSRF（Cross-Site Request Forgery，跨站哀求伪造）攻击是一种答应攻击者通过受害者的身份执行非预期操作的安全威胁。为了防御这种攻击，前端开发者通常必要联合后端验证和特定的前端计谋。
令牌验证：

这是最常用的防御手段，通常涉及生成一个CSRF令牌，并将其在客户端和服务器之间交换。
服务器生成令牌：

在用户登录成功后，服务器生成一个CSRF令牌，并将其存储在用户的会话中。

1.    # Python 示例
2.    from flask import Flask, session
3.    app = Flask(__name__)
5.    @app.route('/login')
6.    def login():
7.        session['csrf_token'] = generate_csrf_token()
8.        return render_template('login.html', csrf_token=session['csrf_token'])

复制代码

客户端使用令牌：

将令牌嵌入到每个必要防护的表单中，或者作为HTTP头的一部分。

1.    <!-- HTML 示例 -->
2.    <form action="/protected" method="POST">
3.      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
4.      <!-- ...其他表单字段... -->
5.    </form>

复制代码

1.    // JavaScript 示例（使用Fetch API）
2.    fetch('/protected', {
3.      method: 'POST',
4.      headers: {
5.        'Content-Type': 'application/x-www-form-urlencoded',
6.        'X-CSRF-Token': window.csrfToken
7.      },
8.      body: formData
9.    });

复制代码

检查Referer头：

虽然不完全可靠，因为Referer头可以被浏览器禁用或篡改，但通常可以作为辅助防御措施。

1.    # Python 示例（Flask中间件）
2.    from flask import request
4.    @app.before_request
5.    def check_referer():
6.        if request.method in ['POST', 'PUT', 'DELETE']:
7.            if not request.referrer or request.referrer != app.config['APP_BASE_URL']:
8.                return abort(403)

复制代码

双因素认证：

要求用户在提交敏感操作前举行二次确认，比方通过弹窗或验证码。
SameSite Cookie属性：

设置Cookie的SameSite属性为Lax或Strict，限制跨站提交。Lax模式答应在top-level导航中发送，而Strict模式则更严酷，只在同一站点内的哀求中发送。

1.    # Python 示例（使用Flask-Session扩展）
2.    from flask_session import Session
3.    from flask import Flask
5.    app = Flask(__name__)
6.    Session(app)
7.    app.session_interface.cookie_samesite = 'Lax'

复制代码

POST-only接口：

对于敏感操作，只接受POST哀求，不使用GET哀求，因为GET哀求容易被浏览器书签、链接预加载或第三方脚本滥用。
前端代码中，防御CSRF通常涉及在表单提交或Ajax哀求时附带CSRF令牌。确保在后端验证令牌的有用性是至关重要的，因为前端的防御措施可以被绕过。
以下是一个Node.js + Express + CSRF掩护的示例：

1. // server.js
2. const express = require('express');
3. const bodyParser = require('body-parser');
4. const csrf = require('csurf');
5. const app = express();
7. // 使用cookie-parser中间件解析cookie
8. app.use(require('cookie-parser')());
10. // 使用中间件生成和注入CSRF令牌
11. const csrfProtection = csrf({ cookie: true });
12. app.use(csrfProtection);
14. // 保护路由
15. app.post('/protected', csrfProtection, (req, res) => {
16.   // 验证令牌并执行操作
17.   if (req.csrfToken() === req.body.csrfToken) {
18.     // 安全的操作
19.   } else {
20.     // CSRF令牌无效，返回错误
21.     res.status(403).send('CSRF token mismatch');
22.   }
23. });
25. // 响应HTML页面，包含CSRF令牌
26. app.get('/', (req, res) => {
27.   res.send(`
28.     <form action="/protected" method="POST">
29.       <input type="hidden" name="csrfToken" value="${req.csrfToken()}">
30.       <button type="submit">Submit</button>
31.     </form>
32.   `);
33. });
35. app.listen(3000);

复制代码

使用CSP（Content Security Policy）

内容安全计谋（CSP）是一种网络安全计谋，通过指定哪些外部资源可以被加载或执行，来减少跨站脚本攻击的风险。虽然CSP重要针对XSS攻击，但它也能间接帮助防御CSRF，特殊是当CSP配置得当，限制了第三方网站对你的应用发起哀求的能力时。

1. // 在Express应用中设置CSP头部
2. app.use((req, res, next) => {
3.   res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self' 'unsafe-inline'");
4.   next();
5. });

复制代码

验证HTTP哀求头的Origin字段

只管不如使用CSRF令牌可靠，但在某些场景下检查Origin头部也可以作为一种辅助防御措施。如果哀求来自不受信托的源，服务器可以选择拒绝该哀求。

1. # Flask示例
2. from flask import request
4. @app.before_request
5. def verify_origin():
6.     if request.method == 'POST':
7.         allowed_origins = ['https://your-trusted-origin.com']
8.         origin = request.headers.get('Origin')
9.         if origin not in allowed_origins:
10.             return 'Unauthorized', 401

复制代码

HSTS（HTTP Strict Transport Security）

强制浏览器只通过HTTPS与服务器通讯，可以防止中间人攻击，从而低落CSRF攻击的风险，因为攻击者更难以拦截或修改HTTPS通讯。

1. # Flask示例
2. @app.after_request
3. def apply_hsts(response):
4.     response.headers['Strict-Transport-Security'] = 'max-age=31536000; includeSubDomains'
5.     return response

复制代码

使用Web应用防火墙（WAF）

Web应用防火墙可以提供额外的防护层，检测并阻止恶意哀求，包罗CSRF攻击。WAF可以是硬件装备、软件服务或云服务，通常基于署名匹配、举动分析或呆板学习算法来识别和阻止攻击。
限制敏感操作的频率

限制用户执行敏感操作的速率可以帮助防止大规模的CSRF攻击。比方，限制用户在一分钟内只能提交反复更改密码或删除账户的哀求。

1. // 使用JavaScript实现简单的速率限制
2. let lastRequestTime = null;
3. const LIMIT = 60 * 1000; // 一分钟
5. function submitSensitiveAction() {
6.   const currentTime = Date.now();
7.   if (lastRequestTime && currentTime - lastRequestTime < LIMIT) {
8.     alert('Too many requests, please try again later.');
9.     return;
10.   }
11.   
12.   // 提交请求...
13.   lastRequestTime = currentTime;
14. }

复制代码

制止使用GET哀求举行敏感操作

虽然POST哀求通常被以为比GET哀求更安全，但某些情况下，GET哀求可能不可制止。在这种情况下，确保URL不会被缓存或记录在浏览器汗青记录中，以低落CSRF风险。比方，使用动态生成的随机参数，而不是直接暴露敏感信息。

1. # Django示例
2. from django.http import HttpResponseBadRequest
4. def sensitive_get_view(request):
5.     if not request.GET.get('random_token') == request.session.get('random_token'):
6.         return HttpResponseBadRequest('Invalid token')
8.     # 执行敏感操作...
10.     # 清除随机令牌，防止重放攻击
11.     request.session.pop('random_token', None)

复制代码

思量使用OAuth 2.0或JWT

现代Web应用经常使用OAuth 2.0或JSON Web Tokens (JWT)举行身份验证。这些协议提供了内置的机制来验证哀求的来源和授权状态，从而低落CSRF攻击的风险。然而，正确实现这些协议同样至关重要，因为它们也有自己的安全挑战。
保持框架和库的更新

确保你使用的前端框架、后端库和服务器软件都保持最新，以便得到最新的安全补丁和修复。
安全编码和测试

遵照安全编码最佳实践，如输入验证、输出编码、错误处理和日志记录，可以帮助发现和修复潜在的弊端。别的，定期举行安全测试，如渗透测试和代码审查，可以确保应用在发布之前是安全的。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。