HTML - Integrity attribute


integrity is an attribute of the fetch elements.

Its value is a digest that controls that the file was not altered in transit. It's a data integrity functionality.


If the calculation output with a sha384 was:


A link element for instance would be:

<link rel="stylesheet" href="stylesheet.css" integrity="sha384-ZYfZnVukOuh/gRpU9uN+T9XwwRFJ9Y+0Ylk3zKvI184omb/HoOtQ0F8Iol7Nix7q">

Script element with javascript

For a script element

<script src="script.js" integrity="sha384-ZYfZnVukOuh/gRpU9uN+T9XwwRFJ9Y+0Ylk3zKvI184omb/HoOtQ0F8Iol7Nix7q" type="text/javascript"></script>





The integrity can be calculated with the following command line.

It calculate the digest with a sha (256 or 384) and apply the base64 algorithm above.

openssl dgst -sha256 -binary stylesheet.css | openssl base64 -A

openssl dgst -sha384 -binary stylesheet.css | openssl base64 -A

# work also for other script
openssl dgst -sha384 -binary script.js | openssl base64 -A


Documentation / Reference

Discover More
Cryptography - Message Digest (checksum|hash) (sha1|md5)

A message digest is the output of hash function (also known as a checksum). The input is known as the message (ie a piece of data: file, payload). It is used to verify that the data has not been altered...
Consistent Hashing
Function - sha256 (Secure Hash Algorithm-256)

sha256 is a hash function of the sha family sha256integrity HTML attributebase64 With the crypto.subtle.digest function. Output: Test it yourself, change the input and see the change in the...
Consistent Hashing
Function - sha512 (Secure Hash Algorithm-512)

sha512 is a Secure Hash Algorithm (SHA) algorithm that create a message digest sha512integrity HTML attributebase64 Openssl the linux sha512sum utility.
HTML - (Client-side) Script (Element)

A client-side script is a program that is: linked (server-side script) or directly embedded in an HTML document (in-line script) Scripts in HTML have “run-to-completion” semantics, meaning that...
HTML - The link element (inter-document relationships)

The link represents metadata that expresses inter-document relationships. hyperlink The link element can be used only within the head element. where: media is a list of media query separated...
Javascript - Module Loader (Script Loader)

A loader searches and loads module and script into the javascript engine (environment). From the main script, they will: create a dependency graph from the require and import statement find them...
What are the HTML elements that fetch resources?

Some HTML elements are fetching resources. This page lists them.
What is RequireJs: the browser module loader ?

RequireJs is a browser module loader that implements the AMD specification . It may load also other modules (UMD, CommonJs) In this example, we will load the bowser...
HTML - crossorigin attribute (CORS policy)

crossorigin is an attribute that set the mode of the request to an HTTP CORS Request. Its value defines further the CORS policy. It can be used on every html elements that fetch resources from a cross-origin...

Share this page:
Follow us:
Task Runner