HTML integrity Attribute

Posted in HTML Tutorial

Updated on Oct 29, 2024

By Mari Selvan

👁️ 54 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The integrity attribute is a valuable addition to HTML that enables developers to ensure the integrity of external resources, such as scripts and stylesheets, by verifying their content hasn't been altered since it was originally published.

🎯 Purpose of integrity Attribute

The primary purpose of the integrity attribute is to provide a means for verifying the integrity of external resources fetched by the browser. This is particularly important for ensuring security and trustworthiness, as it helps protect against potential attacks, such as content injection or tampering.

💎 Values

The integrity attribute accepts a cryptographic hash value that represents the expected integrity of the resource being referenced. This hash value is typically generated using algorithms like SHA-256 and is provided alongside the URI of the external resource. The browser then calculates the hash of the fetched resource and compares it with the provided hash to ensure they match.

📄 Implementation Example:

Let's look at an example of how to use the integrity attribute with a <script> tag:

index.html

Copied

<script src="example.js" integrity="sha256-abc123..." crossorigin="anonymous"></script>

🧠 How it Works

In this example, the integrity attribute is set with the SHA-256 hash value of the content of the example.js file. This ensures that the browser verifies the integrity of the script before executing it.

🔄 Dynamic Values with JavaScript

You can also dynamically set the integrity attribute using JavaScript. This can be useful when you need to generate or update the integrity value based on certain conditions or user interactions. Here's a basic example:

index.html

Copied

<script>
  // Generate integrity value dynamically
  const hashValue = generateHash(exampleScriptContent);
  document.getElementById("exampleScript").setAttribute("integrity", `sha256-${hashValue}`);
</script>

🧠 How it Works

In this script, the generateHash function calculates the SHA-256 hash value of the exampleScriptContent, and then sets the integrity attribute of the <script> tag with the id "exampleScript" accordingly.

🏆 Best Practices

Always include the integrity attribute when referencing external resources, especially for critical assets like scripts and stylesheets.
Ensure that the provided hash value is accurate and up-to-date to effectively verify the integrity of the fetched resource.
Combine the integrity attribute with the crossorigin attribute to enable CORS (Cross-Origin Resource Sharing) and ensure proper handling of resource integrity checks across different origins.

🎉 Conclusion

The integrity attribute is a valuable tool for enhancing the security and integrity of web applications by enabling browsers to verify the integrity of external resources.

By understanding and implementing this attribute correctly, developers can mitigate the risk of potential security vulnerabilities and ensure a safer browsing experience for users.