HTML的`crossorigin`属性：配置CORS以支持跨域资源的安全共享与加载 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

HTML `crossorigin` 属性：配置 CORS 以支持跨域资源的安全共享与加载

大家好！今天我们深入探讨 HTML 中的 crossorigin 属性，以及它在跨域资源共享（CORS）中扮演的关键角色。理解 crossorigin 对于构建安全且高效的 Web 应用至关重要，尤其是在涉及加载来自不同源的资源时。

1. 什么是跨域资源共享 (CORS)?

在 Web 开发中，浏览器的同源策略 (Same-Origin Policy) 是一种重要的安全机制，用于限制 Web 页面上的脚本访问来自不同源的资源。源由协议 (protocol)、域名 (domain) 和端口 (port) 组成。只有当这三个部分完全相同时，两个 URL 才被认为是同源的。

举个例子：

http://example.com/app1/ 和 http://example.com/app2/ 是同域的 (协议和域名相同)。
http://example.com:8080/app1/ 和 http://example.com/app1/ 是不同域的 (端口不同)。
https://example.com/app1/ 和 http://example.com/app1/ 是不同域的 (协议不同)。
http://example.com/app1/ 和 http://www.example.com/app1/ 是不同域的 (域名不同)。

同源策略的主要目的是防止恶意网站上的脚本读取或操作用户在其他网站上的敏感数据。然而，在现代 Web 应用中，我们经常需要从不同的源加载资源，例如图片、字体、JavaScript 脚本和 CSS 样式表。这就是 CORS 发挥作用的地方。

CORS 是一种 W3C 标准，它定义了一种机制，允许服务器声明哪些源（域、协议和端口）可以通过浏览器访问其资源。换句话说，CORS 是对同源策略的一种放松，但它仍然保证了安全性。

2. crossorigin 属性的作用

crossorigin 属性是一个 HTML 属性，可以应用于 <img>, <script>, <link> (用于 CSS 样式表), <audio>, 和 <video> 元素。它的主要作用是指定浏览器在获取这些资源时是否应该启用 CORS。

crossorigin 属性有两个主要的值：

anonymous: 表示对跨域请求不发送凭据（例如 Cookies、HTTP 认证信息）。这是最常用的值。
use-credentials: 表示对跨域请求发送凭据。

如果省略 crossorigin 属性，则浏览器会以不启用 CORS 的方式加载资源。

3. 为什么要使用 crossorigin 属性？

使用 crossorigin 属性的主要原因有两个：

启用 CORS: 如果服务器配置了 CORS 策略，并且你想让浏览器遵守这些策略，你需要使用 crossorigin 属性来启用 CORS。
访问跨域资源中的数据: 在某些情况下，即使服务器允许跨域访问，浏览器也可能限制你访问资源中的数据。例如，如果一个图片是从不同的源加载的，并且没有设置 crossorigin 属性，你可能无法使用 Canvas API 来读取图片的像素数据。

4. crossorigin="anonymous" 的使用

crossorigin="anonymous" 是最常用的配置。当使用这个值时，浏览器会发送一个不带凭据的跨域请求。服务器需要配置 CORS 响应头 Access-Control-Allow-Origin 来允许这个源的访问。

示例：加载跨域图片

<!DOCTYPE html>
<html>
<head>
  <title>CORS Example</title>
</head>
<body>
  <img src="https://example.com/image.jpg" crossorigin="anonymous" alt="Cross-Origin Image">
  <canvas id="myCanvas" width="200" height="200"></canvas>

  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.crossOrigin = "anonymous"; // 必须在设置 src 之前设置 crossOrigin
    img.src = "https://example.com/image.jpg";

    img.onload = function() {
      ctx.drawImage(img, 0, 0);

      try {
        // 尝试访问图像数据
        const imageData = ctx.getImageData(0, 0, 200, 200);
        console.log("Image data accessed successfully.");
      } catch (error) {
        console.error("Error accessing image data:", error);
      }
    };
  </script>
</body>
</html>

