SGOL Post

Subresource Integrity (SRI) is a security feature that helps protect web applications from certain types of attacks, such as third-party or CDN compromise. It involves adding a cryptographic hash to the resource's integrity attribute, ensuring that the resource being loaded matches the expected one.

Here's a step-by-step guide to implementing Subresource Integrity in your HTML:

1. Calculate the Hash:

Use an online tool or command-line tools to generate the hash for your resource. Common tools include openssl for local files or online services like SRI Hash Generator.

2. Add the Hash to Your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Page</title>
  
  <!-- Example: Adding SRI for a Script -->
  <script src="https://example.com/your-script.js" integrity="your-calculated-hash" crossorigin="anonymous"></script>
  
  <!-- Example: Adding SRI for a Stylesheet -->
  <link rel="stylesheet" href="https://example.com/your-styles.css" integrity="your-calculated-hash" crossorigin="anonymous">
</head>
<body>
  <!-- Your HTML Content Goes Here -->
</body>
</html>

3. Crossorigin Attribute:

Ensure that the crossorigin attribute is set to "anonymous" to request the resource without sending credentials.

Key Takeaways:

Integrity Attribute: The integrity attribute holds the cryptographic hash of the resource. It follows the format: integrity="your-algorithm-hash".
Crossorigin Attribute: Adding crossorigin="anonymous" ensures that the browser fetches the resource without sending any credentials.
Verification: Periodically verify the integrity of your resources, especially if they are hosted externally. If a resource changes, you need to update the hash.

Example:

Let's say you have a script hosted on a CDN, and you want to add Subresource Integrity. Assume the hash is "sha256-abc123..." for this example:

<script src="https://cdn.example.com/your-script.js" integrity="sha256-abc123..." crossorigin="anonymous"></script>

Replace "sha256-abc123..." with the actual hash calculated for your resource.

Remember to calculate and update the hash whenever the resource changes.

By following these steps, you enhance the security of your web application by ensuring that only authorized and unaltered resources are loaded.