Web安全基础：常见的Web安全威胁与防御措施 |青训营

当涉及到Web安全，代码的确切实现取决于您使用的编程语言和框架。以下是一些示例代码，展示了如何在不同情境下防止跨站脚本（XSS）和跨站请求伪造（CSRF）攻击。请注意，这些示例仅用于说明概念，实际实现可能会因应用框架和语言而异。

防止跨站脚本（XSS）攻击

输入验证和输出编码

// 用户输入验证和过滤
const userInput = '<script>alert("XSS Attack");</script>';

// 输出编码，防止脚本执行
const encodedUserInput = escapeHtml(userInput);

// 将编码后的内容插入页面
document.getElementById('output').innerHTML = encodedUserInput;

function escapeHtml(input) {
  return input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

设置CSP头

在HTML头部添加CSP头，限制允许加载的资源，防止恶意脚本的执行。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

防止跨站请求伪造（CSRF）攻击

使用CSRF Token

<!-- 表单中插入CSRF Token -->
<form action="/update-profile" method="post">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <!-- 其他表单字段 -->
  <button type="submit">更新个人信息</button>
</form>

# 后端验证CSRF Token
@app.route('/update-profile', methods=['POST'])
def update_profile():
    csrf_token = request.form.get('csrf_token')
    if csrf_token != session['csrf_token']:
        return "CSRF Token验证失败", 403
    # 处理更新个人信息逻辑

使用SameSite Cookie属性

设置Cookie的SameSite属性，限制跨站请求的传递性。

// 设置Cookie
document.cookie = 'sessionID=123; SameSite=Strict';

这些示例代码展示了如何在前端和后端采取一些基本措施来防止XSS和CSRF攻击。请根据您的开发环境和需求进行适当的调整。实际上，Web框架和库通常会提供更强大的安全机制，因此在实际开发中，您应该仔细阅读相关文档并遵循最佳实践。