在这个例子中，我们使用 crossorigin="anonymous" 来加载来自 https://example.com/image.jpg 的图片。同时，我们在 JavaScript 中也设置了 img.crossOrigin = "anonymous"，这非常重要，必须在设置 img.src 之前设置 img.crossOrigin。这是因为某些浏览器（例如 Chrome）可能会在设置 crossOrigin 属性之后才发送实际的请求，如果在 src 之前设置了 crossOrigin，浏览器就能正确地添加 CORS 头。

为了使这个例子正常工作，https://example.com 的服务器需要设置 Access-Control-Allow-Origin 响应头，允许当前域的访问，或者设置为 * 允许所有域的访问（不推荐，除非资源是公开的）。

服务器端配置示例 (Node.js with Express):

const express = require('express');
const app = express();
const port = 3000;

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*"); // 允许所有域
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/image.jpg', (req, res) => {
  // 实际的图像文件处理逻辑，例如读取图像文件并返回
  res.sendFile(__dirname + '/image.jpg'); // 假设 image.jpg 位于当前目录下
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

5. crossorigin="use-credentials" 的使用

crossorigin="use-credentials" 表示在跨域请求中包含凭据，例如 Cookies 和 HTTP 认证信息。使用这个值需要更加谨慎，因为它涉及到安全问题。

示例：加载需要认证的跨域资源

<!DOCTYPE html>
<html>
<head>
  <title>CORS with Credentials Example</title>
</head>
<body>
  <img src="https://example.com/protected-image.jpg" crossorigin="use-credentials" alt="Protected Image">

  <script>
    // JavaScript 逻辑
  </script>
</body>
</html>

为了使这个例子正常工作，https://example.com 的服务器需要满足以下条件：

设置 Access-Control-Allow-Origin 响应头为具体的域，不能使用 *。使用 * 会导致浏览器拒绝包含凭据的请求。
设置 Access-Control-Allow-Credentials 响应头为 true。
客户端必须启用 withCredentials 标志。对于 <img> 标签，crossorigin="use-credentials" 隐式地启用了 withCredentials。如果使用 XMLHttpRequest 或 fetch API，则需要显式设置 withCredentials 为 true。

服务器端配置示例 (Node.js with Express):

const express = require('express');
const app = express();
const port = 3000;

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://your-domain.com"); // 替换为你的域
  res.header("Access-Control-Allow-Credentials", "true"); // 允许发送凭据
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/protected-image.jpg', (req, res) => {
  // 实际的图像文件处理逻辑，以及认证逻辑
  // 例如，检查用户的 Cookies 或 HTTP 认证信息
  // 如果用户已认证，则返回图像文件
  // 否则，返回 401 Unauthorized 错误
  res.sendFile(__dirname + '/protected-image.jpg'); // 假设 protected-image.jpg 位于当前目录下
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

JavaScript 代码中使用 fetch API 的示例：

