Update checksum algorithm to SHA1 (#52102)

Update some of the hash we're using in the framework to use `sha1` instead. It's usually up to 20% faster than `sha256` and slightly faster than `md5`. All these places are only using the algorithm to generate a checksum, so there's no security concern to switch the algorithm.

- packages/next/src/build/index.ts: using the hash as the key to track the traced files
- packages/next/src/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.ts: CSS modules class name generation
- packages/next/src/build/webpack/loaders/next-flight-css-loader.ts: checksum for server imported CSS's file content
- packages/next/src/build/webpack/loaders/next-font-loader/index.ts: font asset hash
- packages/next/src/cli/next-dev.ts: instrumentation file hash
- packages/next/src/server/dev/hot-reloader.ts: module hash for HMR

packages/next/src/build/index.ts

@@ -1915,7 +1915,7 @@ export default async function build(
             ) {
               const cacheHash = (
                 require('crypto') as typeof import('crypto')
-              ).createHash('sha256')
+              ).createHash('sha1')
 
               cacheHash.update(require('next/package').version)
               cacheHash.update(hasSsrAmpPages + '')

packages/next/src/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.ts

@@ -23,7 +23,7 @@ export function getCssModuleLocalIdent(
   // Generate a hash to make the class name unique.
   const hash = loaderUtils.getHashDigest(
     Buffer.from(`filePath:${relativePath}#className:${exportName}`),
-    'md5',
+    'sha1',
     'base64',
     5
   )

packages/next/src/build/webpack/loaders/next-flight-css-loader.ts

@@ -31,7 +31,7 @@ const NextServerCSSLoader: webpack.LoaderDefinitionFunction<NextServerCSSLoaderO
           this.resourcePath.match(/\.module\.(css|sass|scss)$/) !== null
       }
       const checksum = crypto
-        .createHash('sha256')
+        .createHash('sha1')
         .update(typeof content === 'string' ? Buffer.from(content) : content)
         .digest()
         .toString('hex')

packages/next/src/build/webpack/loaders/next-font-loader/index.ts

@@ -123,7 +123,7 @@ export default async function nextFontLoader(this: any) {
       // Generate a hash from the CSS content. Used to generate classnames and font families
       const fontFamilyHash = loaderUtils.getHashDigest(
         Buffer.from(css),
-        'md5',
+        'sha1',
         'hex',
         6
       )

packages/next/src/cli/next-dev.ts

@@ -472,7 +472,7 @@ const nextDev: CliCommand = async (argv) => {
             const instrumentationFileHash = (
               require('crypto') as typeof import('crypto')
             )
-              .createHash('sha256')
+              .createHash('sha1')
               .update(await fs.promises.readFile(instrumentationFile, 'utf8'))
               .digest('hex')
 

packages/next/src/server/dev/hot-reloader.ts

@@ -1038,7 +1038,7 @@ export default class HotReloader {
                       // every time for both server and client so we calculate
                       // the hash without the source map for the page module
                       const hash = require('crypto')
-                        .createHash('sha256')
+                        .createHash('sha1')
                         .update(mod.originalSource().buffer())
                         .digest()
                         .toString('hex')

test/integration/css-features/test/css-modules.test.js

@@ -69,7 +69,7 @@ describe('CSS Modules: Import Global CSS', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"a .styles_foo__Io_Us{all:initial}"`
+      `"a .styles_foo__G5630{all:initial}"`
     )
   })
 })
@@ -119,7 +119,7 @@ describe('CSS Modules: Import Exports', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".styles_blk__CqbFg{color:#000}"`
+      `".styles_blk__480DC{color:#000}"`
     )
   })
 })

test/integration/css-modules/test/index.test.js

@@ -52,7 +52,7 @@ describe('Basic CSS Module Support', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_redText__KCBQp{color:red}"`
+      `".index_redText__honUV{color:red}"`
     )
   })
 
@@ -69,7 +69,7 @@ describe('Basic CSS Module Support', () => {
     expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
 
     expect($('#verify-red').attr('class')).toMatchInlineSnapshot(
-      `"index_redText__KCBQp"`
+      `"index_redText__honUV"`
     )
   })
 })
