Origin 请求头

Origin 是一个 HTTP 请求头部，用于指示请求的源，即发起请求的网页或脚本的来源。这个头部在跨域资源共享（CORS）和安全相关的场景中非常重要，帮助服务器确定请求的来源并做出相应的安全决策。

Origin 头部的作用

1. 跨域资源共享（CORS）：

   • 在跨域请求中，浏览器会自动添加 Origin 头部。服务器通过检查 Origin 头部来决定是否允许请求，并在响应中添加相应的 CORS 头部。
   • 例如，当浏览器发送跨域请求时，Origin 头部会包含请求的源，例如：

     Origin: https://example.com
     

2. 防止跨站请求伪造（CSRF）：

   • 服务器可以通过检查 Origin 头部来防止 CSRF 攻击。服务器只接受来自信任源的请求，拒绝或进一步验证其他源的请求。
   • CSRF 防护中，如果请求的 Origin 头部不在白名单中，服务器可以拒绝该请求。

示例

跨域请求示例

假设用户在 https://example.com 上的一个网页中发起一个跨域请求到 https://api.example.com，浏览器会添加 Origin 头部：

GET /data HTTP/1.1
Host: api.example.com
Origin: https://example.com

服务器在处理这个请求时，可以检查 Origin 头部，并在响应中添加 CORS 头部来允许跨域请求：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Content-Type: application/json

{ "key": "value" }

POST 请求中的 Origin 头部

同样，对于表单提交或者通过 JavaScript 发起的 POST 请求，Origin 头部也会包含来源信息：

POST /submit-form HTTP/1.1
Host: api.example.com
Origin: https://example.com
Content-Type: application/x-www-form-urlencoded

name=JohnDoe&age=30

服务器可以使用类似的逻辑来处理和验证 Origin 头部。

Origin 与 Referer 的区别

• Origin 头部 仅包含协议、域名和端口，不包括路径和查询参数。例如，Origin: https://example.com。
• Referer 头部 包含完整的 URL，包括路径和查询参数。例如，Referer: https://example.com/page?query=123。

Origin 头部更加简洁，主要用于安全和权限检查，而 Referer 头部提供了更详细的来源信息，适用于流量分析和内容定制。

CORS 相关的 Origin 头部使用

在 CORS 中，服务器通过以下头部来控制跨域请求的行为：

• Access-Control-Allow-Origin：指定允许哪些源访问资源。可以是具体的源，或使用 * 表示允许所有源访问。
• Access-Control-Allow-Methods：指定允许的 HTTP 方法，如 GET、POST、PUT 等。
• Access-Control-Allow-Headers：指定允许的请求头部。
• Access-Control-Allow-Credentials：指示是否允许发送凭证（如 cookies）。

示例：CORS 响应头

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Content-Type: application/json

{ "key": "value" }

浏览器行为

浏览器会自动添加 Origin 头部到某些类型的 HTTP 请求中，特别是涉及跨域请求的场景。下面是一些具体情况，浏览器会自动添加 Origin 头部：

自动添加 Origin 头部的情况

1. 跨域请求（CORS）：

   • 当浏览器发送跨域请求（即请求的目标与当前页面的源不同）时，会自动添加 Origin 头部。例如，使用 fetch 或 XMLHttpRequest 发起的跨域请求。

2. 跨域资源嵌入：

   • 当浏览器嵌入跨域资源（如 <img> 标签加载的图片、<script> 标签加载的脚本、<link> 标签加载的样式表）时，也会添加 Origin 头部。

3. POST 请求：

   • 在提交表单时，如果目标 URL 与当前页面的源不同，浏览器会自动添加 Origin 头部，即使是同源请求也会添加。

不自动添加 Origin 头部的情况

浏览器不会在所有请求中添加 Origin 头部，以下是一些例外情况：

1. 同源 GET 请求：

   • 对于同源的简单 GET 请求，浏览器不会添加 Origin 头部。例如，从 https://example.com/page1 请求 https://example.com/page2。

2. 某些浏览器插件或手动构建的请求：

   • 某些浏览器插件或者手动构建的 HTTP 请求可能不会自动包含 Origin 头部，具体取决于实现方式。

控制 Origin 头部的行为

开发者可以通过设置 HTTP 头部来控制浏览器发送的 Origin 信息。例如，使用 Referrer-Policy 头部可以影响 Referer 头部的内容，但对 Origin 头部的控制相对有限。通常，Origin 头部的行为主要由浏览器自动处理，开发者在服务器端接收到后可以基于其值进行相应的处理和响应。

总结

浏览器会自动在跨域请求、跨域资源嵌入和 POST 请求中添加 Origin 头部，帮助服务器确定请求的来源并进行安全性检查。这一机制在跨域资源共享（CORS）和防止跨站请求伪造（CSRF）等安全场景中起到关键作用。理解 Origin 头部的自动添加行为，有助于开发者更好地管理跨域请求和安全策略。