Subresource Integrity (SRI)

README.md

Subresource Integrity (SRI)

The integrity property for scripts and stylesheets:

• https://caniuse.com/subresource-integrity
• https://w3c.github.io/webappsec-subresource-integrity/
• https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity

---

Example

<!-- External scripts -->
<script integrity="sha512-aaaaaaaaa" crossorigin="anonymous" src="script.js"></script>

<!-- External stylesheets -->
<link integrity="sha512-aaaaaaaaa" crossorigin="anonymous" href="styles.css" rel="stylesheet">

<!-- Inline stylesheets -->
<style integrity="style-src www.example.com 'sha512-aaaaaaaaa'">
body { ... }
</style>

---

Create a hash

You can have multiple hashes separated by a space, but the browser uses the highest so you might as well use only one (preferably sha-512 like Github).

Node uses crypto:

import {createHash} from "crypto";

const contents = Buffer.from("CONTENTS OF THE FILE");
const integrity = "sha512-" + createHash("sha512").update(contents).digest().toString("base64");

PHP uses hash:

$contents = file_get_contents("script.js");
$integrity = 'sha512-' . base64_encode(hash("sha512", $contents, true));

Plugins to inject integrity in HTML pages:

• for Webpack: webpack-subresource-integrity
• for Rollup: rollup-plugin-sri

More tools:

• https://www.srihash.org/
• https://zinoui.com/tools/sri-generator

---

Also related:

• Content Security Policy (CSP): https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
• Cross-Origin Resource Sharing (CORS): https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS