fix(bundle): content-address bundled script filenames for stable SRI (#725)

Author: harlan-zw

packages/script/src/plugins/transform.ts

@@ -92,19 +92,25 @@ export interface AssetBundlerTransformerOptions {
 partytownScripts?: Set<string>
 }
 
+functionsafeFilename(h: string): string{
+// Prefix hashes starting with '-' — Nitro's publicAssets handler cannot serve
+// files whose names begin with a dash (they get omitted from the asset manifest).
+return`${h.startsWith('-') ? `_${h.slice(1)}` : h}.js`
+}
+
+functionbuildAssetUrl(filename: string,assetsBaseURL: string='/_scripts/assets'): string{
+constnuxt=tryUseNuxt()
+constcdnURL=nuxt?.options.runtimeConfig?.app?.cdnURL||nuxt?.options.app?.cdnURL||''
+constbaseURL=cdnURL||nuxt?.options.app.baseURL||''
+returnjoinURL(joinURL(baseURL,assetsBaseURL),filename)
+}
+
 functionnormalizeScriptData(src: string,assetsBaseURL: string='/_scripts/assets'): {url: string,filename?: string}{
 if(hasProtocol(src,{acceptRelative: true})){
 src=src.replace(PROTOCOL_RELATIVE_RE,'https://')
 consturl=parseURL(src)
-consth=ohash(url)
-// Prefix hashes starting with '-' — Nitro's publicAssets handler cannot serve
-// files whose names begin with a dash (they get omitted from the asset manifest).
-constfile=`${h.startsWith('-') ? `_${h.slice(1)}` : h}.js`
-constnuxt=tryUseNuxt()
-// Use cdnURL if available, otherwise fall back to baseURL
-constcdnURL=nuxt?.options.runtimeConfig?.app?.cdnURL||nuxt?.options.app?.cdnURL||''
-constbaseURL=cdnURL||nuxt?.options.app.baseURL||''
-return{url: joinURL(joinURL(baseURL,assetsBaseURL),file),filename: file}
+constfile=safeFilename(ohash(url))
+return{url: buildAssetUrl(file,assetsBaseURL),filename: file}
 }
 return{url: src}
 }
@@ -118,37 +124,30 @@ async function downloadScript(opts: {
 integrity?: boolean|IntegrityAlgorithm
 skipApiRewrites?: boolean
 neutralizeCanvas?: boolean
-},renderedScript: NonNullable<AssetBundlerTransformerOptions['renderedScript']>,fetchOptions?: FetchOptions,cacheMaxAge?: number){
-const{ src, url, filename, forceDownload, integrity, proxyRewrites, sdkPatches, skipApiRewrites, neutralizeCanvas }=opts
+assetsBaseURL?: string
+},renderedScript: NonNullable<AssetBundlerTransformerOptions['renderedScript']>,fetchOptions?: FetchOptions,cacheMaxAge?: number): Promise<{url: string,filename?: string}|undefined>{
+const{ src, url, filename, forceDownload, integrity, proxyRewrites, sdkPatches, skipApiRewrites, neutralizeCanvas, assetsBaseURL }=opts
 if(src===url||!filename){
 return
 }
 conststorage=bundleStorage()
-constscriptContent=renderedScript.get(src)
-letres: Buffer|undefined=scriptContentinstanceofError ? undefined : scriptContent?.content
-if(!res){
-// Use storage to cache the font data between builds
-// Include proxy in cache key to differentiate proxied vs non-proxied versions
-// Also include a hash of proxyRewrites content to handle different proxyPrefix values
-constproxyRewritesHash=proxyRewrites?.length ? `-${ohash(proxyRewrites)}` : ''
-constcacheKey=proxyRewrites?.length ? `bundle-proxy:${filename.replace('.js',`${proxyRewritesHash}.js`)}` : `bundle:${filename}`
-constshouldUseCache=!forceDownload&&awaitstorage.hasItem(cacheKey)&&!(awaitisCacheExpired(storage,filename,cacheMaxAge))
-
-if(shouldUseCache){
-constcachedContent=awaitstorage.getItemRaw<Buffer>(cacheKey)
-constmeta=awaitstorage.getItem(`bundle-meta:${filename}`)as{integrity?: string}|null
-renderedScript.set(url,{
-content: cachedContent!,
-size: cachedContent!.length/1024,
-encoding: 'utf-8',
- src,
- filename,
-integrity: meta?.integrity,
-})
-return
-}
-letencoding
-letsize=0
+letres: Buffer|undefined
+letencoding: string|null|undefined
+letsize=0
+letfetched=false
+
+// Use storage to cache the font data between builds
+// Include proxy in cache key to differentiate proxied vs non-proxied versions
+// Also include a hash of proxyRewrites content to handle different proxyPrefix values
+constproxyRewritesHash=proxyRewrites?.length ? `-${ohash(proxyRewrites)}` : ''
+constcacheKey=proxyRewrites?.length ? `bundle-proxy:${filename.replace('.js',`${proxyRewritesHash}.js`)}` : `bundle:${filename}`
+constshouldUseCache=!forceDownload&&awaitstorage.hasItem(cacheKey)&&!(awaitisCacheExpired(storage,filename,cacheMaxAge))
+
+if(shouldUseCache){
+res=awaitstorage.getItemRaw<Buffer>(cacheKey)asBuffer
+encoding='utf-8'
+}
+else{
 res=await$fetch.raw(src,{ ...fetchOptions,responseType: 'arrayBuffer'}).then(async(r)=>{
 if(!r.ok){
 thrownewError(`Failed to fetch ${src} (HTTP ${r.status})`)
@@ -158,40 +157,54 @@ async function downloadScript(opts: {
 size=contentLength ? Number(contentLength)/1024 : 0
 returnBuffer.from(r._data||awaitr.arrayBuffer())
 })
+fetched=true
 
 awaitstorage.setItemRaw(`bundle:${filename}`,res)
 // Apply URL rewrites for proxy mode (AST-based at build time)
 if(proxyRewrites?.length&&res){
 constcontent=res.toString('utf-8')
-constrewritten=rewriteScriptUrlsAST(content,filename||'script.js',proxyRewrites,sdkPatches,{ skipApiRewrites, neutralizeCanvas })
+constrewritten=rewriteScriptUrlsAST(content,filename,proxyRewrites,sdkPatches,{ skipApiRewrites, neutralizeCanvas })
 res=Buffer.from(rewritten,'utf-8')
 logger.debug(`Rewrote ${proxyRewrites.length} URL patterns in ${filename}`)
 }
 
-// Calculate integrity hash after rewrites so the hash matches the served content
-constintegrityHash=integrity&&res
- ? calculateIntegrity(res,integrity===true ? 'sha384' : integrity)
- : undefined
-
 awaitstorage.setItemRaw(cacheKey,res)
-// Save metadata with timestamp for cache expiration
 awaitstorage.setItem(`bundle-meta:${filename}`,{
 timestamp: Date.now(),
  src,
  filename,
-integrity: integrityHash,
-})
-size=size||res!.length/1024
-logger.info(`Downloading script ${colors.gray(`${src} → ${filename} (${size.toFixed(2)} kB ${encoding})${integrityHash ? ` [${integrityHash.slice(0,15)}...]` : ''}`)}`)
-renderedScript.set(url,{
-content: res!,
- size,
- encoding,
- src,
- filename,
-integrity: integrityHash,
 })
 }
+
+if(!res){
+return
+}
+
+// Content-address the public filename so when the upstream script or proxy
+// rewrites change between deployments, the URL changes too. Without this,
+// long-cached JS at an unchanged URL ends up served against a new integrity
+// hash in fresh HTML, breaking SRI on the second deploy.
+constcontentHash=createHash('sha256').update(res).digest('hex').slice(0,16)
+constpublicFilename=safeFilename(contentHash)
+constpublicUrl=buildAssetUrl(publicFilename,assetsBaseURL)
+
+constintegrityHash=integrity
+ ? calculateIntegrity(res,integrity===true ? 'sha384' : integrity)
+ : undefined
+
+size=size||res.length/1024
+if(fetched){
+logger.info(`Downloading script ${colors.gray(`${src} → ${publicFilename} (${size.toFixed(2)} kB ${encoding})${integrityHash ? ` [${integrityHash.slice(0,15)}...]` : ''}`)}`)
+}
+renderedScript.set(publicUrl,{
+content: res,
+ size,
+encoding: encoding||undefined,
+ src,
+filename: publicFilename,
+integrity: integrityHash,
+})
+return{url: publicUrl,filename: publicFilename}
 }
 
 exportfunctionNuxtScriptBundleTransformer(options: AssetBundlerTransformerOptions={
@@ -465,7 +478,10 @@ export function NuxtScriptBundleTransformer(options: AssetBundlerTransformerOpti
 deferredOps.push(async()=>{
 leturl=_url
 try{
-awaitdownloadScript({src: srcasstring, url, filename, forceDownload, proxyRewrites, sdkPatches,integrity: options.integrity, skipApiRewrites, neutralizeCanvas },renderedScript,options.fetchOptions,options.cacheMaxAge)
+constresult=awaitdownloadScript({src: srcasstring, url, filename, forceDownload, proxyRewrites, sdkPatches,integrity: options.integrity, skipApiRewrites, neutralizeCanvas,assetsBaseURL: options.assetsBaseURL},renderedScript,options.fetchOptions,options.cacheMaxAge)
+if(result){
+url=result.url
+}
 }
 catch(e: any){
 if(options.fallbackOnSrcOnBundleFail){

test/e2e/base.test.ts

@@ -20,6 +20,6 @@ describe('base', async () => {
 awaitpage.waitForTimeout(500)
 // get content of #script-src
 consttext=awaitpage.$eval('#script-src',el=>el.textContent)
-expect(text).toMatchInlineSnapshot(`"/foo/_scripts/assets/6bEy8slcRmYcRT4E2QbQZ1CMyWw9PpHA7L87BtvSs2U.js"`)
+expect(text).toMatchInlineSnapshot(`"/foo/_scripts/assets/ff1523fb7389539c.js"`)
 })
 })

test/e2e/basic.test.ts

@@ -178,7 +178,7 @@ describe('basic', () => {
 awaitpage.waitForTimeout(500)
 // get content of #script-src
 consttext=awaitpage.$eval('#script-src',el=>el.textContent)
-expect(text).toMatchInlineSnapshot(`"/_scripts/assets/6bEy8slcRmYcRT4E2QbQZ1CMyWw9PpHA7L87BtvSs2U.js"`)
+expect(text).toMatchInlineSnapshot(`"/_scripts/assets/ff1523fb7389539c.js"`)
 })
 it('partytown adds type attribute',async()=>{
 const{ page }=awaitcreatePage('/partytown')

test/unit/bundle-two-deploy-repro.test.ts

@@ -0,0 +1,116 @@
+// Mechanical reproduction of nuxt/scripts#724:
+// Same source URL, different content between deployments must yield different public URLs,
+// otherwise a long-cached asset serves stale bytes against a fresh SRI hash.
+importtype{AssetBundlerTransformerOptions}from'../../packages/script/src/plugins/transform'
+import{createHash}from'node:crypto'
+import{hash}from'ohash'
+import{hasProtocol}from'ufo'
+import{describe,expect,it,vi}from'vitest'
+import{NuxtScriptBundleTransformer}from'../../packages/script/src/plugins/transform'
+
+vi.mock('ohash',async(og)=>{
+constmod=awaitog<typeofimport('ohash')>()
+return{ ...mod,hash: vi.fn(mod.hash)}
+})
+vi.mock('ufo',async(og)=>{
+constmod=awaitog<typeofimport('ufo')>()
+return{ ...mod,hasProtocol: vi.fn(mod.hasProtocol)}
+})
+
+constmockBundleStorage: any={
+getItem: vi.fn(),
+setItem: vi.fn(),
+getItemRaw: vi.fn(),
+setItemRaw: vi.fn(),
+hasItem: vi.fn(),
+}
+vi.mock('../../packages/script/src/assets',()=>({
+bundleStorage: vi.fn(()=>mockBundleStorage),
+}))
+
+constfetchMock=vi.fn()
+vi.stubGlobal('fetch',fetchMock)
+
+vi.mock('@nuxt/kit',async(og)=>{
+constmod=awaitog<typeofimport('@nuxt/kit')>()
+constnuxt={
+options: {buildDir: '.nuxt',app: {baseURL: '/'},runtimeConfig: {app: {}}},
+hooks: {hook: vi.fn()},
+}
+return{ ...mod,useNuxt: ()=>nuxt,tryUseNuxt: ()=>nuxt}
+})
+
+vi.mocked(hasProtocol).mockImplementation(()=>true)
+// Source URL hash is stable across both "deploys" — the URL doesn't change between deployments,
+// only the upstream bytes do. This is exactly the real-world scenario in #724.
+vi.mocked(hash).mockImplementation(()=>'adsbygoogle')
+
+asyncfunctionrunTransform(code: string,options?: AssetBundlerTransformerOptions){
+mockBundleStorage.hasItem.mockResolvedValue(false)
+constplugin=NuxtScriptBundleTransformer({renderedScript: newMap(), ...options}).vite()asany
+constout=awaitplugin.transform.handler.call({},code,'file.js')
+returnout?.codeasstring
+}
+
+functionmockUpstreamBody(bytes: Buffer){
+fetchMock.mockResolvedValueOnce({
+ok: true,
+arrayBuffer: ()=>Promise.resolve(bytes),
+headers: {get: ()=>null},
+_data: bytes,
+}asany)
+}
+
+functionextractPublicUrl(code: string): string{
+constmatch=code.match(/\/_scripts\/assets\/[^'"]+\.js/)
+if(!match)
+thrownewError(`no public asset URL in: ${code}`)
+returnmatch[0]
+}
+
+describe('two-deploy bundle repro (#724)',()=>{
+constsrc=`const instance = useScript('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', { bundle: true })`
+
+it('same source URL + changed upstream content -> different public filenames',async()=>{
+// Deploy 1: upstream returns content A
+mockUpstreamBody(Buffer.from('/* adsbygoogle v1 */ (function(){ /* ... */ })()'))
+constdeploy1=awaitrunTransform(src)
+
+// Deploy 2: upstream returns content B (Google pushed a JS update)
+mockUpstreamBody(Buffer.from('/* adsbygoogle v2 NEW */ (function(){ /* ... */ })()'))
+constdeploy2=awaitrunTransform(src)
+
+consturl1=extractPublicUrl(deploy1)
+consturl2=extractPublicUrl(deploy2)
+
+// With the bug present, these would be identical (URL-hash-only filename),
+// so a long-cached v1 asset would be served against a v2 integrity hash.
+expect(url1).not.toBe(url2)
+expect(url1).toMatch(/[a-f0-9]{16}\.js$/)
+expect(url2).toMatch(/[a-f0-9]{16}\.js$/)
+})
+
+it('same source URL + same content -> identical public filenames (caching preserved)',async()=>{
+constbody=Buffer.from('/* adsbygoogle v1 */ (function(){ /* ... */ })()')
+mockUpstreamBody(body)
+constdeploy1=awaitrunTransform(src)
+mockUpstreamBody(body)
+constdeploy2=awaitrunTransform(src)
+
+expect(extractPublicUrl(deploy1)).toBe(extractPublicUrl(deploy2))
+})
+
+it('integrity hash matches the final served bytes',async()=>{
+constbody=Buffer.from('/* adsbygoogle v1 */')
+mockUpstreamBody(body)
+constcode=awaitrunTransform(src,{integrity: true})
+consturl=extractPublicUrl(code)
+constintegrityMatch=code.match(/integrity:'(sha384-[^']+)'/)
+
+constexpectedIntegrity=`sha384-${createHash('sha384').update(body).digest('base64')}`
+expect(url).toMatch(/[a-f0-9]{16}\.js$/)
+expect(integrityMatch?.[1]).toBe(expectedIntegrity)
+// Filename and integrity both derive from the same post-rewrite bytes,
+// so they cannot drift apart across deployments.
+})
+})