WhatsMyIp.me 提供的免费 IP 检查工具

了解跨域资源共享 (CORS)

了解跨域资源共享 (CORS)

跨源资源共享 (CORS) 由万维网联盟 (W3C) 于 2006 年推出，旨在为 Web 服务器提供一种方法来指定允许访问同源策略之外的服务器资源的任何其他来源（域、方案或端口）。这是 Web 安全性的一次重大进步，它使更具交互性和集成性的 Web 应用程序能够同时保持严格的安全协议。

了解 CORS（跨源资源共享）的机制对于现代 Web 开发至关重要。本节深入探讨 CORS 如何增强 Web 安全性、区分简单请求和预检请求，并解释 CORS 标头的重要性。

什么是跨源资源共享？

CORS（跨源资源共享) 是一种使用 HTTP 标头来告诉浏览器允许在一个来源（域）运行的 Web 应用程序有权访问来自不同来源的服务器的选定资源的机制。 这是网络安全领域的一个关键进步，因为它允许不同的网络服务之间进行更开放的通信，同时还能防止恶意攻击。

CORS 如何增强 Web 安全性：技术见解

CORS 是一种安全功能，允许 Web 应用程序向托管在网站不同来源的服务器发出请求。

在 CORS 出现之前，同源策略限制 Web 应用程序只能向与网站相同的域发出请求。虽然此策略是一项重要的安全措施，可防止恶意网站访问敏感数据，但它也限制了现代 Web 应用程序所必需的合法跨源交互。

CORS 允许服务器包含特定的标头，以告知浏览器哪些来源可以访问资源。以下是 CORS 如何增强安全性的一个基本示例：

  1. 一个 Web 应用程序 https://example.com 尝试发出请求 https://api.example.org/data.
  2. 浏览器自动发送 CORS 请求至 https://api.example.org/data.
  3. 服务器位于 https://api.example.org 检查其 CORS 策略以确定 https://example.com 被允许。
  4. 如果 https://example.com 被允许，服务器将使用适当的 CORS 标头进行响应，例如 Access-Control-Allow-Origin: https://example.com，表示浏览器应该允许 Web 应用程序访问资源。

如果没有 CORS，同源策略会阻止请求，但有了 CORS，服务器可以安全地允许来自受信任来源的跨源请求。

简单请求与预检请求：了解差异

CORS 请求分为两种类型：简单请求和预检请求。它们之间的区别取决于所使用的方法以及随请求发送的标头。

  • 简单请求：这些请求符合 CORS 定义的某些标准。简单请求可以使用 GET、POST 或 HEAD 方法。此外，它只能使用被视为安全且非用户定义的标头，例如 Accept, Accept-Language, Content-Language， 和 Content-Type 值为 application/x-www-form-urlencoded, multipart/form-data， 或者 text/plain。以下是简单请求的示例：
fetch('https://api.example.org/data', {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
  }
});
  • 预检请求：这些请求不符合简单请求的标准，在实际请求发送之前，需要使用 OPTIONS 方法进行初始“预检”请求。此预检将根据目标资源的 CORS 策略检查实际请求是否可以安全发送。当方法不是 GET、POST 或 HEAD 时，或者当使用自定义标头时，将使用预检请求。以下是示例：
fetch('https://api.example.org/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  },
  body: JSON.stringify({key: 'value'})
});

在这种情况下，浏览器首先发送一个OPTIONS请求到 https://api.example.org/data 确定 POST 请求是否带有 Content-Type 的 application/json 以及自定义标题 X-Custom-Header 被允许。

CORS 标头说明：它们是什么以及它们如何工作

CORS 依赖特定的 HTTP 标头在服务器和浏览器之间进行通信。这些标头决定浏览器是否应阻止或允许请求继续。以下是关键的 CORS 标头：

  • Access-Control-Allow-Origin：此标头指定允许哪些来源访问资源。可以将其设置为特定来源，例如 https://example.com， 或者 * 允许所有来源（尽管使用 * 不允许使用凭证）。
  • Access-Control-Allow-Methods：此标头用于响应预检请求，以指示访问资源时允许使用哪些 HTTP 方法。
  • Access-Control-Allow-Headers：响应预检请求，此标头指定在实际请求中可以使用哪些标头。
  • Access-Control-Expose-Headers：此标头允许服务器将允许浏览器访问的标头列入白名单。
  • Access-Control-Allow-Credentials：此标头指示当凭据标志为真时是否可以公开对请求的响应。必须将其设置为 true 如果请求中涉及 Cookie 或身份验证详细信息。
  • Access-Control-Max-Age：此标头指示预检请求的结果可以缓存多长时间。

