Subresource Integrity: Protecting Your Site from CDN Compromise
As web developers and agencies, we rely heavily on Content Delivery Networks (CDNs) to serve assets like JavaScript and CSS efficiently. It's a standard practice, offering performance benefits and often simplifying our build processes. However, this reliance introduces a significant vulnerability: if a CDN is compromised, every script or stylesheet it serves becomes a potential vector for malicious activity. This could mean anything from defacing your site to stealing user data.
Subresource Integrity (SRI) is a security feature that allows browsers to verify that a script or stylesheet hasn't been tampered with since the developer specified its integrity. It works by associating a cryptographic hash with each resource. When the browser loads a resource, it calculates the hash of the downloaded content and compares it to the hash provided. If they don't match, the browser refuses to execute the resource.
To implement SRI, you need to add two attributes to your <script> or <link> tags: integrity and crossorigin. The crossorigin attribute is necessary to ensure that the integrity check is performed correctly, even when the resource is loaded from a different origin (which is typical for CDNs).
Here's how a typical script tag with SRI looks:
<script src="https://cdn.example.com/script.js" integrity="sha256-AbCdEfGhIjKlMnOpQrStUvWxYz1234567890ABCDEF" crossorigin="anonymous"></script>
The integrity attribute contains one or more hashes, separated by spaces. The format is typically algorithm-hash. Common algorithms include sha256, sha384, and sha512.
Generating SRI Hashes
You can generate these hashes using several tools. For command-line users, OpenSSL is a common choice. Assuming you have a file named script.js, you can generate a SHA256 hash with this command:
openssl dgst -sha256 script.js | awk '{print $2}'
This command outputs the hexadecimal hash. You then prepend sha256- to it for the integrity attribute.
Alternatively, online tools simplify the process. Websites like srihash.org allow you to paste your JavaScript or CSS file's content, or upload the file, and it will generate the correct integrity attribute value. This is particularly useful for quick checks or when dealing with dynamic content.
Understanding Exceptions: Google Fonts CSS
It's worth noting that Google Fonts CSS is a common exception to the SRI rule. Google officially states that its CSS files are exempt from SRI. This is because the CSS itself references font files, which are served from different domains. Implementing SRI on the CSS would require hashing all the referenced font files, a complex and often impractical task for regular updates. For most other CDN-hosted scripts and stylesheets, however, SRI is a crucial security measure.
Real-World Incidents
The importance of SRI becomes clear when you look at past incidents. A notable example is the compromise of the polyfill.io supply chain. In 2020, malicious code was injected into their JavaScript bundles, affecting thousands of websites that relied on their service. Attackers modified the scripts to perform cryptojacking and redirect users to phishing sites. If those websites had implemented SRI on their polyfill.io script tags, their browsers would have detected the altered code and refused to load it, preventing the compromise from affecting their users.
Implementing SRI is a small effort that provides a significant layer of security. It's a vital step for any WordPress agency or developer looking to protect their clients' sites from the growing threat of supply chain attacks via CDNs. When you include a third-party script or stylesheet from a CDN, take the few extra moments to generate and apply its SRI hash.
SiteVett checks this automatically as part of a free website QA scan with 60+ checks across security, SEO, content, performance, and more.
Top comments (0)