@@ -108,7 +108,7 @@ describe('3rd Party CSS Module Support', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_foo__2K5pY{position:relative}.index_foo__2K5pY .bar,.index_foo__2K5pY .baz{height:100%;overflow:hidden}.index_foo__2K5pY .lol,.index_foo__2K5pY>.lel{width:80%}"`
+      `".index_foo__6TgnK{position:relative}.index_foo__6TgnK .bar,.index_foo__6TgnK .baz{height:100%;overflow:hidden}.index_foo__6TgnK .lol,.index_foo__6TgnK>.lel{width:80%}"`
     )
   })
 
@@ -125,7 +125,7 @@ describe('3rd Party CSS Module Support', () => {
     expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
 
     expect($('#verify-div').attr('class')).toMatchInlineSnapshot(
-      `"index_foo__2K5pY"`
+      `"index_foo__6TgnK"`
     )
   })
 })
@@ -310,7 +310,7 @@ describe('Valid CSS Module Usage from within node_modules', () => {
 
     const cssPreload = $('#nm-div')
     expect(cssPreload.text()).toMatchInlineSnapshot(
-      `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__lIU4W\\"}"`
+      `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__0ctGB\\"}"`
     )
   })
 
@@ -324,7 +324,7 @@ describe('Valid CSS Module Usage from within node_modules', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".example_redText__lIU4W{color:red}"`
+      `".example_redText__0ctGB{color:red}"`
     )
   })
 })
@@ -363,7 +363,7 @@ describe('Valid Nested CSS Module Usage from within node_modules', () => {
 
     const cssPreload = $('#nm-div')
     expect(cssPreload.text()).toMatchInlineSnapshot(
-      `"{\\"message\\":\\"Why hello there\\"} {\\"subClass\\":\\"example_subClass__ak_R4 other_className__hfPre\\"}"`
+      `"{\\"message\\":\\"Why hello there\\"} {\\"subClass\\":\\"example_subClass__m6Tyy other_className__OA8dV\\"}"`
     )
   })
 
@@ -377,7 +377,7 @@ describe('Valid Nested CSS Module Usage from within node_modules', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".other2_other2__n0niK{color:red}.other3_other3__5PqwU{color:violet}.other_className__hfPre{background:red;color:#ff0}.example_subClass__ak_R4{background:blue}"`
+      `".other2_other2__dYPgz{color:red}.other3_other3__7hgUE{color:violet}.other_className__OA8dV{background:red;color:#ff0}.example_subClass__m6Tyy{background:blue}"`
     )
   })
 })
@@ -410,7 +410,7 @@ describe('CSS Module Composes Usage (Basic)', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_className___fnCf{background:red;color:#ff0}.index_subClass__3ZQHz{background:blue}"`
+      `".index_className__jjcZ1{background:red;color:#ff0}.index_subClass__eDzaW{background:blue}"`
     )
   })
 })
@@ -443,7 +443,7 @@ describe('CSS Module Composes Usage (External)', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".other_className__3Kqmr{background:red;color:#ff0}.index_subClass__3ZQHz{background:blue}"`
+      `".other_className__eZV4M{background:red;color:#ff0}.index_subClass__eDzaW{background:blue}"`
     )
   })
 })
@@ -491,7 +491,7 @@ describe('Dynamic Route CSS Module Usage', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"._post__home__BTqh4{background:red}"`
+      `"._post__home__yRmHz{background:red}"`
     )
   })
 })
@@ -541,7 +541,7 @@ describe('Catch-all Route CSS Module Usage', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".___post__home__G40mx{background:red}.__55css_home__OvQYk{color:green}"`
+      `".___post__home__e4zfx{background:red}.__55css_home__r8Rnq{color:green}"`
     )
   })
 })

test/integration/scss-modules/test/basic-scss.test.js

@@ -51,7 +51,7 @@ describe('Basic SCSS Module Support', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_redText__WduQk{color:red}"`
+      `".index_redText__zXafh{color:red}"`
     )
   })
 
