[JS] Force update js-file in browser after upgrade luci-app-ANY

remittor · October 26, 2024, 5:52pm

Problem

After updating the JS-part of any package, the user is forced to clear the browser cache.

Proposed Solution

Add the version of the ipk-package to which the file belongs to the JS-file name.
Instead, all JS-files are now appended with a common version of LuCI.

github.com

openwrt/luci/blob/392b7e6b0d56d7d292b7f662b0728620397613e9/modules/luci-base/htdocs/luci-static/resources/luci.js#L2229-L2237


      
          			document.querySelectorAll('script[src*="/luci.js"]').forEach(function(s) {
          				if (setenv.base_url == null || setenv.base_url == '') {
          					var m = (s.getAttribute('src') || '').match(/^(.*)\/luci\.js(?:\?v=([^?]+))?$/);
          					if (m) {
          						setenv.base_url = m[1];
          						setenv.resource_version = m[2];
          					}
          				}
          			});

github.com

openwrt/luci/blob/392b7e6b0d56d7d292b7f662b0728620397613e9/modules/luci-base/htdocs/luci-static/resources/luci.js#L2446


      
          			if (classes[name] != null) {
          				/* Circular dependency */
          				if (from.indexOf(name) != -1)
          					LuCI.prototype.raise('DependencyError',
          						'Circular dependency: class "%s" depends on "%s"',
          						name, from.join('" which depends on "'));
          
          				return Promise.resolve(classes[name]);
          			}
          
          			url = '%s/%s.js%s'.format(env.base_url, name.replace(/\./g, '/'), (env.resource_version ? '?v=' + env.resource_version : ''));
          			from = [ name ].concat(from);
          
          			var compileClass = function(res) {
          				if (!res.ok)
          					LuCI.prototype.raise('NetworkError',
          						'HTTP error %d while loading class file "%s"', res.status, url);
          
          				var source = res.text(),
          				    requirematch = /^require[ \t]+(\S+)(?:[ \t]+as[ \t]+([a-zA-Z_]\S*))?$/,
          				    strictmatch = /^use[ \t]+strict$/,

All files in the package are known. The version is also known:

root@OpenWrt:# opkg files luci-app-zapret
Package luci-app-zapret (66-20241025) is installed on root and has the following files:
/www/luci-static/resources/view/zapret/service.js
/www/luci-static/resources/view/zapret/settings.js
/usr/share/rpcd/acl.d/luci-app-zapret.json
/www/luci-static/resources/view/zapret/tools.js
/usr/share/luci/menu.d/luci-app-zapret.json

root@OpenWrt:# opkg info luci-app-zapret
Package: luci-app-zapret
Version: 66-20241025
Depends: libc, zapret
Status: install user installed
Architecture: all
Installed-Time: 1729956777

remittor · October 27, 2024, 8:32am

I found a pretty similar problem on GitHub.
And they advised that the user should manually clear the cache in the browser.

@jow , can you comment on my problem that I described?

github.com/openwrt/luci

Type Error due to stale browser cache after LAN address change

opened 08:12PM - 17 Mar 22 UTC

closed 07:14PM - 26 Apr 22 UTC

louisheibert

Archer 1750 A7 OpenWrt 21.02.2 r16495-bf0c965af0 / LuCI openwrt 21.02 branch gi…t-22.052.50801-31a27f3 (with all available updates as of 3/16/2022) ## Steps to reproduce: 1. Install all recommended updates (in LuCI) after the initial bare firmware installation. 2. Change the LAN interface IP address in LuCI, uci, or network config file. 3. Restart network or reboot router 4. click on the "Network > Interface" or "Network > Firewall" menu option ## Actual behavior: 1. A red Type Error "firewall.getZoneColorStyle is not a function" appears 2. Network (or Firewall) screen never opens. ## Expected behavior: (it works instead of not working) ## Additional Information: Clearing the browser cache (at least in Firefox) fixes the problem. I'm not a web app expert by any means... however, I suspect web apps are supposed to poison cache data when necessary. Perhaps this is just a Firefox problem because nothing from the old ip address should be referenced in cache when using the new ip address. It should effectively be a completely different web site from the browser's perspective. In fact it really seems like a security bug on their part. Still, I thought you should know since I've never had this problem with OpenWRT before.

remittor · April 12, 2025, 2:41pm

Each time a package is removed or installed, the contents of the /usr/lib/opkg/status file are changed.
That's why I decided to add the modification time of the /usr/lib/opkg/status file to the version of the main LuCI package (luci-base).

Here is the implementation of this method:

github.com/openwrt/luci

luci-base: Added patching of version into header.ut

master ← remittor-pr:fix-header-ut

opened 09:55AM - 14 Apr 25 UTC

remittor

+40 -2

# Problem: After updating the `js`-part of any package, the user is forced to c…lear the browser cache. # Fix: Each time a package is removed or installed, the contents of the `/lib/apk/db/installed` file are changed. This fix add the modification time of the `/lib/apk/db/installed` file to the version of the main LuCI package (for each `js`-file). Additional info and screenshots: https://forum.openwrt.org/t/214025/3 - [X] This PR is not from my *main* or *master* branch :poop:, but a *separate* branch :white_check_mark: - [X] Each commit has a valid :black_nib: `Signed-off-by: <my@email.address>` row (via `git commit --signoff`) - [X] Each commit and PR title has a valid :memo: `<package name>: luci-base` first line subject for packages - [X] Incremented :up: any `PKG_VERSION` in the Makefile - [X] Tested on: (filogic, openwrt 24.10.0, Chrome 135) :white_check_mark: - [X] \( Preferred ) Mention: @remittor the original code author for feedback - [X] \( Preferred ) Screenshot or mp4 of changes: ![image](https://github.com/user-attachments/assets/d923da74-17f6-4029-a54f-8f25ff5bcdb9)

Here is the place that this method patches:

github.com/openwrt/luci

modules/luci-base/ucode/template/header.ut

01ad63eb6


      
          
          <script src="{{ resource }}/luci.js"></script>
          <script>

Result:

Now the browser is simply forced to request new js-files from the router.

systemcrash · April 12, 2025, 9:06pm

Could work, but the patch breaks after 24.10 where package manager becomes apk.

remittor · April 13, 2025, 8:04am

On the snapshot, instead of file /usr/lib/opkg/status, there is file /lib/apk/db/installed.
Its contents also change after removing and installing packages.
Therefore, it is very easy to adapt my patch for apk.

systemcrash · April 13, 2025, 1:52pm

Fixing this caching problem is a bit of chicken or egg problem. Going for the cache busting string is a good move, but perhaps something can be done on the luci JS side by simply checking for the last update time of either of those files in a promise, which when resolved, completes the string.

Is that something you've looked at?

systemcrash · April 14, 2025, 1:39pm

Resolved by https://github.com/openwrt/luci/pull/7725