Youn

Posted on Aug 19

HTML crossorigin Attribute : CORS Request Modes

#crossorigin #html #cors

Definition and Usage

The crossorigin attribute specifies the CORS (Cross-Origin Resource Sharing) request mode used when fetching resources linked to an element from an external origin.

CORS (Cross-Origin Resource Sharing)

CORS is a web standard mechanism that allows web browsers to request and access external resources that might otherwise be blocked for security reasons.

Using the crossorigin attribute allows you to safely use external resources (e.g., external images, fonts, and scripts) according to web standards by specifying the CORS request mode.

Usage Notes

# Understanding the Interaction Between Resources from External Origins and the Current Web Page

- Same-Origin Policy (SOP)

Browsers implement a core security mechanism called the Same-Origin Policy (SOP). This policy restricts how documents or scripts loaded from the current origin can interact with resources from an external origin.

When resources from an external origin are linked to a web page, browsers restrict interactions with those resources for security reasons. This security rule is called the Same-Origin Policy (SOP).

- Cases Where the Same-Origin Policy Allows Access to Resources from an External Origin

The Same-Origin Policy does not unconditionally restrict access to resources from an external origin.
It allows limited access to resources from external origins. A prime example is when resources are simply embedded into the current web page.

External script files embedded using <script src="…"></script>
External CSS files linked using <link rel="stylesheet" href="…">
Media played using <video>and <audio>
Images displayed using <img> and <picture>
Content embedded using <iframe>
External resources embedded using <object> and <embed>
Fonts applied using the CSS @font-face rule (some browsers may require the same origin)

- Cases Where the Same-Origin Policy Restricts Access to Resources from an External Origin

Simply embedding resources from an external origin does not generally restrict access.
However, when the current web page interacts with resources from an external origin, access is restricted because it may affect security.

Data communication: When the current web page communicates with resources from an external origin (e.g., fetching data through an AJAX request)
Access to cookies and stored information: When resources from an external origin attempt to access information from the current web page (e.g., attempting to access user cookies)
External origin resources within simply embedded resources from an external origin: When resources from an external origin exist within simply embedded resources from another external origin, access may be restricted to maintain security.
Script execution: When attempting to execute scripts from external origin resources on the current web page, or when external origin resources attempt to call script APIs of the current web page (certain specific APIs may be allowed).

# CORS (Cross-Origin Resource Sharing)

CORS (Cross-Origin Resource Sharing) is a web standard mechanism that allows interactions between the current origin, which is restricted by the Same-Origin Policy, and resources from an external origin.

This mechanism can be broadly divided into two approaches: specifying the CORS request mode using the HTML crossorigin attribute, and configuring CORS policies on the server to allow interactions with resources from an external origin.

This article covers how to specify the CORS request mode applied when fetching resources from an external origin using the crossorigin attribute.

Specifying CORS Request Modes for External Origin Resources Using the crossorigin Attribute

The crossorigin attribute is used for requests to resources from an external origin, such as those made by the <link>, <img>, <script>, <video>, and <audio> elements. It specifies the CORS request mode applied when fetching external origin resources linked to the element.

The crossorigin attribute value specifies the CORS request mode applied when fetching resources from an external origin. This value determines how the CORS request is processed.

# Things to Keep in Mind

Unlike general resources, web fonts are loaded into web pages using the CSS @font-face rule. During this process, browsers may perform CORS requests in the background. Therefore, even for same-origin web font resources, when preloading them using <link> with rel="preload", it is recommended to use crossorigin="anonymous" as well to ensure that the same CORS request mode is used as the actual font loading request.

References

HTML crossorigin Attribute – Specifying CORS Request Modes - codingCourses