The crossorigin attribute is used to control the CORS behavior when HTML resource cross-domain requests. Common values are anonymous and use-credentials. 1. It is mainly used in image, script, style sheet and other resource tags such as <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175346120315892.jpeg" class="lazy" alt="HTML `crossorigin` Attribute for CORS" >, <script>, &lt;link&gt;, to determine whether the browser enables the CORS mechanism; 2. The value anonymous means sending CORS requests without credentials, and the server requires credentials to be allowed by use-credentials; 3. Common scenarios include: Canvas drawing requires crossorigin to prevent pollution, CDN loads resources with the server CORS configuration, use use-credentials when authenticated access is required, and ensures that the server response header is correct. Incorrect settings may cause resource loading failures or security policy issues. </script>

In HTML, the crossorigin attribute is mainly used to control the behavior of certain resources (such as images, scripts, style sheets, etc.) when requesting across domains, especially related to the CORS (cross-domain resource sharing) mechanism. Although it looks simple, it may cause resource loading to fail or security policies to be bypassed.

If you encounter an error like "Blocked by CORS policy" when loading external resources, it is likely that crossorigin property is not set correctly.

What is crossorigin attribute?

crossorigin is an attribute in HTML tags, commonly found in <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175346120315892.jpeg" class="lazy" alt="HTML `crossorigin` Attribute for CORS" > , <script></script> , <link> and other tags. Its purpose is to tell the browser whether to enable CORS when requesting the resource.

for example:

 <img  src="/static/imghw/default1.png"  data-src="https://example.com/image.jpg"  class="lazy" crossorigin="anonymous" alt="HTML `crossorigin` Attribute for CORS" >

This property itself does not automatically resolve cross-domain issues, but it affects how the browser handles requests and responses. Without this attribute, some resources cannot be used for certain scenarios that require a safe context, such as drawing on Canvas, even if they can be displayed normally.

What are the commonly used values of crossorigin ?

This property supports two commonly used values, and there are some special usages that need to be paid attention to:

• anonymous : This is the most commonly used value. Indicates that a CORS request is sent without credentials (such as cookies, HTTP authentication) when requesting a resource.
• use-credentials : brings credentials when requesting, but the server must allow credentials in the response header ( Access-Control-Allow-Credentials: true ) otherwise it will be rejected.
• Null value or not written : equivalent to anonymous , but omission is not recommended because the semantics are not clear enough.

for example:

 <script src="https://cdn.example.com/script.js" crossorigin="anonymous"></script>

Common usage scenarios and precautions

1. crossorigin must be set when using Canvas

If you load an image from another domain name and plan to operate it with <canvas> (such as screenshots, filters, etc.), you must set the crossorigin attribute, otherwise the browser will think that the image is "polluted" and cannot perform subsequent operations.

Error example:

 <img  src="/static/imghw/default1.png"  data-src="https://other.com/image.png"  class="lazy" id="img" alt="HTML `crossorigin` Attribute for CORS" >
<canvas id="canvas"></canvas>

// Draw pictures in JS to canvas
const ctx = canvas.getContext(&#39;2d&#39;);
ctx.drawImage(img, 0, 0); // Error: Canvas is tainted

Correct way to do it:

 <img  src="/static/imghw/default1.png"  data-src="https://other.com/image.png"  class="lazy" crossorigin="anonymous" id="img" alt="HTML `crossorigin` Attribute for CORS" >

2. Pay attention to the CDN resource loading scripts or fonts.

If you load JS or font resources from CDN and the CDN has CORS policy configured, then adding crossorigin can ensure that the loading process is more controllable. for example:

 <script src="https://cdn.example.com/your-script.js" crossorigin="anonymous"></script>

If the server does not set Access-Control-Allow-Origin correctly, it may be intercepted by the browser even if the resource can be loaded.

3. When using use-credentials the server must cooperate

If you need to bring cookies or authentication information, such as accessing a resource under permission, you must set it:

 <img  src="/static/imghw/default1.png"  data-src="https://api.example.com/secure-image.png"  class="lazy" crossorigin="use-credentials" alt="HTML `crossorigin` Attribute for CORS" >

At the same time, the server response header must include:

 Access-Control-Allow-Origin: https://your-site.com
Access-Control-Allow-Credentials: true

Otherwise, the browser will still intercept the request.

Let's summarize

• The crossorigin property is not omnipotent, but it is the first step to enable CORS.
• Pay attention to server configuration when using different resource types (pictures, scripts, fonts).
• Setting anonymous is the right choice for most cases.
• If you use Canvas or need authentication access, select use-credentials according to the situation.

Basically that's it. Pay more attention to the resource source and server response header when using it, so that many "cross-domain failure" problems can be avoided.

The above is the detailed content of HTML `crossorigin` Attribute for CORS. For more information, please follow other related articles on the PHP Chinese website!