理解并正确实施 CORS 标头对于在允许必要的跨源请求的同时保护 Web 应用程序至关重要。通过设置这些标头，开发人员可以微调允许哪些跨源请求，确保只有受信任的来源才能访问其 Web 资源。

实现 CORS

对于与不同来源的资源进行交互的现代 Web 应用程序而言，实现跨源资源共享 (CORS) 至关重要。本部分探讨如何在应用程序中启用 CORS、调试常见的 CORS 错误，并概述 Web 开发人员的最佳实践。

在您的应用程序中启用 CORS：分步指南

启用 CORS 需要配置您的服务器以发送适当的 CORS 标头来响应请求。该过程因您使用的服务器技术（例如 Apache、Nginx、Node.js）而异。以下是如何在不同服务器环境中启用 CORS：

  • 阿帕奇：对于 Apache 服务器，您可以通过将以下指令添加到您的 .htaccess 文件或服务器配置文件：
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header set Access-Control-Allow-Headers "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
</IfModule>

此配置允许所有来源（*）使用指定的方法和标头发出请求。调整 Access-Control-Allow-Origin 值来限制对受信任来源的访问。

  • Nginx：在 Nginx 中，可以通过将以下内容添加到服务器块来启用 CORS：
location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With';
        add_header 'Content-Length' '0';
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With';
}
  • Node.js（Express）：对于使用 Express 的 Node.js 应用程序，可以使用以下方式轻松启用 CORS： cors 中间件：
const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
    origin: '*', // Adjust this to your specific origin
    methods: ['GET', 'POST', 'OPTIONS', 'DELETE', 'PUT'],
    allowedHeaders: ['Content-Type', 'Access-Control-Allow-Headers', 'Authorization', 'X-Requested-With'],
}));

