What is Subresource Integrity (SRI)?
Subresource Integrity (SRI) is a security feature that helps protect your website by ensuring that resources loaded from external sources, like scripts or stylesheets, have not been altered. By including a cryptographic hash in your HTML, the browser can check that the resource’s content matches the expected hash value, blocking it if any tampering is detected.
Why Use SRI?
- Prevent Malicious Changes: If a third-party server is compromised, attackers could modify scripts or stylesheets in harmful ways. SRI ensures that only the expected, untampered version of the resource is loaded.
- Enhance User Trust: By safeguarding your site from malicious content injections, you provide users with a more secure and reliable experience.
- Mitigate Supply Chain Attacks: Protect your website from supply chain vulnerabilities by enforcing content integrity checks.
How to Generate Integrity Hashes
To generate SRI hashes, simply paste the URL of your resource into the tool on this site. Alternatively, for command-line users, you can use:
openssl dgst -sha384 -binary FILE.js | openssl base64 -A Implementing SRI in Your HTML
To use SRI, add the generated hash as an integrity attribute in your <script> or <link> tag. For example:
<script src="https://example.com/library.js" integrity="sha384-abc123..." crossorigin="anonymous"></script> Handling Cross-Origin Requests
When loading a resource from a different origin, it’s crucial to include the crossorigin attribute in your HTML element. Without this attribute, the browser may choose a "fail-open" behavior. In this case, if the Subresource Integrity (SRI) check cannot be completed, the browser will still load the resource as if the integrity attribute wasn’t set, undermining the protection SRI provides.
To enforce the integrity check and maintain security, use crossorigin="anonymous" in your <script> or <link> tags. This ensures that no user credentials, such as cookies or HTTP authentication data, are sent to the cross-origin server. However, the request will still include an Origin HTTP header. If the server doesn’t permit the resource to be accessed—by not setting an Access-Control-Allow-Origin header—the browser will block the resource from being used, preserving the intended security benefits.
Tips for Effective Use of SRI
- Use Strong Hashes: Always use SHA-384 or SHA-512 for better security, as weaker hashes like SHA-256 are not recommended.
- Update Hashes When Resources Change: Anytime you update a script or stylesheet, you’ll need to regenerate the hash to reflect the new content.
- Monitor Resource Updates: If you rely on third-party resources that update frequently, consider automated tools to manage SRI hashes, ensuring your site remains secure and up to date.