Deno 中的 CORS 安全：实现与避免

CORS (Cross-Origin Resource Sharing) 是一种网络安全机制，用于控制浏览器在客户端 JavaScript 中发起的跨域 HTTP 请求。它可以防止恶意网站通过浏览器窃取用户数据，同时也可以保护服务器免受跨站点攻击。在 Deno 中，我们可以使用一些方法来实现和避免 CORS 安全问题。

CORS 的原理

CORS 的主要原理是在 HTTP 请求头中添加几个特殊的字段，告诉服务器允许哪些域名进行跨域请求。这些字段包括：

• Access-Control-Allow-Origin：指定允许跨域请求的域名，可以是单个域名、多个域名，或者使用通配符 * 表示允许所有域名。
• Access-Control-Allow-Methods：指定允许的 HTTP 请求方法，例如 GET、POST、PUT、DELETE 等。
• Access-Control-Allow-Headers：指定允许的 HTTP 请求头部信息，例如 Content-Type、Authorization 等。
• Access-Control-Allow-Credentials：指定是否允许发送和接收 Cookie、HTTP 认证等用户凭据信息。

如果服务器返回的响应头中没有包含这些字段，或者包含的字段不允许当前域名进行跨域请求，浏览器就会拒绝访问响应数据。

实现 CORS 安全

在 Deno 中，我们可以使用 std/http/server 模块来创建一个 HTTP 服务器，然后在响应头中添加 CORS 相关字段。下面是一个简单的示例：

import { serve } from "std/http/server.ts";

const server = serve({ port: 8080 });

for await (const req of server) {
  const headers = new Headers({
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
    "Access-Control-Allow-Headers": "Content-Type, Authorization",
    "Access-Control-Allow-Credentials": "true",
  });

  const body = "Hello, World!";

  req.respond({ status: 200, headers, body });
}

在这个示例中，我们创建了一个 HTTP 服务器，并使用 Headers 类型来创建响应头。然后，我们通过 req.respond() 方法返回一个包含 CORS 响应头和响应体的 HTTP 响应。

需要注意的是，Access-Control-Allow-Origin 字段的值不能设置为 *，如果需要允许多个域名进行跨域请求，可以使用逗号分隔多个域名，例如 https://example.com,https://example.org。

避免 CORS 安全

在实际开发中，我们可能会面临一些无法修改响应头的 API 接口，或者需要在客户端 JavaScript 中使用第三方库进行跨域请求。此时，我们可以使用一些技巧来避免 CORS 安全问题。

JSONP

JSONP (JSON with Padding) 是一种跨域数据传输的技术，它通过在客户端动态创建一个 <script> 标签来获取跨域数据。由于 <script> 标签的 src 属性允许跨域请求，因此我们可以通过将响应数据包装成一个函数调用的形式，来实现跨域数据传输。

<script>
function handleResponse(data) {
  console.log(data);
}

const script = document.createElement("script");
script.src = "https://example.com/api?callback=handleResponse";
document.head.appendChild(script);
</script>

在这个示例中，我们通过动态创建一个 <script> 标签，并将 src 属性设置为跨域 API 的 URL，同时指定一个名为 callback 的查询参数，值为一个在客户端 JavaScript 中定义的函数名。当服务器返回响应数据时，会将数据包装成一个函数调用的形式，并作为 JavaScript 代码返回给客户端，从而实现跨域数据传输。

需要注意的是，JSONP 技术存在一些安全风险，例如可能被恶意网站用于 XSS 攻击等，因此应谨慎使用。

反向代理

反向代理是一种将客户端请求转发到目标服务器的技术，它可以在服务器端进行跨域请求，从而避免客户端 JavaScript 直接发起跨域请求。在 Deno 中，我们可以使用 std/http/reverse_proxy 模块来创建一个反向代理服务器，然后在客户端 JavaScript 中访问反向代理服务器即可。

import { serve } from "std/http/server.ts";
import { proxy } from "std/http/reverse_proxy.ts";

const server = serve({ port: 8080 });

for await (const req of server) {
  const url = new URL(req.url, "http://localhost:8081");
  await proxy(req, url);
}

在这个示例中，我们创建了一个 HTTP 服务器，并使用 std/http/reverse_proxy 模块的 proxy() 方法将客户端请求转发到目标服务器。需要注意的是，目标服务器的地址应该是一个绝对 URL，否则可能会导致跨域请求失败。

总结

CORS 安全是一个重要的网络安全机制，它可以保护用户数据和服务器免受跨站点攻击。在 Deno 中，我们可以使用一些方法来实现和避免 CORS 安全问题，例如在 HTTP 响应头中添加 CORS 相关字段、使用 JSONP 技术、以及创建反向代理服务器等。需要注意的是，不同的场景和需求可能需要使用不同的方法，应根据具体情况选择合适的方法来保障网络安全。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c3569badd4f0e0ffd98d7d