网络安全：（二十五）前端跨站请求伪造（CSRF）和跨域访问安全策略

网络安全：（二十五）前端跨站请求伪造（CSRF）和跨域访问安全策略

在 Web 应用程序中，跨站请求伪造（CSRF）和跨域访问（CORS）是两个常见的安全漏洞问题。它们不仅威胁用户的隐私和数据安全，也可能导致攻击者能够通过利用这些漏洞进行恶意操作，严重时可能导致数据泄露、资金损失等问题。本文将详细探讨 CSRF 和 CORS 的概念、原理、影响及防范措施，帮助开发者了解并解决这类安全问题。

目录

1. 什么是 CSRF（跨站请求伪造）？
2. 什么是 CORS（跨域资源共享）？
3. CSRF 的工作原理
4. 防止 CSRF 攻击的策略- 使用 Token 验证- 使用 SameSite Cookies- 采用双重提交 Cookie
5. CORS 的工作原理
6. 配置 CORS 策略以保障跨域安全- 允许跨域请求- 设置 CORS 头部
7. 总结与最佳实践

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

跨站请求伪造（Cross-Site Request Forgery，简称 CSRF）是一种攻击方式，攻击者诱导已登录的用户在不知情的情况下向受信任的 Web 应用发送恶意请求。由于用户的身份认证信息（如 Cookie）会自动随请求发送，因此恶意请求会被认为是用户发起的，攻击者借此可以执行未经授权的操作，如转账、修改账户信息等。

CSRF 攻击的示例

假设用户已登录到某个银行网站，银行网站通过 Cookie 来识别用户身份。攻击者通过构造一个恶意链接或者表单，诱导用户访问。当用户点击这个链接时，攻击者在用户不知情的情况下，利用该用户的 Cookie 进行资金转账操作。

2. 什么是 CORS（跨域资源共享）？

跨域资源共享（Cross-Origin Resource Sharing，简称 CORS）是 Web 浏览器的一个安全特性，用于限制不同源（域名、协议、端口）之间的请求。如果一个网页试图向不同源的服务器发送请求，浏览器会阻止此请求，除非目标服务器明确允许跨域访问。CORS 的目的是防止恶意网站获取和操作用户的私人数据。

CORS 的工作原理

CORS 通过在响应头中添加特定的头部信息来告诉浏览器，允许哪些外部域名可以访问资源。例如，服务器返回一个带有

Access-Control-Allow-Origin

头部的响应，表示允许来自特定域的跨域请求。

3. CSRF 的工作原理

CSRF 攻击依赖于用户浏览器的自动认证机制。通常，浏览器会自动发送当前域下的所有 Cookie，尤其是带有用户身份认证信息的 Cookie。攻击者利用这一点，通过发送伪造请求来模拟用户的操作，执行一些恶意行为。

CSRF 攻击的步骤

1. 用户登录并获得 Cookie：用户登录到某个应用并获得身份验证 Cookie（例如 Session ID）。
2. 攻击者创建恶意请求：攻击者通过电子邮件、社交媒体或网站嵌入恶意代码（如图片、iframe 或表单），诱导用户点击。
3. 用户无意中提交恶意请求：用户在不知情的情况下访问恶意链接，浏览器自动携带用户的 Cookie 向目标网站发送请求。
4. 目标应用执行恶意操作：由于请求来自于已认证用户，目标应用错误地认为这是用户的合法操作，从而执行恶意行为（例如，转账操作）。

4. 防止 CSRF 攻击的策略

为了有效防止 CSRF 攻击，开发者应采取以下防范措施：

使用 Token 验证

在每个请求中包含一个随机生成的 token，称为 CSRF Token。这个 token 会被嵌入到用户的请求中，并与服务器上的值进行比较，只有匹配时才能执行操作。

• 如何实现：- 当用户登录时，服务器会生成一个随机的 token，并将其放入 HTML 中的隐藏表单字段或作为 HTTP 请求头的一部分。- 在用户提交请求时，浏览器会自动将这个 token 附加在请求中，服务器根据 token 验证请求是否为合法用户发起的。

使用 SameSite Cookies

SameSite

是一个新的 Cookie 属性，用于限制浏览器在跨站请求时是否发送 Cookie。设置为

Strict

或

Lax

可以有效阻止 CSRF 攻击。

• 如何设置：Set-Cookie: sessionId=abc123; SameSite=Strict;这样，即使攻击者通过不同的站点发起请求，浏览器也不会发送 sessionId Cookie，从而有效防止 CSRF 攻击。

采用双重提交 Cookie

双重提交是一种防范 CSRF 的方式，通过要求请求中包含两个相同的 token：一个存储在 Cookie 中，另一个通过请求头（或表单）发送。服务器检查这两个 token 是否一致，如果一致，才允许执行操作。

5. CORS 的工作原理

CORS 通过 HTTP 头部信息来控制跨域请求。通常，当浏览器发起跨域请求时，会先发送一个预检请求（OPTIONS 请求），询问目标服务器是否允许该跨域请求。如果服务器允许，浏览器将继续发送实际的请求。

CORS 预检请求

当一个请求涉及到某些特定的 HTTP 方法（如 PUT 或 DELETE），或使用了特定的请求头时，浏览器会自动发送一个预检请求，询问服务器是否允许跨域访问。如果服务器响应允许，浏览器才会继续发送实际请求。

6. 配置 CORS 策略以保障跨域安全

为了实现跨域安全，服务器需要根据实际需求配置 CORS 策略。以下是一些常见的 CORS 策略配置：

允许跨域请求

允许来自特定域的跨域请求，而其他域的请求会被拒绝。例如，允许来自

https://www.example.com

的请求：

Access-Control-Allow-Origin: https://www.example.com

设置 CORS 头部

CORS 头部包括：

• Access-Control-Allow-Origin：指定允许访问的源。
• Access-Control-Allow-Methods：指定允许的 HTTP 方法（如 GET、POST、PUT、DELETE）。
• Access-Control-Allow-Headers：指定允许的请求头。

例如，允许来自特定域的 POST 请求：

Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type

使用 CORS 中间件（例如在 Node.js 中）

const cors =require('cors');
app.use(cors({origin:'https://www.example.com',methods:['GET','POST'],allowedHeaders:['Content-Type']}));

7. 总结与最佳实践

通过有效的 CSRF 防护和正确的 CORS 配置，开发者能够大大提升应用的安全性，减少潜在的攻击风险。在前端和后端中，以下是一些最佳实践：

• CSRF 防护：- 使用 CSRF Token 或双重提交 Cookie 来保护每个请求。- 使用 SameSite 属性来限制 Cookie 的跨站传输。
• CORS 配置：- 明确指定允许跨域请求的来源，并避免设置 Access-Control-Allow-Origin 为 *。- 配置合适的预检请求和响应头，确保跨域请求是安全的。

随着 Web 安全威胁的不断演进，开发者应时刻保持警觉，采取适当的安全措施，确保应用程序不被 CSRF 和 CORS 漏洞所威胁。