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 (/cnxadmin/
).
Orient Me and the Community catalog are loading fonts from Unpkg and the Admin Panel from fonts.gstatic.com.
There was a long discussion in the Connections Community Forum which ended with a comment of the Connections Product Management that this will be fixed in a future version.
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.
Edit the pod
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
Some grep
and 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.css
and /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 https://<connections-host>/connections/ui/dist/
.
Rewrite the font URL in the CSS file
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.
Make your patch persistent
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>
...
Find the Docker image
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 (4b1ed5bb12d6
)
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
Check the image names and tags
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
Check the Entrypoint of old and new image
docker inspect --format='{{ .Config.Entrypoint }}' cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-151700
docker inspect --format='{{ .Config.Entrypoint }}' cnx7-cp.stoeps.home:5000/connections/orient-web-client:20210426-155510
This should return the same ENTRYPOINT! If not, go back to the commit step and use:
docker commit --change='ENTRYPOINT ["<Use return value of the inspect command here>"]' 4b1ed5bb12d cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-151700
Upload the image to the docker registry:
docker push cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-151700
Update deployment
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:
image: cnx7-cp.stoeps.home:5000/connections/orient-web-client:20210426-151700
and change it to
image: cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-155510
Save and close the file (default uses vi
, so :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
Comment
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.