Subresource Integrity (SRI) protects external resource integrity through hash verification and prevents tampering. 1. Usage scenario: When introducing third-party libraries such as jQuery and Bootstrap, prevent CDN from being hijacked or man-in-the-middle attacks; 2. Implementation method: Add the integrity attribute to the script or link tag, the value is the SHA-256/384/512 hash of the resource, and crossorigin="anonymous" is required; 3. Generation method: Use command line tools or online generators to generate hashes; 4. Notes: The hashes need to be updated synchronously when changing the resource content. CDN may cause inconsistent hashes due to compression. HTTPS cannot replace SRI. SRI is mainly used for third-party resources.

To use the integrity attribute of HTML to ensure the integrity of subresources, to put it bluntly, when the browser loads external resources (such as JS or CSS introduced from CDN), it verifys whether the file content has been tampered with. The core of this mechanism is hash verification to ensure that the resources you reference are exactly the same as those originally published.

Here are a few key points to help you figure out how to use it, why, and what you need to pay attention to.

What is Subresource Integrity (SRI)

Subresource Integrity (SRI) is a browser security mechanism used to prevent loaded external resources (such as scripts or style sheets hosted on third-party CDNs) from being maliciously modified. Its principle is very simple: you add an integrity attribute to the tag, which puts the cryptographic hash value of the resource content. After the browser downloads the resource, it will calculate the hash by itself. If it is inconsistent with what you provide, it means that the file may have been tampered with, so it refuses to execute.

Common scenarios such as introducing public libraries such as jQuery and Bootstrap, if you trust the official CDN but are worried about attacks by the man in the middle or the CDN being hijacked, then adding integrity can add an additional layer of protection.

How to generate integrity value

To use SRI, you must first generate the correct hash for your resource. The most commonly used algorithms are SHA-256, SHA-384 and SHA-512, and it is recommended to use at least SHA-256.

You can generate it through the command line tool:

 cat yourfile.js | openssl dgst -sha256 -binary | openssl base64 -A

You can also directly generate online tools, such as SRI Hash Generator . You can see the corresponding integrity string by uploading the file.

After generation, add this property to the <script> or <link> tag:

 <script src="https://example.com/your-script.js"
        integrity="sha256-Here is the hash value you generated"
        crossorigin="anonymous"></script>

Be sure to add the crossorigin attribute, otherwise some browsers will not do completeness checks.

Things to note in actual use

While integrity is useful, there are several points that are prone to errors or ignore:

• The resource cannot be changed : even if you change a character locally, the hash will not match. So once integrity is added, you cannot update the resource file without updating the hash at will.
• CDN Caching Issues : Some CDNs may compress or rewrite resources, resulting in inconsistent hashes. It is best to test it before deployment.
• HTTPS does not equal security : Even if HTTPS is used, it cannot guarantee that the CDN will not be compromised. SRI is an additional layer of security.
• Only applicable to external resources : If it is a resource on your own server, it is generally not necessary to add it unless you also do CDN distribution.

Which resources are suitable for adding integrity

Not all resources are suitable for adding this attribute, and the following situations are mainly applicable:

• Third-party JS/CSS libraries (such as jQuery, React, Bootstrap)
• Static resources hosted on public CDNs
• Common scripts shared by multiple sites

For scripts developed by yourself, especially those that change frequently, it is not recommended to add them, as they are too troublesome to maintain. But if the resources have been stably launched, you can also consider adding them.

Overall, integrity is a simple and effective security tool, especially when you rely on external resources, it is worth taking a few minutes to configure. Although not omnipotent, it can at least avoid potential risks in some cases.

The above is the detailed content of HTML `integrity` Attribute for Subresource Integrity. For more information, please follow other related articles on the PHP Chinese website!