同源策略与CORS

基础概念

同源策略(Same-Origin Policy)是一个重要的浏览器安全机制。它用于限制一个源(origin)的脚本无法读取另一个源的资源。

源是什么

源(origin)由以下三个部分组成:

• 协议(scheme)
• 域名(host)
• 端口(port)

限制的策略

允许跨源的操作

• 加载资源: 加载 CSS、JavaScript、图片、字体等静态资源可以跨源进行。例如在 HTML 中引用其他域名下的 CSS 文件或图片。
• 发送 GET 请求: 通过 <img> 标签、<link> 标签、<script> 标签等发送 GET 请求可以跨源进行。

不允许跨源的操作

• 读取响应内容: 通过 XHR(XMLHttpRequest) 或 Fetch API 发送跨源请求时,无法读取响应内容的数据。
• 操作 DOM: 无法读取或修改其他源的 DOM 元素。
• 操作 Cookie: 无法读取或修改其他源的 Cookie。
• 发送敏感的 HTTP 请求: 如跨源的 POST、PUT、DELETE 等请求。

CORS是什么

CORS (Cross-Origin Resource Sharing) 是一种基于 HTTP 头的机制,它允许服务器指定哪些源站有权限访问哪些资源。

1. 当浏览器检测到当前请求跨域时,会自动在请求头中添加 Origin 字段,内容为当前源(协议 + 域名 + 端口)。
2. 服务器收到请求后,检查 Origin 头,根据自身的跨域策略决定是否允许这个源访问资源。
3. 如果允许跨域访问,服务器需要在响应头中添加以下字段:

• Access-Control-Allow-Origin: 指定允许的源,可以是具体的域名,也可以是*表示允许所有源。
• Access-Control-Allow-Methods: 指定允许的 HTTP 方法。
• Access-Control-Allow-Headers: 指定允许的请求头。
• Access-Control-Allow-Credentials: 是否允许发送 Cookie。
• Access-Control-Max-Age: 预检请求的有效期。

4. 浏览器收到响应后,检查是否存在上述 CORS 响应头,如果存在则允许跨域请求成功,否则请求失败。