HTML crossorigin属性详解与跨域资源共享配置

基于此，可以理解一些常见的误用场景：

• ：这不会触发CORS请求，对favicon加载无任何影响。
• ：对于同域脚本，添加此属性虽无坏处，但属多余。若服务器未配置CORS响应头，在某些情况下（例如请求带有自定义header时）反而可能意外触发预检请求，增加不必要的开销。

为何 添加 crossorigin 后仍无法使用 canvas.toDataURL()

这是前端开发中极易踩坑的场景。许多开发者认为为跨域添加crossorigin属性即可，但在调用canvas.toDataURL()时仍会报错。

问题的核心在于“画布污染”。只要图片资源是跨域的且未正确启用CORS，在调用canvas.drawImage()将其绘制到画布后，画布便会进入“被污染”状态。此时，任何试图从画布读取数据的操作，包括toDataURL()、getImageData()、toBlob()，都会抛出SecurityError。

解决此问题必须同时满足以下两个条件，缺一不可：

1. 客户端正确标记：在标签上添加crossorigin="anonymous"属性。
2. 服务端正确响应：图片资源所在的服务器必须在响应头中包含Access-Control-Allow-Origin，其值可以是请求的源（如https://your-domain.com），也可以是通配符*。

需特别注意crossorigin="use-credentials"这个值。它要求更严格：服务器不仅必须返回Access-Control-Allow-Origin明确指定你的域名（不能是*），还必须返回Access-Control-Allow-Credentials: true。否则，浏览器会直接拒绝加载该资源。

crossorigin="anonymous" 与 crossorigin="use-credentials" 的实际区别

这两个值的核心区别，并不完全在于“是否发送Cookie”，而在于浏览器如何校验响应头，以及最终能否获取资源内容。

• crossorigin="anonymous"：浏览器会在请求头中携带Origin，但不会发送凭证信息（如Cookie、HTTP认证等）。服务器只需返回Access-Control-Allow-Origin: *或精确匹配当前源即可。此外，在此模式下，若脚本加载出错，错误堆栈信息可被window.onerror捕获。
• crossorigin="use-credentials"：浏览器会在请求头中携带Origin，并发送凭证信息。服务器必须同时满足两个条件：返回的Access-Control-Allow-Origin必须是明确的域名（不能是*），且必须返回Access-Control-Allow-Credentials: true。缺一不可，否则浏览器将拒绝加载资源。

另有一个细节：若不写属性值，例如，浏览器会将其视作anonymous。但从代码可读性与维护性角度出发，建议始终显式写出属性值。

何时必须添加 crossorigin 才能使用 integrity

integrity属性（用于子资源完整性校验）与crossorigin属性是强绑定的。浏览器的安全策略规定：只有启用了CORS的跨域请求，才允许进行integrity校验。若请求不是CORS模式，浏览器会静默忽略integrity校验，甚至可能阻止脚本执行。

因此，若需引入带完整性校验的CDN资源，正确做法如下：

若遗漏crossorigin属性，即使服务器返回了正确的CORS头，integrity校验也不会生效——此细节在通过CDN引入第三方库时特别容易被忽略。

额外提醒一个场景：对于字体文件，无论是通过预加载，还是在CSS的@font-face规则中引用跨域字体，都必须配置crossorigin属性。否则，字体加载会失败，页面将回退使用默认字体。