How to use SRI (Subresource integrtiy) attribute in script tag to prevent modification of static resources ?

Understanding Supply Chain Attacks

Supply chain attacks involve compromising a third-party service or library to inject malicious code into websites that rely on it. A recent example is the Polyfill.io incident, where thousands of websites w…


This content originally appeared on DEV Community and was authored by Franklin Thaker

Understanding Supply Chain Attacks

Supply chain attacks involve compromising a third-party service or library to inject malicious code into websites that rely on it. A recent example is the Polyfill.io incident, where thousands of websites were potentially compromised.

How Could This Be Prevented?

One effective way to mitigate such risks is by using the Subresource Integrity (SRI) attribute in your HTML scripts and link tags. SRI allows browsers to verify that the fetched resources (like scripts or stylesheets) are delivered without unexpected manipulation.

Demonstration

#script.js
console.log("Hello World - Secured!");
#index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script
    src="script.js"
    integrity="sha384-[YOUR-GENERATED-HASH]"
    crossorigin="anonymous"
  ></script>
  <title>SUBRESOURCE INTEGRITY EXAMPLE</title>
</head>
<body>
  Hello World
</body>
</html>
#app.js - to serve above files
const express = require('express');
const app = express();

app.use(express.static("./"));

app.listen(80, () => {
  console.log('Server is running on http://localhost');
});

Generating the Integrity Hash

openssl dgst -sha384 -binary script.js | openssl base64 -A

Now if we perform all the above steps correctly then the following working output should appear:

WORKING OUTPUT IF ABOVE STEPS PERFORM CORRECTLY

Now Let's try to modify script.js

#script.js - modified
console.log("Hello World - Modified!");

Now try to open http://localhost/index.html, you should see following error:

None of the sha384 hashes in the integrity attribute match the content of the resource.

SO THE MODIFIEFD SCRIPT WON'T RUN AT ALL!!

SCRIPT WON'T RUN AFTER MODIFICATION

Resources:


This content originally appeared on DEV Community and was authored by Franklin Thaker


Print Share Comment Cite Upload Translate Updates
APA

Franklin Thaker | Sciencx (2024-06-29T05:58:51+00:00) How to use SRI (Subresource integrtiy) attribute in script tag to prevent modification of static resources ?. Retrieved from https://www.scien.cx/2024/06/29/how-to-use-sri-subresource-integrtiy-attribute-in-script-tag-to-prevent-modification-of-static-resources/

MLA
" » How to use SRI (Subresource integrtiy) attribute in script tag to prevent modification of static resources ?." Franklin Thaker | Sciencx - Saturday June 29, 2024, https://www.scien.cx/2024/06/29/how-to-use-sri-subresource-integrtiy-attribute-in-script-tag-to-prevent-modification-of-static-resources/
HARVARD
Franklin Thaker | Sciencx Saturday June 29, 2024 » How to use SRI (Subresource integrtiy) attribute in script tag to prevent modification of static resources ?., viewed ,<https://www.scien.cx/2024/06/29/how-to-use-sri-subresource-integrtiy-attribute-in-script-tag-to-prevent-modification-of-static-resources/>
VANCOUVER
Franklin Thaker | Sciencx - » How to use SRI (Subresource integrtiy) attribute in script tag to prevent modification of static resources ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/29/how-to-use-sri-subresource-integrtiy-attribute-in-script-tag-to-prevent-modification-of-static-resources/
CHICAGO
" » How to use SRI (Subresource integrtiy) attribute in script tag to prevent modification of static resources ?." Franklin Thaker | Sciencx - Accessed . https://www.scien.cx/2024/06/29/how-to-use-sri-subresource-integrtiy-attribute-in-script-tag-to-prevent-modification-of-static-resources/
IEEE
" » How to use SRI (Subresource integrtiy) attribute in script tag to prevent modification of static resources ?." Franklin Thaker | Sciencx [Online]. Available: https://www.scien.cx/2024/06/29/how-to-use-sri-subresource-integrtiy-attribute-in-script-tag-to-prevent-modification-of-static-resources/. [Accessed: ]
rf:citation
» How to use SRI (Subresource integrtiy) attribute in script tag to prevent modification of static resources ? | Franklin Thaker | Sciencx | https://www.scien.cx/2024/06/29/how-to-use-sri-subresource-integrtiy-attribute-in-script-tag-to-prevent-modification-of-static-resources/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.