细数前端常见 CORS 与 CSRF，避免混淆
2023-12-30 10:41:49
在前端开发中，CORS（跨域资源共享）和 CSRF（跨站请求伪造）是两个常见且容易混淆的安全问题。本文将对 CORS 和 CSRF 进行详细解读，帮助读者理解两者的概念、区别和解决方案，以避免安全漏洞和风险，确保网站安全和用户数据保护。
一、CORS（跨域资源共享）
CORS 是一种 W3C 标准，它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服 AJAX 只能同源使用的限制。
1. CORS 的概念
CORS 的核心思想是通过在服务器端设置 HTTP 头部，允许或拒绝跨域请求。常见的 CORS HTTP 头部包括：
- Access-Control-Allow-Origin： 指定允许跨域请求的域名。
- Access-Control-Allow-Methods： 指定允许跨域请求的 HTTP 方法。
- Access-Control-Allow-Headers： 指定允许跨域请求的 HTTP 头部。
- Access-Control-Max-Age： 指定跨域请求的预检请求的有效期。
2. CORS 的工作原理
当浏览器向跨源服务器发送请求时，它会首先发送一个预检请求（OPTIONS 请求）到服务器，以检查服务器是否允许跨域请求。服务器收到预检请求后，会根据 CORS HTTP 头部的设置，返回允许或拒绝跨域请求的响应。如果服务器允许跨域请求，则浏览器会发送实际的请求到服务器；否则，浏览器会阻止请求。
3. CORS 的安全意义
CORS 对于防止跨域脚本攻击（XSS）和跨站请求伪造（CSRF）攻击非常重要。XSS 攻击是通过注入恶意脚本到网页中，从而窃取用户敏感信息或控制用户浏览器。CSRF 攻击是通过伪造用户请求，以冒充用户身份执行恶意操作。CORS 可以通过限制跨域请求的来源、方法和头部，来防止这些攻击。
二、CSRF（跨站请求伪造）
CSRF 是一种攻击，它允许攻击者通过伪造用户请求，以冒充用户身份执行恶意操作。
1. CSRF 的概念
CSRF 攻击通常是通过诱骗用户点击恶意链接或访问恶意网站来实现的。当用户点击恶意链接或访问恶意网站时，攻击者会利用 JavaScript 或其他技术，在用户的浏览器中伪造一个请求，并发送到受害者的网站。受害者的网站在收到伪造请求后，会误以为该请求是用户发出的，并执行相应的操作。
2. CSRF 的危害
CSRF 攻击可以导致非常严重的后果，包括：
- 盗取用户敏感信息，如用户名、密码、信用卡号等。
- 冒充用户执行恶意操作，如转账、发帖、删除数据等。
- 破坏网站的正常运行。
3. CSRF 的防范
CSRF 攻击可以通过多种方法来防范，包括：
- 使用 CSRF Token： CSRF Token 是一个随机生成的令牌，它会存储在用户的浏览器中。当用户发送请求时，CSRF Token 会随请求一起发送到服务器。服务器会验证 CSRF Token 的有效性，以确保该请求是用户发出的。
- 设置 SameSite 属性： SameSite 属性可以限制 Cookie 的作用域，以防止 CSRF 攻击。SameSite 属性有三个值：Lax、Strict 和 None。Lax 允许 Cookie 在同源网站和跨域子域中使用，Strict 仅允许 Cookie 在同源网站中使用，None 不限制 Cookie 的使用范围。
- 对关键操作进行二次确认： 对于一些关键操作，如转账、发帖、删除数据等，可以在执行操作前进行二次确认。二次确认可以是输入验证码、回答安全问题等。
三、CORS 与 CSRF 的区别
CORS 和 CSRF 是两种不同的安全问题，它们的区别主要体现在以下几个方面：
- 攻击目标不同： CORS 攻击的目标是跨域请求，CSRF 攻击的目标是伪造用户请求。
- 攻击方式不同： CORS 攻击是通过发送跨域请求来实现的，CSRF 攻击是通过伪造用户请求来实现的。
- 防范方法不同： CORS 攻击可以通过设置 CORS HTTP 头部来防范，CSRF 攻击可以通过使用 CSRF Token、设置 SameSite 属性和对关键操作进行二次确认来防范。
四、结论
CORS 和 CSRF 都是前端常见的安全问题，它们容易混淆，但本质上是不同的。CORS 是允许跨域请求的 W3C 标准，而 CSRF 是一种跨站请求伪造攻击。通过理解 CORS 和 CSRF 的概念、区别和解决方案，我们可以避免安全漏洞和风险，确保网站安全和用户数据保护。