fetch('https://example.com/protected-resource', {
  credentials: 'include' //  'omit' (默认), 'same-origin', or 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个例子中，credentials: 'include' 相当于设置了 withCredentials 为 true，告诉浏览器在请求中包含凭据。

6. crossorigin 属性与 <link rel="stylesheet">

crossorigin 属性也可以用于 <link rel="stylesheet"> 标签，用于加载跨域 CSS 样式表。

示例：加载跨域 CSS 样式表

<!DOCTYPE html>
<html>
<head>
  <title>CORS CSS Example</title>
  <link rel="stylesheet" href="https://example.com/style.css" crossorigin="anonymous">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

与图片类似，服务器需要配置 Access-Control-Allow-Origin 响应头，允许当前域的访问。

7. 使用 crossorigin 的注意事项

服务器端配置是关键: crossorigin 属性只是客户端的配置。要使 CORS 正常工作，服务器端必须正确配置 CORS 响应头。
Access-Control-Allow-Origin 的值: 如果使用 crossorigin="use-credentials"，Access-Control-Allow-Origin 必须设置为具体的域，不能使用 *。
img.crossOrigin 必须在设置 img.src 之前设置: 某些浏览器可能会在设置 crossOrigin 属性之后才发送实际的请求。
安全性: 在使用 crossorigin="use-credentials" 时，需要特别注意安全性，确保只允许受信任的域访问你的资源。
预检请求 (Preflight Request): 对于某些复杂的 CORS 请求（例如，使用 PUT、DELETE 等方法，或者设置了自定义请求头），浏览器会首先发送一个 OPTIONS 请求，称为预检请求，来检查服务器是否允许该请求。服务器需要正确处理预检请求，返回相应的 Access-Control-Allow-* 响应头。

8. CORS 相关的 HTTP 响应头

响应头	描述
`Access-Control-Allow-Origin`	指定允许访问该资源的域。可以是具体的域名（例如 `http://example.com`），也可以是通配符 `*`（表示允许所有域访问，不建议用于包含凭据的请求）。
`Access-Control-Allow-Credentials`	指定浏览器是否应该将凭据（例如 Cookies、HTTP 认证信息）发送到服务器。如果设置为 `true`，则表示允许发送凭据。注意，如果使用 `Access-Control-Allow-Origin: *`，则不能设置 `Access-Control-Allow-Credentials: true`。
`Access-Control-Allow-Methods`	指定服务器允许的 HTTP 方法。例如，`Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS`。
`Access-Control-Allow-Headers`	指定服务器允许的请求头。例如，`Access-Control-Allow-Headers: Content-Type, Authorization`。如果客户端发送了不在这个列表中的请求头，浏览器可能会阻止请求。
`Access-Control-Expose-Headers`	指定浏览器可以访问的响应头。默认情况下，浏览器只能访问一些标准的响应头（例如 `Cache-Control`、`Content-Type`）。如果服务器想让浏览器访问其他的响应头，需要将它们添加到 `Access-Control-Expose-Headers` 中。例如，`Access-Control-Expose-Headers: X-My-Custom-Header`。
`Access-Control-Max-Age`	指定预检请求的缓存时间（以秒为单位）。浏览器会缓存预检请求的结果，避免每次都发送预检请求。例如，`Access-Control-Max-Age: 3600` 表示预检请求的结果缓存 1 小时。

9. 常见问题及解决方案

问题：CORS 错误 "No ‘Access-Control-Allow-Origin’ header is present on the requested resource."
- 原因： 服务器没有返回 Access-Control-Allow-Origin 响应头，或者该响应头的值不允许当前域访问。
- 解决方案： 检查服务器配置，确保正确设置了 Access-Control-Allow-Origin 响应头。
*问题：CORS 错误 "The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘‘ when the request’s credentials mode is ‘include’."**
- 原因： 客户端使用了 crossorigin="use-credentials"，但服务器设置了 Access-Control-Allow-Origin: *。
- 解决方案： 将 Access-Control-Allow-Origin 设置为具体的域名，而不是 *。
问题：CORS 错误 "Request header field X-Custom-Header is not allowed by Access-Control-Allow-Headers in preflight response."
- 原因： 客户端发送了自定义请求头，但服务器没有在 Access-Control-Allow-Headers 响应头中包含该请求头。
- 解决方案： 在服务器的 Access-Control-Allow-Headers 响应头中添加该自定义请求头。
问题：使用 canvas.toDataURL() 时出现安全错误，无法读取跨域图片的数据。
- 原因： 图片是从不同的源加载的，并且没有设置 crossorigin 属性。
- 解决方案： 使用 crossorigin="anonymous" 属性加载图片，并确保服务器配置了 CORS 响应头。

10. 总结: 掌握 crossorigin 属性，保障跨域资源安全

crossorigin 属性是控制 CORS 的一个重要工具，它允许我们安全地加载来自不同源的资源。正确使用 crossorigin 属性，配合适当的服务器端配置，可以有效地解决跨域资源共享的问题，构建更加强大和安全的 Web 应用。理解 anonymous 和 use-credentials 的区别，以及服务器端的配置，对于避免常见的 CORS 错误至关重要。务必牢记，安全永远是第一位的。

HTML crossorigin 属性：配置 CORS 以支持跨域资源的安全共享与加载

发表回复 取消回复

HTML `crossorigin` 属性：配置 CORS 以支持跨域资源的安全共享与加载

发表回复取消回复