I wrote about font loading from external CDN in the post Hiding The Create Community Button 2nd last year and hoped this is finally fixed for all Connections applications. A good summary on the reasons to not allow external font loading is Blocking Web Fonts for Speed and Privacy .
So I checked with a Connections 7 deployment with the latest CFix (CFix.70.2112) deployed, if this is still an issue with Connections.
In former Connections' versions we found external fonts loaded in Orient Me (
/social), Communities Catalog (
/communities) and the Admin panel (
Orient Me and the Community catalog are loading fonts from Unpkg and the Admin Panel from fonts.gstatic.com.
In the meantime the font loading in Communities catalog is fixed, when the
CATALOG_CARD_UPDATED=true, but Orient Me and Admin panel are still loading external fonts. That can be related to the fact that Component Pack didn’t get updates since May 2021. As I don’t want to wait any longer, I had a look if we can fix this on our own.
Orient Me is running as container, so it is not enough to edit a file, because this will be overwritten when the container is deleted and gets recreated from the default image.
I hate to type
-n connections over and over again with the
kubectl command. To set the default namespace to
connections, run this command:
kubectl config set-context --current --namespace=connections
This is saved in
~/.kube/config and is persistent.
After some research, the easiest way to remove the external CDN from the Orient Me container is the following way:
kubectl get pods ... orient-web-client-77dbff4d58-4h69x 1/1 Running 0 132m ...
Now we run a shell in the running Orient Me container (use the name you found with the command above, when you have multiple pods running, use one of them, but make a note of the name):
kubectl exec -it orient-web-client-77dbff4d58-4h69x -- sh
find showed, that the only file we need to change for left-to-right languages is
/home/ibm/app/public/dist/js/ic-orient-4a833568f93c16c17c7c5e29f6f073d6.rtl.css for right-to-left.
Additionally I searched within the container and in the requests of my browser if I can find the used fonts on the system. I found that all
IBM*.woff2 fonts are included in the Orient Me container, but also they are already used in several apps within Connections. The Communities catalog for example load them from
I wanted to avoid massive changes in the container, so I decided to change the fonts URLs to this path. Run the following in the container shell you opened above:
sed -i 's#https://unpkg.com/carbon-components@latest/src/globals/#/connections/ui/dist/#g' /home/ibm/app/public/dist/js/ic-orient-4a833568f93c16c17c7c5e29f6f073d6.css sed -i 's#https://unpkg.com/carbon-components@latest/src/globals/#/connections/ui/dist/#g' /home/ibm/app/public/dist/js/ic-orient-4a833568f93c16c17c7c5e29f6f073d6.rtl.css
Now when we open Orient Me (/social) it already loads the font directly from Connections, but this change is not persistent, it will be overwritten when you delete the Orient Me pod.
I this should be run on the node where the Orient Me container you changed is running. To find it:
kubectl get pods -o wide NAME READY STATUS RESTARTS AGE IP NODE NOMINATED NODE READINESS GATES ... orient-web-client-77dbff4d58-4h69x 1/1 Running 0 146m 192.168.68.210 cnx7-cp.stoeps.home <none> <none> ...
docker ps | grep orient-web-client-77dbff4d58-4h69x 4b1ed5bb12d6 fd0bb831f5e6 "docker-entrypoint.s…" 2 hours ago Up 2 hours k8s_orient-web-client_orient-web-client-77dbff4d58-4h69x_connections_f5b463e7-6c77-446a-92e0-56115765bcff_0 bcdd9ba8c2c6 k8s.gcr.io/pause:3.2 "/pause" 2 hours ago Up 2 hours k8s_POD_orient-web-client-77dbff4d58-4h69x_connections_f5b463e7-6c77-446a-92e0-56115765bcff_0
Here we need the line with the
docker-entrypoint command and copy the value from the first column (
Let’s check the used tag for our Orient Me image:
docker image ls | grep orient-web cnx7-cp.stoeps.home:5000/connections/orient-web-client 20210426-155510 d4ce676e668e 3 hours ago 577MB
Here we see the registry URL:
cnx7-cp.stoeps.home:5000, image name:
connections/orient-web-client and tag:
20210426-155510. Now we can commit the change and write a new image with a different timestamp as tag. Use the container hash
4b1ed5bb12d6 from above to identify and tag the right image!
docker commit 4b1ed5bb12d cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-151700
docker image ls | grep orient-web cnx7-cp.stoeps.home:5000/connections/orient-web-client 20220114-151700 fd0bb831f5e6 3 hours ago 577MB cnx7-cp.stoeps.home:5000/connections/orient-web-client 20210426-155510 d4ce676e668e 3 hours ago 577MB
docker push cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-151700
Now we only need to update the deployment that it uses our new container image (always keep the old image, so you can revert back).
kubectl edit deployment orient-web-client
This opens a yaml with the configuration of the pod. Search for the line:
and change it to
Save and close the file (default uses
:wq will save and close), this will restart all container in this deployment. Wait some seconds, check if Orient Me is running again, then you can test if the fonts are loaded from a local resource or unpkg.
Normally changing the deployment will restart all pods of the deployment. You can run the following command to restart Orient Me to be sure that it pulls the new image:
kubectl rollout restart deployment orient-web-client
In former talks I showed the advantages of containers. Building them automatically on a regular basis can help to get a more secure product. So even when you don’t want to build a container again (which should be a no-brainer with the right ci/cd pipelines), you can add the two lines of
sed and one piece is fixed.
The book Hacking Kubernetes from Michael Hausenblas and Andrew Martin recommend rebuilding containers all 30 days. So I see forward when we get the next updates for Component Pack and until then I will change this on my own.