Enable contenthash in filename for dynamic assets (#20813)

This should solve the main problem of dynamic assets getting stale after
a version upgrade. Everything not affected will use query-string based
cache busting, which includes files loaded via HTML or worker scripts.

jest.config.js

@@ -1,7 +1,7 @@
 export default {
   rootDir: 'web_src',
   setupFilesAfterEnv: ['jest-extended/all'],
-  testEnvironment: '@happy-dom/jest-environment',
+  testEnvironment: 'jest-environment-jsdom',
   testMatch: ['<rootDir>/**/*.test.js'],
   testTimeout: 20000,
   transform: {

modules/setting/setting.go

@@ -92,6 +92,8 @@ var (
 	// LocalURL is the url for locally running applications to contact Gitea. It always has a '/' suffix
 	// It maps to ini:"LOCAL_ROOT_URL"
 	LocalURL string
+	// AssetVersion holds a opaque value that is used for cache-busting assets
+	AssetVersion string
 
 	// Server settings
 	Protocol                   Scheme
@@ -759,6 +761,7 @@ func loadFromConf(allowEmpty bool, extraConfig string) {
 	}
 
 	AbsoluteAssetURL = MakeAbsoluteAssetURL(AppURL, StaticURLPrefix)
+	AssetVersion = strings.ReplaceAll(AppVer, "+", "~") // make sure the version string is clear (no real escaping is needed)
 
 	manifestBytes := MakeManifestData(AppName, AppURL, AbsoluteAssetURL)
 	ManifestData = `application/json;base64,` + base64.StdEncoding.EncodeToString(manifestBytes)

modules/templates/helper.go

@@ -81,6 +81,9 @@ func NewFuncMap() []template.FuncMap {
 		"AppDomain": func() string {
 			return setting.Domain
 		},
+		"AssetVersion": func() string {
+			return setting.AssetVersion
+		},
 		"DisableGravatar": func() bool {
 			return setting.DisableGravatar
 		},
@@ -150,7 +153,6 @@ func NewFuncMap() []template.FuncMap {
 		"DiffTypeToStr":                  DiffTypeToStr,
 		"DiffLineTypeToStr":              DiffLineTypeToStr,
 		"ShortSha":                       base.ShortSha,
-		"MD5":                            base.EncodeMD5,
 		"ActionContent2Commits":          ActionContent2Commits,
 		"PathEscape":                     url.PathEscape,
 		"PathEscapeSegments":             util.PathEscapeSegments,

package.json

@@ -46,7 +46,6 @@
     "wrap-ansi": "8.0.1"
   },
   "devDependencies": {
-    "@happy-dom/jest-environment": "6.0.4",
     "@stoplight/spectral-cli": "6.5.0",
     "eslint": "8.21.0",
     "eslint-plugin-import": "2.26.0",
@@ -55,6 +54,7 @@
     "eslint-plugin-unicorn": "43.0.2",
     "eslint-plugin-vue": "9.3.0",
     "jest": "28.1.3",
+    "jest-environment-jsdom": "28.1.3",
     "jest-extended": "3.0.1",
     "markdownlint-cli": "0.32.1",
     "postcss-less": "6.0.0",

templates/base/footer.tmpl

@@ -22,7 +22,7 @@
 		<script src='https://hcaptcha.com/1/api.js' async></script>
 	{{end}}
 {{end}}
-	<script src="{{AssetUrlPrefix}}/js/index.js?v={{MD5 AppVer}}" onerror="alert('Failed to load asset files from ' + this.src + ', please make sure the asset files can be accessed and the ROOT_URL setting in app.ini is correct.')"></script>
+	<script src="{{AssetUrlPrefix}}/js/index.js?v={{AssetVersion}}" onerror="alert('Failed to load asset files from ' + this.src + ', please make sure the asset files can be accessed and the ROOT_URL setting in app.ini is correct.')"></script>
 {{template "custom/footer" .}}
 </body>
 </html>

templates/base/head.tmpl

@@ -21,7 +21,7 @@
 {{end}}
 	<link rel="icon" href="{{AssetUrlPrefix}}/img/favicon.svg" type="image/svg+xml">
 	<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
-	<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">
+	<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{AssetVersion}}">
 	{{template "base/head_script" .}}
 	<noscript>
 		<style>
@@ -67,10 +67,10 @@
 <meta property="og:site_name" content="{{AppName}}">
 {{if .IsSigned }}
 	{{ if ne .SignedUser.Theme "gitea" }}
-		<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{.SignedUser.Theme | PathEscape}}.css?v={{MD5 AppVer}}">
+		<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{.SignedUser.Theme | PathEscape}}.css?v={{AssetVersion}}">
 	{{end}}
 {{else if ne DefaultTheme "gitea"}}
-	<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{DefaultTheme | PathEscape}}.css?v={{MD5 AppVer}}">
+	<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{DefaultTheme | PathEscape}}.css?v={{AssetVersion}}">
 {{end}}
 {{template "custom/header" .}}
 </head>

templates/base/head_script.tmpl

@@ -9,6 +9,7 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 		appVer: '{{AppVer}}',
 		appUrl: '{{AppUrl}}',
 		appSubUrl: '{{AppSubUrl}}',
+		assetVersionEncoded: encodeURIComponent('{{AssetVersion}}'), // will be used in URL construction directly
 		assetUrlPrefix: '{{AssetUrlPrefix}}',
 		runModeIsProd: {{.RunModeIsProd}},
 		customEmojis: {{CustomEmojis}},

templates/swagger/ui.tmpl

@@ -3,11 +3,11 @@
 	<head>
 		<meta charset="UTF-8">
 		<title>Gitea API</title>
-		<link href="{{AssetUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}" rel="stylesheet">
+		<link href="{{AssetUrlPrefix}}/css/swagger.css?v={{AssetVersion}}" rel="stylesheet">
 	</head>
 	<body>
 		<a class="swagger-back-link" href="{{AppUrl}}">{{svg "octicon-reply"}}{{.locale.Tr "return_to_gitea"}}</a>
 		<div id="swagger-ui" data-source="{{AppUrl}}swagger.{{.APIJSONVersion}}.json"></div>
-		<script src="{{AssetUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}"></script>
+		<script src="{{AssetUrlPrefix}}/js/swagger.js?v={{AssetVersion}}"></script>
 	</body>
 </html>

web_src/js/features/notification.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 
-const {appSubUrl, csrfToken, notificationSettings} = window.config;
+const {appSubUrl, csrfToken, notificationSettings, assetVersionEncoded} = window.config;
 let notificationSequenceNumber = 0;
 
 export function initNotificationsTable() {
@@ -57,7 +57,7 @@ export function initNotificationCount() {
 
   if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js`, 'notification-worker');
+    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
     worker.addEventListener('error', (event) => {
       console.error('worker error', event);
     });

web_src/js/features/serviceworker.js

@@ -1,8 +1,8 @@
-import {joinPaths} from '../utils.js';
+import {joinPaths, parseUrl} from '../utils.js';
 
-const {useServiceWorker, assetUrlPrefix, appVer} = window.config;
+const {useServiceWorker, assetUrlPrefix, appVer, assetVersionEncoded} = window.config;
 const cachePrefix = 'static-cache-v'; // actual version is set in the service worker script
-const workerAssetPath = joinPaths(assetUrlPrefix, 'serviceworker.js');
+const workerUrl = `${joinPaths(assetUrlPrefix, 'serviceworker.js')}?v=${assetVersionEncoded}`;
 
 async function unregisterAll() {
   for (const registration of await navigator.serviceWorker.getRegistrations()) {
@@ -12,8 +12,9 @@ async function unregisterAll() {
 
 async function unregisterOtherWorkers() {
   for (const registration of await navigator.serviceWorker.getRegistrations()) {
-    const scriptURL = registration.active?.scriptURL || '';
+    const scriptPath = parseUrl(registration.active?.scriptURL || '').pathname;
-    if (!scriptURL.endsWith(workerAssetPath)) await registration.unregister();
+    const workerPath = parseUrl(workerUrl).pathname;
+    if (scriptPath !== workerPath) await registration.unregister();
   }
 }
 
@@ -43,7 +44,7 @@ export default async function initServiceWorker() {
     try {
       // the spec strictly requires it to be same-origin so the AssetUrlPrefix should contain AppSubUrl
       await checkCacheValidity();
-      await navigator.serviceWorker.register(workerAssetPath);
+      await navigator.serviceWorker.register(workerUrl);
     } catch (err) {
       console.error(err);
       await invalidateCache();

web_src/js/features/stopwatch.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import prettyMilliseconds from 'pretty-ms';
 import {createTippy} from '../modules/tippy.js';
 
-const {appSubUrl, csrfToken, notificationSettings, enableTimeTracking} = window.config;
+const {appSubUrl, csrfToken, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config;
 
 export function initStopwatch() {
   if (!enableTimeTracking) {
@@ -42,7 +42,7 @@ export function initStopwatch() {
   // if the browser supports EventSource and SharedWorker, use it instead of the periodic poller
   if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js`, 'notification-worker');
+    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
     worker.addEventListener('error', (event) => {
       console.error('worker error', event);
     });

web_src/js/utils.js

@@ -97,3 +97,8 @@ export function prettyNumber(num, locale = 'en-US') {
   const {format} = new Intl.NumberFormat(locale);
   return format(num);
 }
+
+// parse a URL, either relative '/path' or absolute 'https://localhost/path'
+export function parseUrl(str) {
+  return new URL(str, str.startsWith('http') ? undefined : window.location.origin);
+}

web_src/js/utils.test.js

@@ -1,5 +1,6 @@
 import {
-  basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch, prettyNumber,
+  basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch,
+  prettyNumber, parseUrl,
 } from './utils.js';
 
 test('basename', () => {
@@ -108,3 +109,15 @@ test('prettyNumber', () => {
   expect(prettyNumber(12345678, 'be-BE')).toEqual('12 345 678');
   expect(prettyNumber(12345678, 'hi-IN')).toEqual('1,23,45,678');
 });
+
+test('parseUrl', () => {
+  expect(parseUrl('').pathname).toEqual('/');
+  expect(parseUrl('/path').pathname).toEqual('/path');
+  expect(parseUrl('/path?search').pathname).toEqual('/path');
+  expect(parseUrl('/path?search').search).toEqual('?search');
+  expect(parseUrl('/path?search#hash').hash).toEqual('#hash');
+  expect(parseUrl('https://localhost/path').pathname).toEqual('/path');
+  expect(parseUrl('https://localhost/path?search').pathname).toEqual('/path');
+  expect(parseUrl('https://localhost/path?search').search).toEqual('?search');
+  expect(parseUrl('https://localhost/path?search#hash').hash).toEqual('#hash');
+});

webpack.config.js

@@ -74,7 +74,7 @@ export default {
     },
     chunkFilename: ({chunk}) => {
       const language = (/monaco.*languages?_.+?_(.+?)_/.exec(chunk.id) || [])[1];
-      return language ? `js/monaco-language-${language.toLowerCase()}.js` : `js/[name].js`;
+      return `js/${language ? `monaco-language-${language.toLowerCase()}` : `[name]`}.[contenthash:8].js`;
     },
   },
   optimization: {
@@ -173,14 +173,14 @@ export default {
         test: /\.(ttf|woff2?)$/,
         type: 'asset/resource',
         generator: {
-          filename: 'fonts/[name][ext]',
+          filename: 'fonts/[name].[contenthash:8][ext]',
         }
       },
       {
         test: /\.png$/i,
         type: 'asset/resource',
         generator: {
-          filename: 'img/webpack/[name][ext]',
+          filename: 'img/webpack/[name].[contenthash:8][ext]',
         }
       },
     ],
@@ -189,17 +189,17 @@ export default {
     new VueLoaderPlugin(),
     new MiniCssExtractPlugin({
       filename: 'css/[name].css',
-      chunkFilename: 'css/[name].css',
+      chunkFilename: 'css/[name].[contenthash:8].css',
     }),
     new SourceMapDevToolPlugin({
-      filename: '[file].map',
+      filename: '[file].[contenthash:8].map',
       include: [
         'js/index.js',
         'css/index.css',
       ],
     }),
     new MonacoWebpackPlugin({
-      filename: 'js/monaco-[name].worker.js',
+      filename: 'js/monaco-[name].[contenthash:8].worker.js',
     }),
     isProduction ? new LicenseCheckerWebpackPlugin({
       outputFilename: 'js/licenses.txt',