Subresource Integrity (SRI) Implementation

Introduction

Welcome to the very first lesson of the "Web Resource Integrity and Secure Configuration in Express" course! 🎉 In this lesson, we will explore Subresource Integrity (SRI), a crucial web security feature that helps protect your applications from malicious code injections. By the end of this lesson, you'll understand how SRI works and how to implement it to ensure the integrity of your web resources.

Understanding Subresource Integrity (SRI)

Let's get back to the data integrity concept. In previous courses, we explored: File integrity verification : Using checksums and hashes to verify that files haven't been tampered with during storage or transfer Request parameter validation : Ensuring that user inputs match expected formats and aren't manipulated Data integrity in databases : Implementing constraints and validation to maintain accurate data What we've learned in those courses establishes the foundation for understanding integrity: data should remain unchanged and verifiable throughout its lifecycle. However, those courses primarily focused on server-side integrity mechanisms. What we didn't cover was how to extend these integrity principles to the client side, particularly for web resources loaded by browsers. This is where Subresource Integrity (SRI) comes in. Subresource Integrity (SRI) is a security feature that allows web browsers to verify that resources like scripts and stylesheets have not been tampered with. It does this by using cryptographic hashes. When a resource is loaded, the browser checks its hash against the expected hash. If they match, the resource is considered safe; if not, the browser blocks it. This mechanism is particularly useful when loading resources from third-party sources, as it ensures that the content has not been altered by an attacker. By implementing SRI, you can enhance the security of your web applications and protect users from potential threats.

The Vulnerable Code

Let's examine a scenario in which a web application is vulnerable due to the absence of SRI. Imagine a situation where your website loads a script from a third-party server without verifying its integrity. This lack of verification can lead to security risks. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vulnerable Example</title> <link rel="stylesheet" href="/css/styles.css"> </head> <body> <h1>Hello, World!</h1> <script src="https://cdn.example.com/framework.js"></script> </body> </html> In this code, the script is loaded without any integrity checks. If the third-party server is compromised, an attacker could modify the script, and your website would unknowingly execute the malicious code.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Shell

# Simulating an attack by modifying a script on a third-party server
echo "alert('Malicious code executed!');" >> /path/to/third-party/script.js

# Simulating an attack by modifying a script on a third-party server
echo "alert('Malicious code executed!');" >> /path/to/third-party/script.js

TypeScript

import crypto from 'crypto';
import fs from 'fs';

// Generate SRI hash for a resource
function generateSRIHash(filePath: string): string {
  const fileContent = fs.readFileSync(filePath);
  const hash = crypto.createHash('sha384').update(fileContent).digest('base64');
  return `sha384-${hash}`;
}

import crypto from 'crypto';
import fs from 'fs';

// Generate SRI hash for a resource
function generateSRIHash(filePath: string): string {
  const fileContent = fs.readFileSync(filePath);
  const hash = crypto.createHash('sha384').update(fileContent).digest('base64');
  return `sha384-${hash}`;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SRI Example</title>
  <link rel="stylesheet" href="/css/styles.css" integrity="sha384-abc123" crossorigin="anonymous">
</head>
<body>
  <h1>Hello, SRI!</h1>
  <script src="/js/main.js" integrity="sha384-def456" crossorigin="anonymous"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SRI Example</title>
  <link rel="stylesheet" href="/css/styles.css" integrity="sha384-abc123" crossorigin="anonymous">
</head>
<body>
  <h1>Hello, SRI!</h1>
  <script src="/js/main.js" integrity="sha384-def456" crossorigin="anonymous"></script>
</body>
</html>

HTML

<!-- Vulnerable to SRI injection if integrity value is user-controlled -->
<script src="https://cdn.example.com/framework.js" integrity="sha384-<user-supplied-hash>" crossorigin="anonymous"></script>

<!-- Vulnerable to SRI injection if integrity value is user-controlled -->
<script src="https://cdn.example.com/framework.js" integrity="sha384-<user-supplied-hash>" crossorigin="anonymous"></script>

Shell

# Simulating an attack by modifying a script on a third-party server
echo "alert('Malicious code executed!');" >> /path/to/third-party/script.js

TypeScript

import crypto from 'crypto';
import fs from 'fs';

// Generate SRI hash for a resource
function generateSRIHash(filePath: string): string {
  const fileContent = fs.readFileSync(filePath);
  const hash = crypto.createHash('sha384').update(fileContent).digest('base64');
  return `sha384-${hash}`;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SRI Example</title>
  <link rel="stylesheet" href="/css/styles.css" integrity="sha384-abc123" crossorigin="anonymous">
</head>
<body>
  <h1>Hello, SRI!</h1>
  <script src="/js/main.js" integrity="sha384-def456" crossorigin="anonymous"></script>
</body>
</html>

HTML

<!-- Vulnerable to SRI injection if integrity value is user-controlled -->
<script src="https://cdn.example.com/framework.js" integrity="sha384-<user-supplied-hash>" crossorigin="anonymous"></script>

Introduction

Understanding Subresource Integrity (SRI)

The Vulnerable Code

Join the 1M+ learners on CodeSignal

Exploiting the Vulnerability

Generating SRI Hashes

Adding SRI to HTML

SRI Injection Attacks

Real-World Scenarios and Benefits of SRI

Conclusion and Next Steps