Patch Orient Me Container

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.

kubectl config set-context --current --namespace=connections

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.