This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
A JS Foundation Project

Use subresource integrity

Use subresource integrity (sri)

sri warns about requesting scripts or stylesheets without using subresource integrity.

Why is this important?

A common practice in modern web development is to use third party resources from CDNs or different services (analytics, ads, etc.). However, doing so can increase the attack surface of your web site/app.

While there are techniques to verify the agent is talking with the right server (TLS, HSTS, etc.), an attacker (or administrator) with access to the server can manipulate the content with impunity.

If you want to load a crypto miner on 1,000+ websites you don’t attack 1,000+ websites, you attack the 1 website that they all load content from. (Scott Helme)

Subresource integrity is a standard that mitigates this by ensuring that an exact representation of a resource, and only that representation, loads and executes.

What does the hint check?

This hint checks that a website correctly uses SRI, more specifically:

  • All the downloaded resources by an <script> or <link rel="stylesheet"> have an integrity attribute.
  • The integrity attribute needs to be valid. I.e.: it should contain something in the form of sha(256|384|512)-HASH, where HASH is the hashed value of the downloaded body’s response using the previously specified algorithm (sha256, sha384, or sha512).
  • The minimum cryptographic hash function used is sha384. If multiple ones are provided, the highest one will be used to determine if the baseline is met.
  • When using a cross-origin resource (e.g.: using a script hosted in a third party CDN), the <script> or <link> tag needs to have a valid crossorigin attribute.
  • The resource is served on a secure context (i.e.: HTTPS) to guarantee the HTML and resource haven’t been tampered during the delivery.
  • The hash from the integrity attribute needs to be the same as the one calculated using the response’s body.
  • If multiple hashes are provided, at least one needs to be valid.

Examples that trigger the hint

Same-origin resource with no integrity:

<link rel="stylesheet" href="/style.css">

Same-origin resource with hash function less secure than sha384:

<script src="/script.js" integrity="sha256-validHashHere">
</script>

Cross-origin resource with no crossorigin attribute:

<script src="https://example.com/example-framework.js"
integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7">
</script>

Cross-origin resource with invalid crossorigin attribute:

<script src="https://example.com/example-framework.js"
integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7"
crossorigin="invalid">
</script>

Cross-origin resource loaded over HTTP:

<script src="http://example.com/example-framework.js"
integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7"
crossorigin="invalid">
</script>

Examples that pass the hint

Same-origin resource with sha384 or better:

<script src="/script.js" integrity="sha384-validHashHere">
</script>

Same-origin resource with multiple hashes and sha384 is one of them:

<script src="/script.js"
integrity="sha256-validHashHere
sha384-validHashHere">
</script>

Cross-origin resource with valid crossorigin attribute:

<script src="https://example.com/example-framework.js"
integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7"
crossorigin="anonymous">
</script>

Can the hint be configured?

Yes, by default the baseline algorithm is sha384 but you can change it to sha256, or sha512 by specifying that in the .hintrc file:

{
"connector": {...},
"formatters": [...],
"hints": {
"sri": ["warning", {
"baseline": "sha512"
}],
...
},
...
}

The above will validate that the integrity of all scripts and styles use sha512.

How to use this hint?

To use it you will have to install it via npm:

npm install @hint/hint-sri

Note: You can make npm install it as a devDependency using the --save-dev parameter, or to install it globally, you can use the -g parameter. For other options see npm's documentation.

And then activate it via the .hintrc configuration file:

{
"connector": {...},
"formatters": [...],
"hints": {
"sri": "error",
...
},
"parsers": [...],
...
}

Further Reading