What is the purpose of crossorigin Attribute in HTML ?

What is the purpose of crossorigin Attribute in HTML ?

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:



You may also be interested in