The <crossorigin> Attribute

The <crossorigin> attribute specifies how the browser should perform a CORS request for a resource loaded from a DIFFERENT origin (different domain, subdomain, protocol, or port). This matters when loading scripts, styles, images, fonts, or video from external servers. CORS (Cross-Origin Resource Sharing) is a mechanism that defines the rules for whether and how resources can be shared across different origins. The <crossorigin> attribute has two main values:

"anonymous": the request does not send credentials (cookies, Authorization). The server must return the Access-Control-Allow-Origin header (e.g., https://your-domain.com or *).
"use-credentials": the request sends credentials. The server must return Access-Control-Allow-Origin: https://your-domain.com (not *) and Access-Control-Allow-Credentials: true.

If you load a resource from the same origin (e.g., src="/..."), the <crossorigin> attribute has no effect. For a practical example, prepare an external JavaScript file on another domain or subdomain and include it in your HTML document with the appropriate <crossorigin> attribute.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example: crossorigin (anonymous and use-credentials)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1>Example of using the crossorigin attribute</h1>

  <p>Below are two scripts loaded from another origin (cross-origin), each with a different
     <code>crossorigin</code> attribute:</p>

  <ul>
    <li><strong>anonymous</strong> – the request does NOT send credentials (cookies, Authorization, etc.). The server must 
      return <code>Access-Control-Allow-Origin</code> (e.g., <code>https://your-domain.com</code> or <code>*</code>).</li>
    <li><strong>use-credentials</strong> – the request sends credentials (cookies, Authorization, etc.). The server must 
        return <code>Access-Control-Allow-Origin: https://your-domain.com</code> and 
        <code>Access-Control-Allow-Credentials: true</code> (<code>*</code> is NOT allowed here).</li>
  </ul>

  <!-- 1) Without credentials (anonymous) -->
  <script
    src="https://cdn.example.com/examples/html/crossorigin_sl.js"
    crossorigin="anonymous">
  </script>

  <!-- 2) With credentials (use-credentials) -->
  <script
    src="https://assets.your-domain.com/examples/html/crossorigin_sl.js"
    crossorigin="use-credentials">
  </script>

  <hr>

  <p>Notes:</p>
  <ul>
    <li>If you reference a same-origin resource (e.g., <code>src="/path/to/app.js"</code>),
      <code>crossorigin</code> has no effect.</li>
    <li>For an “alert” demo, the external file (on the other domain) can contain, for example,
      <code>alert('Script loaded!')</code>. This way you’ll immediately see it was loaded.</li>
    <li>If you use Subresource Integrity (<code>integrity="sha384-…"</code>), you would typically use
        <code>crossorigin="anonymous"</code>.</li>
  </ul>
</body>
</html>

RESULT