What is the use of integrity attribute in HTML ?

Last Updated : 01 Oct, 2021

In this article, we will learn the purpose of using the integrity attribute in HTML & will also understand its implementation through an example. HTML introduced a new attribute called “integrity”. The purpose of the integrity attribute is used to give permission to the browser to check the fetched script to make ensure the source code is never loaded if an unexpected manipulation has been made. It is used to check that whether the third party has been altered the resource or not.

A Subresource Integrity (SRI) is a security feature developed by w3consortium, especially for the control of CORS requests. It gives surety that the fetched external scripts would not be altered by the third party. It specifies the base64-encoded cryptographic hash of a resource(source file).

The working process of SRI follow as:

The webpage holds the hash value and on the other side, the server holds the .js file.
Now, the browser matches the hash value of the integrity attribute.
In the end, if the value of hash matches then the file is used otherwise the file is blocked.

Syntax:

<element integrity="filehash">

Attributes:

filehash: It indicates the hash value of the external script file.

Note: The integrity attribute can only be used with the <link> tag or the <script> tag.

Example: This example illustrates the HTML integrity attribute by declaring it inside the <script> tag.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>HTML Integrity Attribute</title> 
  
    <script type="text/javascript" src="my_script.js"
        integrity= 
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"> 
    </script> 
</head> 
  
<body style="text-align: center"> 
    <h1>GeeksForGeeks</h1> 
    <h2>HTML Integrity Attribute</h2> 
    <br /> 
    <button>Submit</button> 
</body> 
  
</html>