Available in Chrome 45+ | View on GitHub | Browse Samples
Subresource integrity defines a mechanism by which a browser can verify that a fetched resource has been delivered without unexpected manipulation. Metadata inlined into HTML elements allows the browser to determine whether the resource that was downloaded matches the resource the page's author expected to download.
The current implementation covers only the two elements outlined in the spec:
<script> and <link rel="stylesheet"> elements.
This page attempts to load two local CSS resources. One is linked to with a valid hash, and the other is linked to with an invalid hash. Browsers that support subresource integrity will refuse to load the CSS resource with the invalid hash. In a real-world application, this might be more useful when you are calculating the hash of a third party, remote resource that you do not control, but local resources are being used for illustrative purposes.
This paragraph is styled via the CSS resource linked to with
<link rel="stylesheet" href="correct_hash.css" integrity="sha256-qvuZLpjL9TNV6yI1kNdGCPnSTrWM6Y0ILEzzyvA9hGY=">
Since that uses an integrity attribute that corresponds to the actual hash of the
file, it will be loaded successfully and this paragraph will be green.
cat correct_hash.css | openssl dgst -sha256 -binary | openssl enc -base64 -A was used
to generate the sha256 hash value.
This paragraph is styled via the CSS resource linked to with
<link rel="stylesheet" href="incorrect_hash.css" integrity="sha256-OBVIOUSLY_INCORRECT_HASH">
Browsers that support subresource integrity will refuse to load the file, since the
integrity value doesn't correspond to the actual sha256 hash of the
file. You'll see an error message logged in the developer tools (for example, Chrome DevTools) console. Browsers that don't support
subresource integrity will, however, load the file, and in those browsers this paragraph will be
pink.