Schalk Neethling

Scripting on Caffiene

Exploring the Crossorigin Media Attribute in HTML5

| Comments

In exploring the HTML language in more detail I came across the crossorigin attribute that can be used on media elements such as video and audio. The specification of this seems pretty foggy to me so I went in search of some answers. Below is where I am currently at in my understanding of the use and purpose of this attribute.

When a video resource is loaded by the user agent it goes through a multitude of steps before the video is loaded and played. One of these steps is called the resource selection algorithm. As the name suggests, this is where the user agent will select which of the specififed media elements it will play, based on outcomes such as whether the media type can be played by the user agent or, whether loading of the media resource was successfull or failed.

There are a couple of ways a media resource location can be specified to the user agent. It can be specified as a media provider object, which can be one of MediaStream, MediaSource, Blob or, File.

It can also be specified using the src attribute of the video element or, specifying one or more resource locations using nested source elements.

Once the user agent has selected the media resource to load, it calls the resource fetch algorithm. This algorithm has one of two paths it can follow and, for all but when called with an object, as defined above, this will be called with a URL and follow the "mode is remote" path.

In general a user of the video element will not be overly concerned about this process. However, if you wish to do more with video data that is loaded via a cross-origin request, you need to be aware of this process and in particular, the crossorigin attribute and it's role.

The crossorigin attribute has one of two possible values:

  • anonymous
  • use-credentials

It is important to note that what follows relates to the Fetch standard which is in the process of being integrated into HTML. When you use the crossorigin attribute it sets the "use-URL-credentials" flag and maps anonymous to "same-origin" and use-credentails to "include" for the crendentials mode. If you omit the crossorigin attribute, "use-URL-credentials" is unset and, the default for credentials mode is assumed, which is omit.

The use, or omission of the crossorigin attribute then also plays a role in the Access-Control-Allow-Credentials header in determining whether access to a resource should be allowed if credentials mode is set to "include"[use-credentials].

Using crossorigin when loading data from third parties is especially important if you want to use the data obtained for anything more than basic interactions. If a video has associated metadata related to subtitle tracks or chapter titles for example, it will not be loaded if a CORS resource sharing check is not passed. As such, if you require access to this metadata and it is protected you will need to set crossorigin to "use-credentials".

Another example where the use of this attribute is important is when painting video data to a canvas. If the CORS resource sharing check fails in this scenario, the origin-clean flag of the canvas will be set to false, tainting the canvas, and subsequent calls to the element's toDataURL(), toBlob(), and getImageData() functions will result in a SecurityError to prevent leaking cross-origin data.

Using crossorigin attribute with video tag
<video src="" controls width="490" height="270" crossorigin="use-credentials"></video>

This post could not have written without the generous help from the folks on the #whatwg IRC channel and in particular annevk [Anne van Kesteren] /