HTML - Integrity attribute (SRI | Source Resource Integrity)

About

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.

Example

If the calculation output with a sha384 was:

ZYfZnVukOuh/gRpU9uN+T9XwwRFJ9Y+0Ylk3zKvI184omb/HoOtQ0F8Iol7Nix7q

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>

Management

Calculation

Online

Offline

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.

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

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

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

where:

Documentation / Reference





Discover More
Checksum
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 - 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...
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...
What is the 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...
What is the script HTML 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...



Share this page:
Follow us:
Task Runner