crossorigin

定义

crossorigin 是 超文本标记语言（HTML）的一种内容属性。按规范的分类，它是一个「CORS 设置属性」（CORS settings attribute），即用于配置元素抓取数据时所发起请求的 CORS 行为的属性。规范把这类属性定义为枚举属性，取值只能是若干固定关键字之一。

该属性在 audio、img、link、script 和 video 这五类元素上有效，根据所在元素的不同，它可能被当作 CORS 设置属性处理。在媒体元素上，crossorigin 就是标准的 CORS 设置属性。^[1]

属性的可能取值有 3 种形式：anonymous、use-credentials，以及空字符串。把属性写成不带值的形式或写成空值，效果与写 anonymous 相同；若给出无法识别的关键字，浏览器也按 anonymous 处理。^[1]

原理

该属性的作用对象是浏览器抓取资源时构造的请求。当它取值为 anonymous 时，请求的 mode 被设为 cors，凭据模式被设为 same-origin，也就是说除非目标与文档同源，否则不会通过 cookie、客户端 TLS 证书或 HTTP 认证交换用户凭据。当取值为 use-credentials 时，请求同样走 CORS，但凭据模式被设为 include，用户凭据始终随请求发送。^[1]

若不指定该属性，浏览器完全不使用 CORS，用户代理不会去申请对资源的完整访问权限。此时 同源策略 之外的资源在使用上会受到与元素类型相关 画布的限制：img、audio、video 的资源被放入 canvas 时会被标记为「被污染」，script 通过 window.onerror 读取错误日志的能力受限，link 在没有相应 CORS 头的情况下请求可能被直接丢弃。^[1]

脚本元素的情形略有不同。对来自其他源的普通脚本，crossorigin 决定完整的错误信息是否会被暴露；对模块脚本，它同时管辖脚本自身以及该脚本所导入的其他脚本。取值非法时效果等同于 anonymous；完全不写该属性时，资源以 no-cors 模式、same-origin 凭据模式抓取。^[2]

以画布为例，只要画布上绘制了未经 CORS 批准且来自其他源的数据，画布就变为「被污染」状态。污染后的画布不再被视为安全，任何试图从其中取回图像数据的操作都会抛出 SecurityError，涉及的接口包括 toBlob()、toDataURL() 与 getImageData()。这一限制用于阻止页面借图像跨站读取用户私有数据。^[3]

发展历程

crossorigin 属性随 HTML5 规范一并成形。2011 年 5 月，WebKit 引擎的代码库中出现为图像支持该属性的提交，其说明指出该改动同时让 2D 画布遵守这一标志：如果绘制到画布上的图像获得 CORS 许可，画布就不再被标记为污染。^[4]

规范文本本身也在同一时期补充了对属性用途的说明。规范修订记录显示，img 元素上该属性的表述被改为「CORS 设置属性」，并新增一句解释：其目的在于让来自第三方站点、且该站点允许跨源访问的图像能够用于画布。^[5]

2011 年 7 月，有人在 HTML 规范的缺陷跟踪系统中提问，希望规范澄清该属性是否仅在配合画布元素时才有用，反映出当时开发者对它适用范围的认识尚不清晰。^[6]

此后规范对这类属性的定义做过结构性调整，把「CORS 设置属性」明确为枚举属性，列出关键字与状态的对应关系，并把空字符串一并划入 anonymous 状态；相关的规范提交记录保留了这一改动过程。^[7]

应用

最常见的用途是让跨源图像能够进入画布。开发者在 img 元素上设置该属性后，浏览器会请求对图像数据的跨源访问权限；只要托管图像的服务器以 Access-Control-Allow-Origin 响应头作出允许，图像就可以像同源资源一样被绘制并读取像素。在脚本中，等价做法是把 HTMLImageElement 的 crossOrigin 设为 anonymous。^[8]

另一类用途与脚本错误采集有关。页面上的脚本若来自 内容分发网络 等其他源，浏览器向 window.onerror 报告的往往只有一句笼统的提示，拿不到可用于排查的具体信息；为 script 标签加上该属性可以换取完整的错误详情。^[1]

link 元素同样支持该属性，用于样式表、预取等资源。抓取需要凭据的 Web 应用清单文件时必须使用 use-credentials，即便该文件与页面同源也是这样。^[1]

音频与视频元素也可以通过该属性开启 CORS 抓取。这类媒体数据一旦经过 CORS 获得，就可以在画布中复用而不被标记为污染。^[9]

局限

该属性只能改变请求的发起方式，无法替服务器作出授权决定。若服务端没有返回 Access-Control-Allow-Origin，或返回的头中不包含页面所在的源，浏览器会阻断媒体资源加载并向控制台记录 CORS 错误；此时在画布中读取数据仍会失败。^[9]

在浏览器支持上也存在差异。Chromium 内核的浏览器对 rel="icon" 场景不支持该属性，该问题在 Chromium 的缺陷库中处于未关闭状态；Firefox 则是在 83 版本之前同样不支持这一组合。^[1]

属性的粒度是元素级的，它作用于该元素发出的所有请求，不能针对单次请求单独设定。另外，当请求目标与文档同源、且取值为 anonymous 时，凭据仍会被发送，因而 anonymous 并不等于在任何情况下都不带凭据。^[10]

参见

• CORS —— 浏览器与服务器协商跨源资源访问的机制，crossorigin 属性正是为配置它而设。

• 同源策略 —— 规定哪些跨源读取行为需要额外授权的浏览器安全模型。

• Canvas —— 跨源图像能否在其中正常读取，是 crossorigin 属性最主要的使用场景。

• 超文本标记语言 —— crossorigin 所属的属性体系。

• 内容分发网络 —— 静态脚本与图片常经其分发，因而经常需要配置跨源访问。