Menu
from MDN
anonymous
A cross-origin request (i.e., with Origin: HTTP header) is performed. But no credential is sent (i.e., no cookie, no X.509 certificate, and no HTTP Basic authentication is sent). 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 Origin: HTTP header) performed with credential is sent (i.e., a cookie, a certificate, and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.
but, what's the usage difference between them.
290
Attribute Values Specifies the mode of the CORS request: anonymous - A cross-origin request is performed. No credentials are sent. use-credentials - A cross-origin request is performed. Credentials are sent (e.g. a cookie, a certificate, a HTTP Basic authentication)
"" Setting the attribute name to an empty value, like crossorigin or crossorigin="" , is the same as anonymous . An invalid keyword and an empty string will be handled as the anonymous keyword.
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
The crossorigin attribute specifies that the img element supports CORS. CORS stands for Cross Origin Resource Sharing. CORS is a standard mechanism to retrieve files from a third party domain or server. If specified, the image file request will be sent with or without credentials.
but, what's the usage difference between them. anonymous and use-credentials are attribute values which translate into requesting a resource with same-origin and include respectively. When requesting a resource without specifying the crossorigin attribute (i.e. omitted), then you will make a no-CORS fetch.
Setting the attribute name to an empty value, like crossorigin or crossorigin="", is the same as anonymous. By default (that is, when the attribute is not specified), CORS is not used at all.
The crossorigin attribute sets the mode of the request to an HTTP CORS Request. Web pages often make requests to load resources on other servers. Here is where CORS comes in. A cross-origin request is a request for a resource (e.g. style sheets, iframes, images, fonts, or scripts) from another domain.
For obvious reasons, browsers can request several cross-origin resources, including images, CSS, JavaScript files and so forth. By default, however, a browser’ security model will deny any cross-origin HTTP request performed by client-side scripts.
anonymous and use-credentials are attribute values which translate into requesting a resource with same-origin and include respectively.
When requesting a resource without specifying the crossorigin attribute (i.e. omitted), then you will make a no-CORS fetch. This should be used for resources which aren't protected by CORS.
When requesting a resource using crossorigin="anonymous" (or crossorigin="" as this is the default value) then you are switching it to a CORS request. This means that a resource protected by CORS (example: fetch()) would be sent to the browser if the response headers include
Access-Control-Allow-Origin: *
Note we are using the * wildcard, but this could be a also be specific origin.
Access-Control-Allow-Origin: https://example.com
When requesting a resource using crossorigin="use-credentials" then you are making a request for a resource which is protected by CORS and may also include private data, for example your banking information (for example: fetch("https://bank.com/my-transaction-history/")). In such cases, the response header should include:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://example.com
Vary: Cookie, Origin
The server receiving the request will have access to cookies, the Authorization header, client certificates to be able to authenticate the user and also the ability to set a cookie on the browser making the request using the Set-Cookie
Read more: https://jakearchibald.com/2021/cors/
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