@@ -68,7 +68,7 @@ describe('Basic SCSS Module Support', () => {
     expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
 
     expect($('#verify-red').attr('class')).toMatchInlineSnapshot(
-      `"index_redText__WduQk"`
+      `"index_redText__zXafh"`
     )
   })
 })
@@ -107,7 +107,7 @@ describe('3rd Party CSS Module Support', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_foo__gL0ty{position:relative}.index_foo__gL0ty .bar,.index_foo__gL0ty .baz{height:100%;overflow:hidden}.index_foo__gL0ty .lol,.index_foo__gL0ty>.lel{width:80%}"`
+      `".index_foo__72b4D{position:relative}.index_foo__72b4D .bar,.index_foo__72b4D .baz{height:100%;overflow:hidden}.index_foo__72b4D .lol,.index_foo__72b4D>.lel{width:80%}"`
     )
   })
 
@@ -124,7 +124,7 @@ describe('3rd Party CSS Module Support', () => {
     expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
 
     expect($('#verify-div').attr('class')).toMatchInlineSnapshot(
-      `"index_foo__gL0ty"`
+      `"index_foo__72b4D"`
     )
   })
 })
@@ -261,7 +261,7 @@ describe('CSS Module Composes Usage (Basic)', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_className__phGSl{background:red;color:#ff0}.index_subClass__fPp6w{background:blue}"`
+      `".index_className__OLWEh{background:red;color:#ff0}.index_subClass__Z_IFg{background:blue}"`
     )
   })
 })
@@ -294,7 +294,7 @@ describe('CSS Module Composes Usage (External)', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".other_className__e_JDW{background:red;color:#ff0}.index_subClass__fPp6w{background:blue}"`
+      `".other_className__A8aN2{background:red;color:#ff0}.index_subClass__Z_IFg{background:blue}"`
     )
   })
 })

test/integration/scss-modules/test/dynamic-route.test.js

@@ -40,7 +40,7 @@ describe('Dynamic Route CSS Module Usage', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"._post__home__a9vTy{background:red}"`
+      `"._post__home__ZI5mq{background:red}"`
     )
   })
 
@@ -98,7 +98,7 @@ describe('Catch-all Route CSS Module Usage', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".___post__home__w1yuY{background:red}"`
+      `".___post__home__bZNj1{background:red}"`
     )
   })
 })

test/integration/scss-modules/test/valid-invalid.test.js

@@ -89,7 +89,7 @@ describe('Valid CSS Module Usage from within node_modules', () => {
 
     const cssPreload = $('#nm-div')
     expect(cssPreload.text()).toMatchInlineSnapshot(
-      `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__8_1ap\\"}"`
+      `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__jsP_3\\"}"`
     )
   })
 
@@ -103,7 +103,7 @@ describe('Valid CSS Module Usage from within node_modules', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".example_redText__8_1ap{color:red}"`
+      `".example_redText__jsP_3{color:red}"`
     )
   })
 })
@@ -142,7 +142,7 @@ describe('Valid Nested CSS Module Usage from within node_modules', () => {
 
     const cssPreload = $('#nm-div')
     expect(cssPreload.text()).toMatchInlineSnapshot(
-      `"{\\"message\\":\\"Why hello there\\"} {\\"other2\\":\\"example_other2__pD1TP\\",\\"subClass\\":\\"example_subClass___Qywg other_className__jR2X2\\"}"`
+      `"{\\"message\\":\\"Why hello there\\"} {\\"other2\\":\\"example_other2__HNcoQ\\",\\"subClass\\":\\"example_subClass__SxkPt other_className___l2o_\\"}"`
     )
   })
 
@@ -156,7 +156,7 @@ describe('Valid Nested CSS Module Usage from within node_modules', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".other_other3__QRKUk{color:violet}.other_className__jR2X2{background:red;color:#ff0}.example_other2__pD1TP{color:red}.example_subClass___Qywg{background:blue}"`
+      `".other_other3__DvhyB{color:violet}.other_className___l2o_{background:red;color:#ff0}.example_other2__HNcoQ{color:red}.example_subClass__SxkPt{background:blue}"`
     )
   })
 })