A modern module integrity system for NextJS v15 applications with SHA-384 support, providing subresource integrity verification for JavaScript modules.
This library helps ensure that JavaScript modules loaded in your NextJS v15 application haven't been tampered with, improving security and reliability by verifying resource integrity via SHA-384 hashes.
Important: This version only supports SHA-384 integrity verification and is specifically designed for NextJS v15+.
- NextJS v15 Middleware: Easy integration with NextJS v15 projects via middleware pattern
- SHA-384 Support: Exclusive use of SHA-384 for maximum security
- Import Map Integration: Uses import maps to associate modules with their integrity hashes
- React Hooks: Provides React hooks for dynamic imports with integrity verification
- Build Validation: Tools to validate build output integrity
- TypeScript Support: Full TypeScript definitions and support
npm install esm_sri --save
# or
yarn add esm_sri
# or
pnpm add esm_sri// next.config.js
const { createModuleIntegrityMiddleware } = require('esm_sri/src/nextjs-module-integrity-plugin');
/** @type {import('next').NextConfig} */
const nextConfig = {
// Your existing Next.js configuration
};
// Create and apply module integrity middleware
const moduleIntegrityMiddleware = createModuleIntegrityMiddleware({
packages: ['react', 'react-dom'], // Packages to generate integrity hashes for
});
module.exports = moduleIntegrityMiddleware(nextConfig);// app/layout.tsx or _app.tsx
import {
loadImportMap,
IntegrityErrorBoundary
} from 'esm_sri/src/module-integrity-client';
import { useEffect } from 'react';
export default function RootLayout({ children }) {
useEffect(() => {
// Load the import map generated during build
loadImportMap('/importmap.json').catch(console.error);
}, []);
return (
<html lang="en">
<body>
<IntegrityErrorBoundary fallback={(error) => (
<div>Module integrity error: {error.message}</div>
)}>
{children}
</IntegrityErrorBoundary>
</body>
</html>
);
}// components/DynamicComponent.tsx
'use client';
import { useModuleWithIntegrity } from 'esm_sri/src/module-integrity-client';
export default function DynamicComponent() {
const { module, loading, error } = useModuleWithIntegrity('module-name');
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
const Component = module.default;
return <Component />;
}This library uses the import map specification to associate module URLs with their integrity hashes:
{
"imports": {
"square": "./module/shapes/square.js"
},
"integrity": {
"./module/shapes/square.js": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
}
}During the build process, the NextJS plugin:
- Identifies modules to be included in the import map
- Calculates SHA-384 integrity hashes for each module
- Generates an import map with integrity information
- Optionally updates security headers in Vercel configuration
At runtime, the client-side library:
- Loads the import map
- Verifies module integrity before execution
- Prevents execution of compromised modules
To validate your build output integrity during deployment:
// scripts/validate-build.js
const { validateNextJSBuildIntegrity } = require('esm_sri/src/module-integrity-validator');
validateNextJSBuildIntegrity({ distDir: '.next' })
.then(results => {
if (!results.success) {
process.exit(1);
}
console.log('Build validated successfully!');
})
.catch(error => {
console.error('Validation failed:', error);
process.exit(1);
});If you're using TypeScript, you can import from the TypeScript implementation:
import {
useModuleWithIntegrity,
calculateIntegrity,
ImportMap,
NextJSIntegrityConfig
} from 'esm_sri/src/module-integrity-ts';ISC