Keycloak CSS is not updating in browser - keycloak

I am upgrading Keycloak from 9.x to 12.x in a development environment. I initially copied some custom themes forward, and found that the styling was badly broken (no surprise). I reviewed my FTL files, copied some of the core changes into my theme, and things are much better - just some minor issues to adjust.
Now the problem. I've made the changes to my login.css file, but those changes aren't showing up in the browser. It continues to fetch an old version of my custom CSS file.
What I have tried (multiple times for most of these):
Clear browser cache
Restart Keycloak
Check ownership/permissions of theme files
Restart entire server
Load CSS file directly
Load CSS file directly with meaningless parameter added (trying to bypass any possible middleman caching)
Confirm new version of Keycloak is the one running
Load page in other browsers
I've also now grepped the entire Keycloak directory for some of the CSS rules I've removed, and I can't find any copies of the "old" css file anywhere that might be getting referenced by accident.
Also, there are no messages in the Keycloak log when loading the CSS file.
I want to figure out how to get Keycloak to deliver the updated CSS to the browser.

Blind guess, so please don't blame me if it doesn't work. (question should include minimal reproducible example):
Edit /opt/jboss/keycloak/standalone/configuration/standalone-ha.xml and update it as follows:
<theme>
<staticMaxAge>-1</staticMaxAge>
<cacheThemes>false</cacheThemes>
<cacheTemplates>false</cacheTemplates>
...
</theme>

For me it worked when changed this file
standalone.xml
like below way
<cacheThemes>false</cacheThemes>
<cacheTemplates>false</cacheTemplates>
I think it is because I am using single instance mode instead cluster ha mode.

Apart from disabling cache, as described above, you can also adjust the theme resource URLs, breaking the client-side cache. It's a bit of a hack, but you can directly modify the resource tag portion of the URL by adjusting the database migration_model.id value.
references:
https://github.com/keycloak/keycloak/blob/main/model/jpa/src/main/java/org/keycloak/models/jpa/MigrationModelAdapter.java
https://medium.com/#hokumski/how-to-drop-keycloak-theme-cache-without-clearing-browser-data-aebb499ae83b

You must delete the path keycloak-server\standalone\tmp\kc-gzip-cache\sbgwq or otherelse folder... and test in a browser in incognit mode.

Related

ERROR: Content Element with uid "61" and type "mask_container" has no rendering definition! (Typo3, Mask)

I transfered a Typo3 website from the dev server to the live server. I can log into the backend, I cleared all caches, activated all necessary extensions. In backend everything seems to run fine.
However, in frontend everything is rendered correctly except the Mask-elements. In place of the mask-elements I get this output:
"ERROR: Content Element with uid "61" and type "mask_container" has no rendering definition!"
Can anyone help?
Perhaps you forgot to include the "Fluid Styled Content" and the "Mask" templates in your site template under "include static from extension".
I was able to fix it. Static templates were included. I had copied all folders in /fileadmin and /typo3conf. I also had copied the database, imported an export of the dev server database.
But still the paths in the Mask configuration were wrong. I had to correct the paths manually. That fixed it.

AEM Pages served by dispatcher do not match Author or Publish server content

We have created content on an AEM author server and published the pages. The content shows up correctly on the publish server. However, when we try to reach the pages "live" as served from the dispatcher, they are missing some images and all of the css formatting.
We have tried flushing the dispatcher, but that didn't seem to work. Any hints on how to proceed with fixing this?
Missing images, css, js could be due to blocked/misconfigured paths in your dispatcher. Check your dispatcher access logs for more details.
Thank you for the responses. In case it helps anyone else, the problem was that the dispatcher flush job wasn't actually working. We had to go in and manually delete the designs folder tree and force the dispatcher to rebuild files from publish.
A second problem was due to some file extensions not being allowed. We updated one of the config files to allow png and ttf files, so all the images and fonts would load successfully.

Maintaining (version + redirect) in S3

So, far in our application, the *.js files were served directly from apache. For example, this was a script include in a jsp page : /foo/v6565/my_script.js. The v6565 in the path is phony and an internal apache redirect, redirects /foo/v6565/my_script.js to /foo/my_script.js.
Whenever my_script.js is updated, v<xxxx> in the included jsp page (an internal tool does it based on the SVN revision of my_script) is updated - thus forcing the browser to fetch my_script.js again and not the cached version. I hope I am able to explain my current approach clearly.
[A different approach could have been to user /foo/my_script.js?v=5652. However, there was some caching issue (can't remember it) because of which the decision was taken to use /foo/v56564/ instead of adding version to the queryParam. I will dig into it, though]
Now, that we are moving all of our *.js files to an s3 bucket, I was wondering what would be a way of doing this?
The path from s3 bucket would look like : mybucket.aws.com/js/my_script.js. How to I insert the version tag + redirection for s3? Are there any other standard approaches used when resources are served from s3?
(I've read about page redirects on s3 resources but the redirects are to be written directly on the resources, which is not really applicable in my case)
Thanks.
I think cache busting with ?v=<hash> is pretty much standard now.
It has been disadvised, however that's a pretty old resource (though often cited) and I'm not sure if this is still true. Even your trusted StackOverflow is using it with SHA1, so I guess it's good enough for everybody now.

Invalidating an HTML5 cache (manifest) completely?

I have an iPhone web-app, and I want to know how to force a cache refresh.
My cache manifest is this:
CACHE MANIFEST
index.html
file1.css
file1.js
index.html is the meat of the application, so I put that in the cache. At this point, I seem to be boned, as I can't figure out how to get iPhone to invalidate the cache. Even going to Settings > Safari > Clear Cache doesn't work, although I'd like to be able to control this programatically. Removing index.html from the manifest and re-adding it seems to work, but I would have to know that all my clients had a clean hit of the updated manifest.
How do I cache index.html and still have it updated when it changes?
Off the top of my head, any change to the manifest will do the trick - and manifests can contain comments starting with #. Just add a random comment and it'll work.
It's a useful property, when I worked on an HTML5 application in a git repository I used to have the manifest automatically regenerated with a comment containing the HEAD hash after each commit so that the changes always propagate to the users.
There seems to be a bug in WebKit Browsers preventing them to reload the website on manifest changes, see this link
Have no clue for a workaround except when I call the index.html directly.
No chance for a iPad/iPhone-WebApp pinned to do the job...
Yes, you can use JavaScript to force Safari to reload cached resource files.
According to Apple, modifying the cache manifest file will cause Safari to reload any changed resource files. But those reloaded files won't be used by the browser until the user visits the site a second time. That delay can a pain, especially during development.
To force Safari to reload the cache contents immediately, Apple says you can use this JavaScript to manipulate the applicationCache object:
function updateSite(event) {
window.applicationCache.swapCache();
}
window.applicationCache.addEventListener('updateready', updateSite, false);

iPhone Safari offline-cache manifest not working correctly

I'm working on a mobile site for the iphone. I've added a cache manifest and loaded it with a list of resources needed for offline capability. The manifest file has the correct content type. You can view the manifest file in the header of this page:
http://www.rvddps.com/apps/sixshot/booking.html
I had a bunch of links to pages but due to my user level i'm only allowed to post one link. You can see the manifest file there and the source code of the page i'm trying to cache.
I've set the correct MIME type on the server, but the cache only seems to work occasionally.. not all the time. I've tried following apples' official caching guidelines as well.
Can anyone point out where i'm going wrong?
Thanks
Daniel
I looked at the manifest file and found 'Â' characters in some of the blank lines. What text editor are you using? Make sure you use the proper encoding and line ending types.