CORS初学者简介

本文概述

• 什么是CORS？
• CORS标头
• 预检请求
• 实施CORS

想知道什么是CORS(跨源资源共享)？

在间谍电影中, 安全人员具有一种在彼此之间传输信息的编码方式。由于他们主要是在传递信息, 如果这些信息落在敌人的手中, 这些信息可以用来对付他们, 因此, 他们必须确保接收信息的人是受信任的各方。发送这些信息的人也是如此。当发送方和接收方受到信任时, 可以保证信息的可信度和安全性。

这种情况的副本发生在浏览器和Web服务器之间的通信中, 称为”同源策略”。

根据MDN：

同源策略是一种重要的安全机制, 它限制了从一个来源加载的文档或脚本如何与另一个来源的资源进行交互。它有助于隔离潜在的恶意文档, 减少可能的攻击媒介。

什么是CORS？

在现实生活中, 当安全操作人员制定一条规则, 即仅应在其操作人员之间进行通信以作为安全手段, 这类似于同源政策。但是, 在某些情况下, 他们可能需要与外界互动。或与其他安全机构的特工一起, 要做到这一点, 他们可以实施另一种安全措施来验证那些特工。验证可能以不同的方式进行, 具体取决于所涉及的操作人员。在Internet上进行通信的情况下, CORS是一种机制, 它使浏览器可以使用访问它们原本无法使用的资源, 因为该资源是不同的来源。

跨域资源共享(CORS)是一种机制, 该机制使用附加的HTTP标头来告诉浏览器以在一个来源运行的Web应用程序访问来自另一个来源的选定资源。

我已经不止一次谈论起源, 你可能想知道这意味着什么。来源由URL的协议, 域和端口定义。当你的API位于https://api.geekflare.com:3001之类的地方, 而你的前端位于https://geekflare.com之类的前端时, 它们的起源就被认为是不同的。在这种情况下, 你需要CORS才能访问两端的资源。

当向服务器发出请求时, 浏览器(客户端)和服务器发送请求和响应, 其中包含HTTP标头。在这些标头中, 还包含其他标头, 以防止浏览器阻止通信。

为什么浏览器会阻止通信？

它的浏览器安全功能。如果请求来自与客户端不同的来源, 它将这样做。由于CORS而包含的其他标头是一种告诉客户端它可以利用收到的响应的方式。

CORS标头

安全标头之一, 可以是响应标头或请求标头。

响应标题

这些是服务器在响应中发回的标头。

• Access-Control-Allow-Origin：<origin>：这用于指定允许访问服务器上资源的来源。你可以指定只允许来自特定来源的请求-Access-Control-Allow-Origin：https：//geekflare.com, 也可以指定来源无关紧要-Access-Control-Allow-Origin：*。
• Access-Control-Expose-Headers：<headers>：顾名思义, 它列出了浏览器可以访问的标题。
• Access-Control-Max-Age：<seconds>：这指示可以缓存预检请求的响应的持续时间。
• Access-Control-Allow-Credentials：<boolean>：这表示当使用凭证发出初始请求时, 浏览器可以利用响应。
• Access-Control-Allow-Methods：<方法>：这表示尝试访问资源时允许的方法。
• Access-Control-Allow-Headers：<headers>：这表示可以在请求中使用HTTP头。

这是响应的示例

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, PUT, PATCH, POST, DELETE
Vary: Access-Control-Request-Headers
Access-Control-Allow-Headers: Content-Type, Accept
Content-Length: 0
Date: Sat, 16 Nov 2019 11:41:08 GMT+1
Connection: keep-alive

请求标题

为了使用CORS机制, 客户的请求应包含以下标头。

• 来源：<origin>：这表示客户请求的来源。如前所述, 在使用前端和后端时, 它将是你的前端应用程序的宿主。
• Access-Control-Request-Method：<方法>：在预检请求中使用此方法指示将用于发出请求的HTTP方法。
• Access-Control-Request-Headers：<header>：在预检请求中用于指示将用于发出请求的HTTP标头。

这是一个请求外观的示例

curl -i -X OPTIONS localhost:3001/api \
-H 'Access-Control-Request-Method: GET' \
-H 'Access-Control-Request-Headers: Content-Type, Accept' \
-H 'Origin: http://localhost:3000'

预检请求

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

在到处提到预检的要求之后, 这可能意味着什么？

当客户端必须在主请求之前发送预检请求时, 会发生预检请求。预检请求更多地是确定服务器是否支持将要发出的主要请求的探测。当获得肯定确认时, 然后发送主要请求。

如果请求不是预检请求, 则称为简单请求。

实施CORS

你通常会希望在应用程序的后端进行设置。实现取决于你使用的框架。对于本教程, 我们将研究如何在NodeJS和Rails中做到这一点。

滑轨

我建议你使用rack-cors gem。然后, 你需要将其添加到config / application.rb文件中。

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, expose: %i(access-token expiry token-type uid client), methods: %i(get post put patch delete options head), credentials: true
  end
end

节点JS

在Node.js中, 它看起来像这样。

app.all(‘*’, (req, res, next) => {
  res.header(‘Access-Control-Allow-Origin’, ‘*’);
  res.header(‘Access-Control-Allow-Methods’, ‘PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD’);
  res.header(‘Access-Control-Allow-Headers’, ‘*’);
  res.header(‘Access-Control-Allow-Credentials’, true);
  next();
});

在代码段中, 我们正在设置源, 方法, 标头和凭据, 应允许它们访问服务器上可用的资源。你也可以结帐Sqreen, 后者提供了一个安全标头模块, 可以与Ruby, PHP, Python, Java, Go, Node.JS应用程序集成。要在Apache或Nginx中实现, 请参考本指南。

总结

CORS放宽了政策, 以便你的浏览器可以访问你想要的资源。了解它的含义, 必要性以及设置方法, 将有助于弄清在构建Web应用程序时可能会遇到的问题。