In this article:
What is Subresource Integrity (SRI)?
Subresource integrity (SRI) is W3C standard that protects websites against malicious modifications to JavaScript and CSS libraries hosted externally on content delivery networks (CDNs) for the fastest delivery possible. The most popular examples are Jquery and Bootstrap.
We’ll use the Bootstrap 4.3.1 CSS src link for our examples throughout this article. Imagine your website uses the Bootstrap CSS snippet below:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Now imagine someone gains authorized access to that CDN storage location. The infected package could now steal users’ info, redirect links to include multiple targets destinations, initiate denial-of-service (DOS) attacks, and more.
This is what subresource integrity (SRI) prevents by adding an integrity attribute with the checksum (synonymous with hash and digital fingerprint) and specified algorithm for the authentic package alongside the source URL. This directs the web browser to compare the source URL’s checksum to the given checksum and only load it if they match. Include the crossorigin attribute to direct browsers to complete this action without cookies.
To apply SRI to our example, we’d add the following attributes for a SHA384 checksum:
- integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T”
- crossorigin=”anonymous”
If we added SRI with SHA384 to our CSS example above:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">Note:The Bootstrap Getting Started guide includes SRI with SHA384 by default.<
Warning: Do not simply copy any code from this article in to your website. Visit GetBootstrap.com and create a checksum yourself to ensure you’re not adding malware.
SRI usage requires that the user’s browser User-agent support SHA-256, SHA-384, and SHA-512 hash functions. An User-agent may not support the weaker MD5 and SHA-1 algorithms.
You can also add multiple algorithms for forward-compatibility with newer cryptographic algorithms. In such cases, the strongest supported hash would be used. For example, below you’ll see a SHA512 checksum following the SHA384:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
integrity="sha512-tDXPcamuZsWWd6OsKFyH6nAqh/MjZ/5Yk88T5o+aMfygqNFPan1pLyPFAndRzmOWHKT+jSDzWpJv8krj6x1LMA=="
crossorigin="anonymous">In the future, SRI may expand to support audio/visual files which would be helpful for live broadcasters with self-hosted podcasts.
Below we cover how to implement subresource integrity (SRI) in websites using external libraries.
Web App
Users without SSH access can use free web applications to ease the process.webappVisitUsers without SSH access can use free web applications to ease the process.
- Visit SRIhash.org.
- Paste the library
srcURL and click Hash! - Edit your index file.
- Paste the full script code provided within your website
<head>section. - Test your SRI integration at observatory.mozilla.org.
Create a Checksum in SSH
Advanced users can use a local computer terminal or web server SSH to create a checksum. If the library is hosted on an external server, you’ll need to use the curl command below.
- Log in to SSH or cPanel Terminal.
- Run the following command, replacing url-to-filename with the source URL (
&& echoforces the checksum shows to a new line):curl -s https://url-to-filename | openssl dgst -sha384 -binary | openssl base64 -A&& echo - (Optional) To get a SHA512 checksum or stronger, simple replace
;-sha384with your preferred algorithm:curl -s https://url-to-filename | openssl dgst -sha512 -binary | openssl base64 -A&& echo - Add the following after the
srcURL:integrity="sha384-checksum-from-code" crossorigin="anonymous"
So you don’t have to scroll up, our example from above:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
integrity="sha512-tDXPcamuZsWWd6OsKFyH6nAqh/MjZ/5Yk88T5o+aMfygqNFPan1pLyPFAndRzmOWHKT+jSDzWpJv8krj6x1LMA=="
crossorigin="anonymous">WordPress
As of now, WordPress doesn’t have a native ability to add SRI . There’s an official WordPress Trac ticket regarding its possible implementation. For now, WordPress users should check out the Subresource Integrity (SRI) Manager plugin for compliance.
Looking for an in-depth security solution? Check out the Sucuri web application firewall (WAF), or ask about our security features on VPS Hosting.
