Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is the purpose of crossorigin Attribute in HTML ?

  • Last Updated : 21 Oct, 2021

As we know that HTML introduces many elements and attribute that have some definition and specification that will be used for the enhancement of web development. In this article, we will learn how to use crossorigin attributes in HTML.

The purpose of crossorigin attribute is used to share the resources from one domain to another domain. Basically, it is used to handle the CORS request. It is used to handle the CORS request that checks whether it is safe to allow for sharing the resources from other domains. The resources may include Audio, Video, Images, Link or external script that specifies whether to support a cross-origin request or not.

CORS: It stands for cross-origin resource sharing. It is a mechanism by which one webpage requests to another domain for fetching out the resource like audio, video, script, etc. from the third party server without leaking their credentials information. 

Values: This attribute contains two values which are given below –

  • anonymous: It has a default value. It defines a CORS request which will be sent without passing the credential information.
  • use-credentials: A cross-origin request will be sent with credentials, cookies, and certificate.

 

Example: Below code demonstrates the use of crossorigin attribute in a <script> element. 

index.html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        What is the purpose of crossorigin 
        Attribute in HTML?
    </title>
</head>
  
<body style="text-align: center">
    <h1>GeeksForGeeks</h1>
  
    <h2>
        What is the purpose of 
        crossorigin Attribute in HTML?
    </h2>
  
    <script id="myGeeks" type="text/javascript" 
        src="my_script.js" crossorigin="anonymous">
    </script>
    <br />
  
    <button>
        Submit
    </button>
</body>
  
</html>

my_sctipt.js




alert("Hello GeeksForGeeks")

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!