app.get('/data', (req, res) => {
    res.json({ message: 'This is CORS-enabled for all origins!' });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

调试常见 CORS 错误：提示和技巧

CORS 错误通常发生在浏览器因服务器的 CORS 策略而阻止请求时。常见错误包括有关缺失 Access-Control-Allow-Origin 不允许使用标头或方法。要调试这些错误：

  1. 使用浏览器 DevTools：现代浏览器在控制台中提供详细的错误消息。这些消息通常表明缺少什么或配置错误。
  2. 检查服务器配置：确保您的服务器已正确配置以发送必要的 CORS 标头。缺少标头或值不正确是常见问题。
  3. 使用工具进行测试：Postman 或 cURL 等工具可以模拟来自不同来源的请求，并帮助识别服务器是否使用正确的 CORS 标头进行响应。
  4. 查看 CORS 政策：确保服务器上的 CORS 策略符合 Web 应用程序的要求。例如，如果您的应用程序需要发送凭据（cookie、HTTP 身份验证），请确保 Access-Control-Allow-Credentials 被设定为 true 和 Access-Control-Allow-Origin 未设置为 *.

Web 开发人员的 CORS 配置最佳实践

安全有效地实施 CORS 需要遵守最佳实践：

  • 指定确切来源：而不是使用 * 为了 Access-Control-Allow-Origin，指定应允许访问您的资源的确切来源。这可以限制不必要的跨源请求的暴露。
  • 谨慎使用凭证：如果您的应用程序使用凭证，请确保 Access-Control-Allow-Credentials 被设定为 true并指定确切的来源，而不是 *请记住，凭证包括 cookie、HTTP 身份验证和客户端 SSL 证书。
  • 限制暴露的标头：仅通过以下方式公开必要的标题 Access-Control-Expose-Headers。暴露过多的标头可能会无意中泄露敏感信息。
  • 验证预检缓存持续时间： 使用 Access-Control-Max-Age 缓存预检响应，从而减少预检请求的数量。但是，请确保持续时间与您的 CORS 策略可能更改的频率相匹配。
  • 实施动态 CORS 政策：对于更复杂的应用程序，请考虑实施动态 CORS 策略来调整 Access-Control-Allow-Origin 根据请求的来源。这可以在服务器上以编程方式完成。
  • 定期审查 CORS 政策：随着您的 Web 应用程序的发展，请定期审查和更新您的 CORS 策略，以确保它们仍然满足您的安全性和功能要求。

通过遵循这些指南并了解如何配置和调试 CORS，开发人员可以确保他们的 Web 应用程序跨来源安全有效地进行通信。

CORS 实际应用

实现跨域资源共享 (CORS) 不仅仅是启用一项功能，还涉及了解它在现代 Web 应用程序环境中的运作方式。本节探讨 CORS 的真实示例、管理 CORS 政策以及有效实现的工具和技术。

CORS 的真实示例：从理论到实践

CORS 是 Web 开发的一个基本组成部分，它允许跨不同来源安全地请求资源。以下是 CORS 发挥关键作用的一些实际场景：

  • 单页应用程序 (SPA) 中的 API 使用：SPA 通常使用托管在不同域上的 API。例如，从 https://myapp.com 可能需要从中获取用户数据 https://api.userdata.com。如果没有 CORS，此跨域请求将被浏览器阻止。通过设置适当的 CORS 标头 (Access-Control-Allow-Origin: https://myapp.com)，SPA 可以安全地请求所需的数据。
// Example fetch request in an SPA
fetch("https://api.userdata.com/user", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching user data:', error));
  • 内容分发网络 (CDN)：CDN 提供来自全球不同位置的静态资产（图像、脚本、样式表）。当您的 Web 应用程序托管在 https://example.com 请求图像 https://cdn.example.com，CORS 确保这些针对静态资产的跨域请求得到安全处理。
  • 第三方小部件和集成：网站通常会集成需要从外部服务器访问资源的第三方小部件（例如聊天机器人、社交媒体源）。 CORS 使这些小部件能够跨不同来源无缝运行，从而增强用户体验而不损害安全性。

管理 CORS 政策：有效实施的工具和技术

有效地管理 CORS 策略需要了解你可使用的工具和技术：

  • 服务器配置：管理 CORS 策略的第一步是配置您的 Web 服务器。这涉及根据您的应用程序需求设置必要的 CORS 标头。大多数 Web 服务器（Apache、Nginx、IIS）允许您在其配置文件中或通过 .htaccess（对于 Apache）指定这些标头。
  • Web 框架中间件：如果您使用 Web 框架（Node.js 的 Express.js、Python 的 Django），许多框架都提供了简化 CORS 策略管理的中间件包。例如， cors Express 包允许您直接在应用程序代码中定义 CORS 策略。
// Example using the cors middleware in an Express.js application
const cors = require('cors');
const express = require('express');
const app = express();

// Define CORS options
const corsOptions = {
  origin: 'https://example.com',
  optionsSuccessStatus: 200,
};

app.use(cors(corsOptions));

app.get('/data', (req, res) => {
  res.json({ message: 'CORS-enabled route' });
});

app.listen(3000, () => console.log('Server running on port 3000'));
  • 动态 CORS 处理：对于需要允许来自多个受信任来源的请求的应用程序，可以实现动态 CORS 处理。这涉及以编程方式设置 Access-Control-Allow-Origin 根据传入请求的来源指定标头。
// Example of dynamic CORS handling
app.use((req, res, next) => {
  const allowedOrigins = ['https://example.com', 'https://api.example.com'];
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  next();
});

测试和调试 CORS 策略的工具

  • 浏览器开发工具：浏览器开发人员工具中的网络选项卡对于检查 CORS 错误以及了解如何实时发送和接收 CORS 标头非常有用。
  • 在线工具：类似工具 CORS 测试器 和 邮差 允许您通过从不同来源向您的服务器发送请求并检查响应来测试 CORS 策略。
  • 命令行工具: curl 是一款强大的命令行测试 CORS 策略的工具。它可用于模拟来自不同来源的请求并检查服务器响应中的 CORS 标头。
# Example curl command to test CORS
curl -H "Origin: https://example.com" \
     -I https://api.example.com/data

通过了解这些实际应用程序和管理策略，开发人员可以确保他们的 Web 应用程序安全地与跨源资源交互，充分利用 CORS。

无论是在 SPA 中启用跨源 API 请求、通过 CDN 提供资产还是集成第三方小部件，CORS 都是现代 Web 生态系统的重要组成部分，如果管理得当，可以同时提供安全性和功能性。

CORS 的安全隐患

跨域资源共享 (CORS) 的实施对 Web 应用程序的安全影响重大。虽然 CORS 允许 Web 应用程序从不同来源请求资源，但如果配置不当，也会带来潜在的漏洞。

本节深入探讨 CORS 的安全性方面，强调缓解跨站点脚本 (XSS) 攻击以及严格的 CORS 策略的重要性。

CORS 和 Web 安全：缓解跨站点脚本 (XSS) 攻击

跨站点脚本 (XSS) 攻击允许攻击者将恶意脚本注入原本良性和受信任的网站的内容中。

当应用程序在网页中包含不受信任的数据而未进行适当的验证或转义时，就会发生此类攻击，从而使攻击者能够在受害者的浏览器上下文中执行脚本。CORS 通过控制允许哪些来源与您的 Web 应用程序交互，在缓解 XSS 攻击方面至关重要。

考虑这样一种情况，应用程序允许用户生成可能包含恶意脚本的内容。

如果没有适当的内容清理和严格的 CORS 策略，此应用程序可能会成为 XSS 攻击的载体。CORS 不会直接阻止 XSS，但有助于制定更广泛的安全策略，确保只有指定的来源才能向您的应用程序发出请求，从而减少攻击面。

例如，假设你的应用程序 https://safe-app.com 使用托管于的 API https://api.safe-app.com. 通过设置 Access-Control-Allow-Origin 标题至 https://safe-app.com，可确保只有来自应用程序的请求才能访问 API。此限制通过将与 API 的交互限制在受信任的来源，有助于缓解潜在的 XSS 攻击。

Access-Control-Allow-Origin: https://safe-app.com

然而，将 CORS 策略与其他安全实践（例如验证和清理用户输入）相结合以有效缓解 XSS 和其他类型的攻击至关重要。

严格的 CORS 政策的重要性：保护您的 Web 应用程序

实施严格的 CORS 策略对于保护您的 Web 应用程序免受各种安全威胁至关重要。宽松的 CORS 策略（例如设置 Access-Control-Allow-Origin 到 *，可以通过允许任何来源向您的服务器发出请求，使您的应用程序面临数据盗窃、CSRF 攻击和其他漏洞。

严格的 CORS 政策指定允许哪些来源、方法和标头。这种特殊性可确保只有受信任的 Web 应用程序才能与您的资源交互，从而提供一层安全保护，帮助保护敏感数据和应用程序完整性。

例如，考虑一个允许从特定域访问并使用凭据（cookie、HTTP 身份验证）的应用程序：

Access-Control-Allow-Origin: https://trusted-domain.com
Access-Control-Allow-Credentials: true

此配置允许 https://trusted-domain.com 向您的应用程序发出带有凭据的请求，而来自其他来源的请求则被拒绝。此限制对于处理敏感信息或代表用户执行操作的应用程序至关重要。

此外，指定允许的方法和标头可进一步加强安全性：

Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, X-Custom-Header

此设置可确保仅接受具有指定标头的 GET 和 POST 请求，从而降低未经授权或恶意请求的风险。

安全 CORS 实施的最佳实践

  1. 指定允许的来源：始终定义特定的来源，而不是使用通配符 *。这种做法可确保只有受信任的域才能向您的应用程序发出请求。
  2. 使用凭证限制访问：允许凭证时要谨慎。确保 Access-Control-Allow-Credentials 被设定为 true 仅在必要时并且明确定义起源。
  3. 定义允许的方法和标头：指定允许哪些方法和标头。此限制不仅可以加强安全性，还可以为与您的 API 交互的开发人员提供清晰的文档。
  4. 使用预检请求：利用预检请求在接受跨源请求之前对其进行验证。预检请求增加了一层额外的验证，确保实际请求符合您的 CORS 政策。
  5. 定期审查 CORS 政策：随着应用程序的发展，请定期检查并更新 CORS 策略，以反映应用程序架构和域交互的变化。
  6. 将 CORS 与其他安全措施相结合：CORS 应成为全面安全策略的一部分。将 CORS 策略与内容安全策略 (CSP)、输入验证、输出编码和其他安全最佳实践相结合，以防范 XSS 和其他 Web 漏洞。

通过了解 CORS 的安全影响并实施严格的 CORS 策略，开发人员可以保护他们的 Web 应用程序免受跨域攻击，同时实现现代 Web 应用程序所需的必要跨域交互。

高级 CORS 主题

随着 Web 应用程序的复杂性不断增加，了解跨源资源共享 (CORS) 的细微差别变得越来越重要。本节探讨高级 CORS 主题，包括 CORS 和 API 安全性、基本配置以及常见问题的故障排除。

CORS 和 API 安全：确保跨源请求的安全

API 是现代 Web 应用程序的支柱，可促进不同服务之间的数据交换和功能。CORS 通过确保只有授权来源才能访问您的 API，在 API 安全性中发挥着关键作用。以下是 CORS 如何增强 API 安全性：

  • 基于令牌的身份验证：许多 API 使用基于令牌的身份验证（例如 OAuth 2.0、JWT）来保护访问。需要仔细配置 CORS 策略以允许令牌标头，例如 Authorization，来自受信任的来源。例如，允许 Authorization 跨源请求中的标头，你的服务器必须明确列出它 Access-Control-Allow-Headers.
Access-Control-Allow-Headers: Authorization
  • 第三方 API 的使用：当您的 Web 应用程序使用第三方 API 时，了解这些 API 的 CORS 政策至关重要。如果第三方 API 具有严格的 CORS 政策，您可能需要在您的域上使用服务器端代理将请求中继到 API，从而规避 CORS 限制。
  • 公开自定义标头：如果您的 API 使用自定义标头来获取特定于应用程序的信息，则必须通过以下方式明确向客户端公开这些标头： Access-Control-Expose-Headers. 这允许客户端应用程序读取这些标头的值。
Access-Control-Expose-Headers: X-My-Custom-Header

超越基本 CORS：高级配置和故障排除

高级 CORS 配置可以解决更复杂的场景：

  • 动态来源验证：对于需要允许来自动态来源集的请求的应用程序（例如，每个租户都有自己的域的多租户应用程序），实施动态来源验证是必要的。这涉及以编程方式检查 Origin 针对允许来源列表的标头并设置 Access-Control-Allow-Origin 标头相应。
const allowedOrigins = ['https://tenant1.example.com', 'https://tenant2.example.com'];
const origin = request.headers.origin;
if (allowedOrigins.includes(origin)) {
    response.setHeader('Access-Control-Allow-Origin', origin);
}
  • WebSocket 的 CORS：虽然 WebSocket 不像 HTTP 请求那样受 CORS 约束，但确保 WebSocket 连接的安全至关重要。确保初始 WebSocket 握手请求（即 HTTP 请求）包含正确的 CORS 验证是一种很好的做法。
  • 预检缓存优化： 这 Access-Control-Max-Age 标头可用于指定预检请求的结果可以缓存多长时间。根据 CORS 策略更改的频率优化此值可以减少预检请求的数量，从而提高应用程序性能。
Access-Control-Max-Age: 86400

解决常见的 CORS 问题

即使正确设置了 CORS，也会出现问题。以下是解决常见 CORS 问题的策略：

  • CORS 标头缺失或不正确：确保您的服务器已正确配置，可以发送预期的 CORS 标头。 curl 可以用来手动检查标题：
curl -I -H "Origin: https://example.com" https://api.example.com/resource
  • JavaScript Fetch API 中的不透明响应：使用 Fetch API 发出请求时，不透明响应（来自无 cors 请求的响应）可能会导致问题，因为它限制了您可以访问的有关响应的信息类型。确保您没有设置 mode: 'no-cors' 在您的 Fetch API 请求中，除非绝对必要。
  • 凭证相关的 CORS 错误：如果您的请求包含凭据（cookie、HTTP 身份验证），请确保 Access-Control-Allow-Credentials 被设定为 true， 然后 Access-Control-Allow-Origin 不是通配符 (*).
  • 调试预检请求：如果预检请求失败，请检查您的服务器是否处理 OPTIONS 请求正确，并且它使用适当的 CORS 标头进行响应（Access-Control-Allow-Methods, Access-Control-Allow-Headers).

通过深入研究这些高级 CORS 主题，开发人员可以更好地了解如何保护和优化其 Web 应用程序以实现跨源资源共享。无论是处理 API 安全性、复杂的 CORS 配置，还是解决具有挑战性的 CORS 问题，深入了解 CORS 对现代 Web 开发都至关重要。

结论

了解 CORS 对于安全的 Web 交互至关重要；正确实施 CORS 可以增强应用程序免受攻击，其严格的策略可以防御 XSS 攻击，探索高级主题可以优化 Web 开发。

相关文章