Purpose of The Crossorigin Attribute...

Purpose of the crossorigin attribute...?

CORS-enabled images can be reused in the element without being tainted. The allowed values are:

The page already answers your question.

If you have a cross-origin image you can copy it into a canvas but this "taints" the canvas which prevents you from reading it (so you cannot "steal" images e.g. from an intranet where the site itself doesn't have access to). However, by using CORS the server where the image is stored can tell the browser that cross-origin access is permitted and thus you can access the image data through a canvas.

MDN also has a page about just this thing: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Is this when you want to restrict the ability of others to access your scripts and image?

No.

Why do we need the crossorigin attribute when preloading font files?

The HTML attribute crossorigin defines how to handle crossorigin requests. Setting the crossorigin attribute (equivalent to crossorigin="anonymous") will switch the request to a CORS request using the same-origin policy. It is required on the rel="preload" as font requests require same-origin policy.

The same-origin policy is required on almost all new resource types, such as fetch(), <script type="module"> or fonts. It doesn't apply to legacy resource types (images, scripts, css, video, audio) because of backwards-compatibility issues. <link rel="preload"> is a special case because it is a modern feature which needs to support legacy resource types, such as preloading an image.

the ideal is, from now on, you always SOR by default when you
introduce a new type of linking. It's just the right thing to do,
because it lets us avoid having to care about a whole annoying class
of security issues. Source

This requirement was then added to the W3C draft for CSS fonts.

For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [FETCH] specification for URL's defined within @font-face rules. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document. Source

I have also come across repeated comments that it was requested by the font foundries to prevent font piracy, but I cannot substantiate that with evidence.

Why is crossorigin attribute necessary to load images into a canvas and render it?

Being that images are commonly used to load arbitrary user-defined content, and image data just opens up another vector that could be for example used to hide executable code that can be decoded later to bypass XSS filters. And ImageData and OffscreenCanvas can be passed across frames and to workers.

And there really aren't any valid use cases for allowing arbitrary image data from an element be retrieved without it being explicitly requested for, with a simple attribute. (Especially when it can just be rendered)

I think the question should be, why should it be allowed by default?

Not to mention the overhead of keeping a paper-trail for cors whitelisted (untainted) resources, when you can just have them blacklisted by default.

Basically tells the browser whether it should use a CORS request, and what headers to expect. Specifically whether to send and expect credentials.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin

crossorigin
Indicates if the fetching of the image must be done using CORS. CORS-enabled images can be reused in the element without being "tainted." Allowed values:

anonymous
A cross-origin request (i.e., with Origin HTTP header) is performed, but no credentials are sent (i.e., no cookie, X.509 certificate, or HTTP Basic authentication). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin HTTP header), the image will be tainted and its usage restricted.

use-credentials
A cross-origin request (i.e., with the Origin HTTP header) performed along with credentials sent (i.e., a cookie, certificate, or HTTP Basic authentication). If the server does not give credentials to the origin site (through the Access-Control-Allow-Credentials HTTP header), the image will be tainted and its usage restricted.

If the attribute is not present, the resource is fetched without a CORS request (i.e., without sending the Origin HTTP header), preventing its non-tainted usage in elements. If an invalid value, it is handled as if the anonymous value was used. See CORS settings attributes for additional information.

understanding the value of the crossorigin = use credentials attribute when it sends user credentials

Yes. It's a way to provide support for CORS, it defines how an element (resource) handles a crossorigin request.

So it's similar to what you're saying, it's a way to get users' credentials without it needing to be known by you. There are other options, like anonymous. You can find all the information you need in the documentation. Here you have a link to one documentation with some explanation examples.

So, when a user wants to access a resource that it's set with crossorigin use-credentials, then it'll be necessary for the user to identify, using cookies, SSL certificate, whatever. This will go in the request and will reach the server. If their credentials are valid, they will be allowed to access the resource, if they don't, he won't have access to it.

Why crossorigin attribute matters for preconnect links?

TLS client certificates.

The browser can authenticate itself to the server not just in HTTP headers when sending a request (at the application layer), but while still establishing a TLS session (at the transport-ish layer), using a client certificate. This requires the browser to know whether such authentication should be performed or not.

This is specified in the HTML Standard and in the Fetch Standard. As of this writing (October 2022), preconnecting is specified as directing the browser to obtain a connection, which in turn is defined in terms of creating a connection, which in step 2 chooses whether to use a certificate based, ultimately, on the CORS credential policy setting specified in the crossorigin= attribute. TLS certificates are currently the only authentication mechanism that CORS credential policy influences at the connection stage.

With <script crossorigin='anonymous'>, why is a script blocked by CORS policy?

I was confused about this for a while. Here's how I now understand it:

According to the W3C, there are actually three possible values for the crossorigin attribute: anonymous, use-credentials, and an "missing value default" that can only be accessed by omitting the attribute. (An empty string, on the other hand, maps to anonymous.) The default value causes the browser to skip CORS entirely, which is the normal behavior I was expecting.

The crossorigin attribute should only be used if we care about getting error information for the script being loaded. Since accessing this information requires a CORS check, the Access-Control-Allow-Origin header must be present on the resource for it to be loaded.

What is the consequence of always having the crossorigin anonymous attribute on images?

What is the use case for not using the crossorigin attribute on images?

One of these is if you want to display an cross-origin image from a server not set-up to accept anonymous requests, and don't need to programmatically export the canvas result.

If you do set the crossOrigin property, then your request will simply err, you won't be able to use the resource at all.

var url = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
var cors = new Image();cors.crossOrigin = 'anonymous';cors.onload = function(){    console.log("your browser doesn't support crossOrigin attribute");  };cors.onerror = function(){   console.log('CORS failed');  };cors.src = url;
var nocors = new Image();nocors.onload = function(){   console.log('nocors loaded');   // we can still display it   c.width = this.width;   c.height = this.height;   var ctx = c.getContext('2d');   ctx.fillStyle = 'green';   ctx.fillRect(0,0,this.width,this.height);   ctx.globalCompositeOperation = 'destination-atop';   ctx.drawImage(this, 0,0);  };nocors.src = url;

<canvas id="c"></canvas>

What are the values of the crossorigin = “use-credentials” attribute in html for?

I can use "anonymous"

Maybe you can, but maybe the resource you are requesting requires authentication and authorization so you have to send a cookie to get it.

Purpose of The Crossorigin Attribute...