HTMLImageElement#crossOrigin should use literal union type from allowable values

[thw0rted]

TypeScript Version: Nightly 2020-07-29

Search Terms: htmlimageelement crossorigin

Code

const i = new Image(10, 10);
// @ts-expect-error
i.crossOrigin = "abc"; // Must be "anonymous" or "use-credentials"

Expected behavior:

Type should be defined with string literals, per this MDN page

Actual behavior:

Property is typed as string | null.

---

Playground Link

[RemyMachado]

TS2322: Type 'string | undefined' is not assignable to type '"" | "anonymous" | "use-credentials" | undefined'.

Currently redefining type for the crossOrigin property on my react App, to avoid this error.

interface Props extends HTMLProps<HTMLImageElement> {
  crossOrigin?: '' | 'anonymous' | 'use-credentials' | undefined
}

[DvzH]

Actually this is creating an issue with all the UI libraries such as Material UI, bootstrap etc. It's throws an error saying that the crossOrigin is a required prop even though it was defined as optional in all these above UI lib's. So because of that it requires user to pass crossOrigin as a prop on Input field, Radio and CheckBox etc

ref: creativetimofficial/material-tailwind#427

[machineghost]

It's confusing that a basic HTML bug has languished without even a single developer response, despite being credibly reported five years ago. I know the team has lots of priorities to juggle, but surely accurate types for basic things (ie. HTML) are more of a priority than "ignore for five years with no response"?

Furthermore, everything needed to solve this ticket is already referenced ... in the current Typescript code:

/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLLinkElement/crossOrigin) */
crossOrigin: string | null;

If you follow that URL you'll see:

Value

A string of a keyword specifying the CORS mode to use when fetching the resource. Possible values are:

• anonymous or the empty string ("")
  Requests sent by the HTMLLinkElement will use the cors mode and the same-origin credentials mode.
  This means that CORS is enabled and credentials are sent if the resource is fetched from the same origin from which
  the document was loaded.

• use-credentials
  Requests sent by the [TMLLinkElement will use the cors mode and the include credentials mode. All resources requests by the element will use CORS, regardless of what domain the fetch is from.

If the crossOrigin property is specified with any other value, it is the same as specifying as the anonymous.

Technically that last sentence supports the current implementation ... but in so many similar cases Typescript doesn't allow any string, and instead strives to save developers from mistakes like:

<Link crossOrigin="user-credentials" /> // NOTE: "user" not "use"

It's 99.9% certain that the user meant use-credentials(with no r), and will now have a bug (because the browser will treat it the same as anonymous).

In other words, RemyMachado's interface seems far more "TypeScript-y" to me than the current one.

EDIT:

It turns out React itself handles <link crossorigin ... (ie. <link crossOrigin ...) incorrectly (by not allowing it). Since that requires an "upstream" fix, TS should clearly keep prohibiting true until React allows it (thus my removal of this next bit).

However, there's still one issue, which should be fixed even if all of the above isn't; the following is perfectly valid, but TypeScript falsely flags it as invalid:

<link crossorigin ...

This is not some corner/freak case: attributes without equal signs (which translate to attribute=true) are a core part of HTML, and I came here because Google (an HTML spec author) uses just crossorigin in Google Fonts example code.

Thus, the correct interface should be:

interface Props extends HTMLProps<HTMLImageElement> {
  crossOrigin?: '' | 'anonymous' | 'use-credentials' |  undefined
}

If a maintainer acknowledges this ticket I'd be happy to submit a PR. I mean heck, I can almost submit it now:

/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLLinkElement/crossOrigin) */
-  crossOrigin: string | null;
+  crossOrigin?: '' | 'anonymous' | 'use-credentials' | undefined
/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLLinkElement/disabled) */
disabled: boolean;

[RyanCavanaugh]

HTMLImageElement.crossOrigin is still declared as string | null, so an invalid value is accepted by both TypeScript 4.0.0-dev.20200730 and the current native compiler.

// Expected: Invalid crossOrigin values should be rejected.
// Actual: An invalid value is accepted.
new Image().crossOrigin = "abc";

The HTML specification defines HTMLImageElement.crossOrigin as reflecting crossorigin, limited to known values. Browsers accept an arbitrary setter string and reflect an invalid value as "anonymous"; that setter behavior is compatible with the platform, but the declaration can provide a more precise authoring surface for the known CORS values.