揭开跨域神秘的面纱：揭秘网络安全中的“隐形杀手”

前端

2023-10-20 16:13:17

“网页之间的互操作性是网络的基石。”

——万维网联盟 (W3C)

跨域的本质与安全风险

跨域 (Cross-Origin) 是指当网页或应用程序试图从与自身所在的域名、端口或协议不同的其他域中获取资源时所产生的安全限制。这种限制是出于浏览器安全机制的考虑，以防止恶意脚本或代码未经授权地访问敏感数据或执行有害操作。

跨域安全机制通常通过检查请求的 Origin 头来实现。Origin 头包含了请求的来源，包括域名、端口和协议。如果请求的 Origin 与当前页面的 Origin 不同，浏览器将阻止该请求，以防止潜在的跨域安全漏洞。

然而，跨域限制有时也可能对合法的请求造成阻碍，例如：

当用户访问具有多个域名的单页面应用程序 (SPA) 时，SPA 中的某些资源可能来自不同的域，从而导致跨域请求被阻止。
当用户访问第三方 API 或服务时，跨域限制也可能导致请求被阻止，从而影响应用程序的正常功能。

为了解决这些问题，浏览器引入了跨域资源共享 (CORS) 机制。CORS 允许服务器端配置跨域请求的访问规则，以允许或拒绝特定来源的跨域请求。通过 CORS，开发人员可以指定哪些域、协议和方法可以访问服务器上的资源，从而实现跨域请求的合法化。

跨域资源共享 (CORS) 的工作原理

CORS 是由 W3C 提出的跨域安全解决方案，旨在允许不同来源的网页或应用程序在遵循安全规则的前提下进行交互。CORS 通过以下步骤来实现：

请求发送方 ：在发起跨域请求之前，请求发送方 (客户端) 会发送一个预检请求 (Preflight Request) 到请求的服务器端。预检请求通常使用 OPTIONS 方法，并携带 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 头。这些头分别用于指定请求的来源、请求的方法和请求的头部信息。
服务器端处理 ：服务器端在收到预检请求后，将根据预检请求携带的 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 头来决定是否允许该跨域请求。如果允许，服务器端将返回一个预检响应 (Preflight Response)，其中包含 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 头。这些头分别用于指定允许跨域请求的来源、允许跨域请求的方法和允许跨域请求的头部信息。
请求发送方处理 ：请求发送方在收到预检响应后，将根据预检响应中的 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 头来决定是否继续发送跨域请求。如果允许，请求发送方将发送实际的跨域请求到服务器端。
服务器端响应 ：服务器端在收到实际的跨域请求后，将根据请求中的 Origin 头和请求的方法来决定是否允许该跨域请求。如果允许，服务器端将返回实际的跨域响应给请求发送方。

CORS 的服务器端实现

要启用 CORS，服务器端需要在响应中添加适当的 CORS 头。在 PHP 中，可以使用以下代码来添加 CORS 头：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

在 Node.js 中，可以使用以下代码来添加 CORS 头：

app.use(cors());

在 Python 中，可以使用以下代码来添加 CORS 头：

@app.route("/api/v1/data", methods=["GET", "POST"])
def data_endpoint():
    return jsonify({"message": "Hello, world!"}), 200, {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST",
        "Access-Control-Allow-Headers": "Content-Type",
    }