crossorigin 属性的重要性

[lovelmh13]

背景

记这篇笔记的原因是因为遇到了页面的 js 文件没有配置 crossorigin， 导致错误日志报上去以后看不到错误信息（script error .）。

crossorigin 是来控制元素的跨源请求的，对 <video> <audio> <img> <link> <script> 生效。

对 <script> 的影响

因为浏览器的同源策略，浏览器是不会让脚本的详细错误信息报告给页面的。
只要不设置 crossorigin 属性，不管服务器有没有设置对应的 CORS 头，浏览器都只会让执行 js，但是错误信息对于页面都是隐藏的（script error .），只有 js 代码有 try catch 可以在脚本内部捕获到错误信息，但是 catch 中 throw 出去的错误，页面依然是获取不到的。即脚本内部可以 try...catch 获取，外部不行。外部要捕获到错误信息，必须要设置 crossorigin
只有同时设置了 CORS 头和 crossorigin 属性，页面才可以获取到文件中的详细错误信息。
这是为了防止潜在的敏感信息泄漏。

crossorigin 的两个值

• anonymous
  设置为了 anonymous，表示发送一个不包含凭证（Cookies、HTTP 认证信息、TLS客户端证书、客户端 SSL 证书）的请求，且服务器响应的 Access-Control-Allow-Origin 头是 * 或者确切的域名后可以返回准确的错误信息
  注：通常情况下，当提到网络安全和身份验证中的证书时，我们通常是指TLS（传输层安全协议）客户端证书。SSL（安全套接层）和TLS都是用于在计算机网络上提供安全通信的协议，但TLS是SSL的后续版本，提供了更强的安全性。
  在现实应用中，SSL这个术语仍然被广泛使用，尽管大多数情况下实际上指的是TLS。例如，“SSL证书”通常指的实际上是用于TLS的证书。无论是在浏览器、网络应用还是在API文档中，这两个术语经常可以互换使用，尽管从技术上讲，TLS是更准确的术语。
  总结来说，无论是说“客户端SSL证书”还是“TLS客户端证书”，在大多数情况下，实际上是指同一种东西：用于TLS协议的数字证书，这种证书用于客户端身份验证和安全通信。
• use-credentials
  设置了 use-credentials ，会发送一个包含了凭证的 CORS 请求。服务器响应的 Access-Control-Allow-Origin头必须要是确切来源，Access-Control-Allow-Credentials 必须是 true，才可以返回准确的错误信息

对 <link> 的影响

<link> 标签通常用于加载CSS。跨源的CSS文件可以被加载，但是由于同源策略，JavaScript 代码（比如通过document.styleSheets API）可能无法读取 CSS 文件的内容。
对于预加载的资源（如<link rel="preload" as="script">），没有 crossorigin 属性可能会导致资源被下载但不被利用，尤其是当资源需要特定的 CORS 设置时。
综上所述，没有 crossorigin 属性时，这些 HTML 标签通常可以加载跨源资源，但在处理这些资源（尤其是通过 JavaScript 进行处理）时会受到限制。这主要是出于安全和隐私保护的考虑，以防止潜在的跨源信息泄露。在需要通过JavaScript处理跨源资源的情况下，适当地使用 crossorigin 属性并确保服务器发送正确的 CORS 响应头是非常关键的。

对 <img> 的影响

跨源的 <img> 标签通常可以加载图片，即使没有 crossorigin 属性.
但是，如果在 JavaScript 中处理这些图片（比如通过 Canvas API），那么同源策略会限制你的访问。没有 crossorigin 属性（或者没有适当的 CORS 响应头）将导致 Canvas 被污染，进而无法从 Canvas 中导出数据。
Canvas污染的含义
如果把一个没有通过 CORS 允许的跨源图片绘制到 Canvas 上，那么这个 Canvas 就会被“污染”。
一旦 Canvas被污染，出于安全原因，就不能从这个 Canvas 中导出任何数据。这包括无法使用 toDataURL() 或 toBlob() 方法将 Canvas 的内容导出为图像数据。
示例
假设有一个网页，想要从另一个域名加载一张图片，然后将其绘制到 Canvas 上，并尝试导出这个 Canvas 的内容。

<img id="myImage" src="http://example.com/image.jpg" crossorigin="anonymous">
<canvas id="myCanvas"></canvas>

var img = document.getElementById('myImage');
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    try {
        var dataURL = canvas.toDataURL("image/png");
        console.log(dataURL); // 这里是导出 Canvas 内容的尝试
    } catch (e) {
        console.log('Canvas has been tainted and cannot export its content.', e);
    }
};

如果 http://example.com/image.jpg 的服务器没有设置适当的 CORS 响应头（例如，Access-Control-Allow-Origin），尝试执行 toDataURL() 将抛出一个安全错误，因为 Canvas 已经被污染。
另一方面，如果图片来源的服务器适当设置了CORS响应头，并且在 <img> 标签中包含了 crossorigin="anonymous" 属性，那么 Canvas 就不会被污染，就可以自由地导出 Canvas 的内容。
这种安全机制防止了潜在的跨源信息泄露，尤其是当涉及到用户数据和敏感信息时。通过确保跨源图片的正确 CORS 配置，可以安全地在 Web 应用中使用 Canvas API 进行图像处理和导出操作。

对 <video> 和 <audio> 的影响

类似于 <img>，跨源的 <video> 和 <audio> 标签可以加载并播放媒体，即使没有 crossorigin 属性。
但是，如果要在 JavaScript 中处理这些媒体（例如，通 过Canvas API 捕获视频帧），同源策略也会限制访问。不设置 crossorigin 属性会导致无法从媒体元素中获取数据，因为这会污染 Canvas。

总结

综上所述，没有crossorigin属性时，这些HTML标签通常可以加载跨源资源，但在处理这些资源（尤其是通过JavaScript进行处理）时会受到限制。这主要是出于安全和隐私保护的考虑，以防止潜在的跨源信息泄露。在需要通过JavaScript处理跨源资源的情况下，适当地使用crossorigin属性并确保服务器发送正确的CORS响应头是非常关键的。