Added 'use-credentials' Cors Option to ImageOverlay and TileLayer

[caleblogan]

Fixes #5891

I added a new option to set the crossOrigin property to 'use-credentials'. Another solution would be to make crossOrigin a String and set the default value to null. Let the user set crossOrigin as a String.

[ghybs]

Hi,

Thank you for contributing your first PR here!

I like that this new "crossOriginCredentials" option would make it easy to set the crossorigin="use-credentials" attribute and value.

Unfortunately it may conflict with the already existing crossOrigin option; e.g. if we have:

{
  crossOrigin: true,
  crossOriginCredentials: true
}

…the <img> will have the crossorigin="use-credentials" attribute and value (with current state of PR), although with crossOrigin: true we have requested to get crossorigin="".

Furthermore, there are actually 3 possible states for this attribute:

• crossorigin="use-credentials" => "cors" mode and "include" credentials mode.
• crossorigin="anonymous" (or actually any other value than "use-credentials") => "cors" mode and "same-origin" credentials mode.
• no/omitted crossorigin attribute => "no-cors" mode.

Therefore we need at least a tristate option.

Another solution would be to make crossOrigin a String

That would indeed match with @IvanSanchez's #5891 (comment)

We could have:

• type "string" => crossorigin="<crossOrigin-option-value>"
• other truthy value => crossorigin="" (same effect as crossorigin="anonymous")
• false (default) => no crossorigin attribute ("no-cors" requests mode)

This scheme would require the app developer to explicitly specify crossOrigin: 'use-credentials' option (instead of just crossOriginCredentials: true), but it leverages the already existing crossOrigin option and maintains backwards compatibility.

It also leaves this string out of the library (saves a few bytes for common case…), and keeps the door open to any other keyword that may appear in the future (how unlikely this may sound).

@IvanSanchez @cherniavskii what do you think?

[cherniavskii]

@ghybs I like proposition of crossOrigin accepting string - it's obvious and flexible.
Also, it's easy to refer crossorigin attribute docs in our documentation :)

[mourner]

What do you think about reusing the crossOrigin option for that? We could just use its value for crossOrigin if a string is supplied, otherwise set to '' if truthy.

[caleblogan]

I wasn't too sure how to phrase the docs. Especially the default value, String = false. I didn't do any type checking so setting crossOrigin=True will result in <img crossorigin="true"/>. This will still work, but I am not sure if it could cause a possible backwards compatibility problem.

[ghybs]

Thank you for the modification to make the PR now re-use the crossOrigin option! 👍

Even though the spec says that an invalid keyword (as "true" in this case) is interpreted as "anonymous" and "" (empty string), it does not feel right that a currently valid option crossOrigin: true would then lead to using an invalid keyword.

Therefore I think we should at least convert crossOrigin: true to crossorigin="".

As for the docs, you should specify that a Boolean type is possible, using a vertical pipe (|), like is done for the doubleClickZoom map option for example:

Leaflet/src/map/handler/Map.DoubleClickZoom.js

Lines 12 to 17 in ba6f97f

	// @option doubleClickZoom: Boolean|String = true
	// Whether the map can be zoomed in by double clicking on it and
	// zoomed out by double clicking while holding shift. If passed
	// `'center'`, double-click zoom will zoom to the center of the
	// view regardless of where the mouse was.
	doubleClickZoom: true

[ghybs]

LGTM, thank you four the modifications!