Web安全实战：如何防御XSS、CSRF等常见攻击

Web安全是前端开发中不可忽视的重要领域，特别是XSS（跨站脚本攻击）和CSRF（跨站请求伪造）。本文将详细介绍XSS和CSRF的攻击原理、危害以及如何防御。

什么是XSS（跨站脚本攻击）

XSS (Cross-Site Scripting)是指攻击者在网页中注入恶意JavaScript代码，使得其他用户在浏览网页时执行这些脚本，以执行未授权的操作，从而打到攻击目的。XSS攻击可分为以下三种：

存储型XSS

• 原理: 攻击者将恶意代码提交到服务器并存储在数据库中，当其他用户访问包含该恶意代码的页面时，恶意脚本会被执行。
• 危害: 影响所有访问该页面的用户，可能导致用户数据泄露、身份盗用。
• 示例：攻击者在评论区输入 ，所有查看该评论的用户都会触发弹窗。

反射性XSS

• 原理: 恶意代码通过URL参数传递，并在页面加载时执行。
• 危害: 通常通过钓鱼邮件或恶意链接传播，攻击者可以窃取用户Cookie或伪造页面内容。
• 示例:

DOM型XSS

• 原理：前端JS代码执行不当，导致恶意代码被插入到DOM中并执行
• 危害: 攻击者可以通过操作DOM结构来篡改页面内容或窃取用户数据
• 示例：document.write('location.href')如果用户访问https://example.com#，页面将执行恶意代码。

XSS危害

• 窃取用户Cookie：获取身份凭证，劫持用户会话。
• 伪造页面：有道用户输入敏感信息（银行卡号、密码）。
• 执行恶意代码：篡改页面内容，注入广告或恶意链接，甚至下载恶意软件。

如何防御XSS？

输入验证和输出转义

• 输入验证：对用户输入的数据进行严格验证，确保其符合预期的格式和类型。
• 输出转义：在将用户输入的内容输出到页面时，对特殊字符进行专一，避免浏览器将其解析为HTML或JS代码。

function escapeHTML(str) {
  return str.replace(/[&<>'"/]/g, function (c) {
    return {
      '&': '&', 
      '<': '<', 
      '>': '>', 
      "'": ''', 
      '"': '"', 
      '/': '/'
    }[c];
  });
}

CSP(内容安全策略)

• 通过设置HTTP头Content-Security-Policy，限制页面中可以加载的外部资源（如脚本、样式、图片等），从而减少XSS攻击的风险。

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self';

HTTP-only Cookie

设置Cookie为HttpOnly， 防止JavaScript通过document.cookie访问Cookie, 从而减少XSS攻击窃取Cookie的风险。

Set-Cookie: sessionId=12345; HttpOnly

什么是CSRF（跨站请求伪造）

CSRF (Cross-Site Request Forgery) 是一种利用用户已登录的身份凭证（如Cookie）发起恶意请求的攻击方式。攻击者利用用户已登录的身份，伪造请求并执行未授权操作。例如，用户访问攻击者伪造的页面，导致账户密码被修改或者资金被转移。

• 示例: 攻击者利用HTML表单或隐藏的img标签来执行请求：

如果用户已登录bank.com，浏览器会自动携带cookie，从而完成转账。

CSRF的防御方式

SameSite Cookie

限制Cookie只能被同源请求携带，防止跨站请求携带身份凭证：

Set-Cookie: session=abc123;SamSite=Strict

CSRF Token

服务器生成随机Token，用户提交请求时需附带该Token进行验证：

Referer / Origin 头验证

服务器检查 Referer 或 Origin 头，确保请求来源可信：

总结与最佳实践-前端开发如何提升Web安全性？

• 输入验证：始终对用户输入的数据进行验证，避免恶意数据进入系统。
• 输出转义：在输出用户数据时，确保对特殊字符进行转义，避免XSS攻击。

** 如果你觉得这篇文章对你有帮助，别忘了点赞、分享、收藏和关注我的博客！如果有问题，欢迎留言讨论。