Use readonly filesystem

Dockerfile

@@ -10,6 +10,7 @@ WORKDIR /app
 COPY --from=builder /app/build /app
 COPY proxy/server.conf /default.conf
 COPY proxy/run_nginx.sh run_nginx.sh
+COPY src/inject-env-template.js /inject-env-template.js
 USER 0
 RUN chown -R nginx /etc/nginx/conf.d \
     && chown -R nginx /app \

docker-compose-host-macos.yml

@@ -4,7 +4,7 @@ services:
   web:
     image: node:20.9-alpine
     container_name: radix-web_container
-    stdin_open: true # because of https://github.com/facebook/create-react-app/issues/8688
+    read_only: true
     working_dir: /app
     command: [ "sh", "-c", "npm install --prefer-offline --no-audit && chown -R node:node node_modules && npm start" ]
     volumes:
@@ -14,6 +14,9 @@ services:
       - type: volume
         source: node-modules
         target: /app/node_modules
+      - type: volume
+        target: /root
+        tmpfs: {}
     networks:
       - radix
     environment:
@@ -32,6 +35,7 @@ services:
   proxy:
     image: nginxinc/nginx-unprivileged:1.25.2-alpine
     container_name: radix-proxy_container
+    read_only: true
     depends_on:
       web:
         condition: service_healthy
@@ -48,6 +52,15 @@ services:
       - type: bind
         source: ./proxy/run_nginx.sh
         target: /run_nginx.sh
+      - type: bind
+        source: ./src/inject-env-template.js
+        target: /usr/share/nginx/html/inject-env.js
+      - type: volume
+        target: /etc/nginx/conf.d
+        tmpfs: {}
+      - type: volume
+        target: /tmp
+        tmpfs: {}
     command: [ "/bin/sh", "-c", ". run_nginx.sh" ]
     networks:
       - radix
@@ -57,6 +70,7 @@ services:
   auth:
     image: quay.io/oauth2-proxy/oauth2-proxy:v7.6.0
     container_name: radix-auth_container
+    read_only: true
     environment:
       # See the `radixconfig.yaml` file for a description of these settings
       - OAUTH2_PROXY_CLIENT_ID=5687b237-eda3-4ec3-a2a1-023e85a2bd84

docker-compose-host.yml

@@ -4,16 +4,16 @@ services:
   web:
     image: node:20.9-alpine
     container_name: radix-web_container
-    stdin_open: true # because of https://github.com/facebook/create-react-app/issues/8688
+    read_only: true
     working_dir: /app
     command: [ "sh", "-c", "npm install --prefer-offline --no-audit && chown -R node:node node_modules && npm start" ]
     volumes:
       - type: bind
         source: .
         target: /app
-#      - type: volume
-#        source: node-modules
-#        target: /app/node_modules
+      - type: volume
+        target: /root
+        tmpfs: {}
     network_mode: host
     ports:
       - "3000:3000"
@@ -22,6 +22,7 @@ services:
   proxy:
     image: nginxinc/nginx-unprivileged:1.25.2-alpine
     container_name: radix-proxy_container
+    read_only: true
     environment:
       - DYNATRACE_API_TOKEN=${DYNATRACE_API_TOKEN}
     volumes:
@@ -31,6 +32,15 @@ services:
       - type: bind
         source: ./proxy/run_nginx.sh
         target: /run_nginx.sh
+      - type: bind
+        source: ./src/inject-env-template.js
+        target: /usr/share/nginx/html/inject-env.js
+      - type: volume
+        target: /etc/nginx/conf.d
+        tmpfs: {}
+      - type: volume
+        target: /tmp
+        tmpfs: {}
     command: [ "/bin/sh", "-c", ". run_nginx.sh" ]
     network_mode: host
     ports:
@@ -39,6 +49,7 @@ services:
   auth:
     image: quay.io/oauth2-proxy/oauth2-proxy:v7.6.0
     container_name: radix-auth_container
+    read_only: true
     environment:
       # See the `radixconfig.yaml` file for a description of these settings
       - OAUTH2_PROXY_CLIENT_ID=5687b237-eda3-4ec3-a2a1-023e85a2bd84

docker-compose.yml

@@ -4,7 +4,7 @@ services:
   web:
     image: node:20.9-alpine
     container_name: radix-web_container
-    stdin_open: true # because of https://github.com/facebook/create-react-app/issues/8688
+    read_only: true
     working_dir: /app
     command: [ "sh", "-c", "npm install --prefer-offline --no-audit && chown -R node:node node_modules && npm start" ]
     environment:
@@ -16,6 +16,9 @@ services:
       - type: volume
         source: node-modules
         target: /app/node_modules
+      - type: volume
+        target: /root
+        tmpfs: {}
     networks:
       - radix
     ports:
@@ -25,6 +28,7 @@ services:
   proxy:
     image: nginxinc/nginx-unprivileged:1.25.2-alpine
     container_name: radix-proxy_container
+    read_only: true
     environment:
       - DYNATRACE_API_TOKEN=${DYNATRACE_API_TOKEN}
     volumes:
@@ -34,6 +38,15 @@ services:
       - type: bind
         source: ./proxy/run_nginx.sh
         target: /run_nginx.sh
+      - type: bind
+        source: ./src/inject-env-template.js
+        target: /usr/share/nginx/html/inject-env.js
+      - type: volume
+        target: /etc/nginx/conf.d
+        tmpfs: {}
+      - type: volume
+        target: /tmp
+        tmpfs: {}
     command: [ "/bin/sh", "-c", ". run_nginx.sh" ]
     networks:
       - radix
@@ -43,6 +56,7 @@ services:
   auth:
     image: quay.io/oauth2-proxy/oauth2-proxy:v7.6.0
     container_name: radix-auth_container
+    read_only: true
     environment:
       # See the `radixconfig.yaml` file for a description of these settings
       - OAUTH2_PROXY_CLIENT_ID=5687b237-eda3-4ec3-a2a1-023e85a2bd84

index.html

@@ -63,6 +63,7 @@
     </style>
 
     <title>Radix Web Console</title>
+    <script type="text/javascript" src="/config/inject-env.js"></script>
   </head>
   <body>
     <noscript>
@@ -71,20 +72,5 @@
 
     <div id="root"></div>
     <script type="module" src="./src/index.ts"></script>
-    <script>
-      window.RADIX_API_ENVIRONMENT = "${RADIX_API_ENVIRONMENT}";
-      window.RADIX_CLUSTER_BASE = "${RADIX_DNS_ZONE}";
-      window.RADIX_CLUSTERNAME = "${RADIX_CLUSTERNAME}";
-      window.RADIX_CLUSTER_TYPE = "${RADIX_CLUSTER_TYPE}";
-      window.RADIX_ENVIRONMENT = "${RADIX_ENVIRONMENT}";
-      window.CLUSTER_EGRESS_IPS = "${CLUSTER_EGRESS_IPS}";
-      window.CLUSTER_INGRESS_IPS = "${CLUSTER_INGRESS_IPS}";
-      window.OAUTH2_CLIENT_ID = "${OAUTH2_CLIENT_ID}";
-      window.OAUTH2_AUTHORITY = "${OAUTH2_AUTHORITY}";
-      window.SERVICENOW_PROXY_SCOPES = "${SERVICENOW_PROXY_SCOPES}"
-      window.SERVICENOW_PROXY_BASEURL = "${SERVICENOW_PROXY_BASEURL}"
-      window.CMDB_CI_URL = "${CMDB_CI_URL}"
-      window.CLUSTER_OIDC_ISSUER_URL = "${CLUSTER_OIDC_ISSUER_URL}"
-    </script>
   </body>
 </html>

proxy/run_nginx.sh

@@ -3,7 +3,6 @@
 export SERVICENOW_PROXY_BASEURL="https://api-radix-servicenow-proxy-${RADIX_ENVIRONMENT}.${RADIX_CLUSTERNAME}.${RADIX_DNS_ZONE}/api/v1"
 
 envsubst '
-  ${RADIX_API_ENVIRONMENT}
   ${RADIX_CLUSTERNAME}
   ${RADIX_CLUSTER_TYPE}
   ${RADIX_DNS_ZONE}
@@ -15,8 +14,9 @@ envsubst '
   ${SERVICENOW_PROXY_SCOPES}
   ${SERVICENOW_PROXY_BASEURL}
   ${CLUSTER_OIDC_ISSUER_URL}
-  ' </app/index.html >/app/tmp.html
-mv /app/tmp.html /app/index.html
+  ${CMDB_CI_URL}
+  ' </inject-env-template.js >/app/config/tmp-inject-env.js
+mv /app/config/tmp-inject-env.js /app/config/inject-env.js
 
 # Substitute environment variables in the nginx.conf file using the values in the current container environment
 envsubst '

proxy/server.dev-host-macos.conf

@@ -62,4 +62,9 @@ server {
         sub_filter_once on;
         sub_filter HTTP_STATUS_CODE $status;
     }
+
+    location = /config/inject-env.js {
+        root   /usr/share/nginx/html;
+        try_files /inject-env.js =404;
+    }
 }

proxy/server.dev-host.conf

@@ -62,4 +62,9 @@ server {
         sub_filter_once on;
         sub_filter HTTP_STATUS_CODE $status;
     }
+
+    location = /config/inject-env.js {
+        root   /usr/share/nginx/html;
+        try_files /inject-env.js =404;
+    }
 }

proxy/server.dev.conf

@@ -57,4 +57,9 @@ server {
         sub_filter_once on;
         sub_filter HTTP_STATUS_CODE $status;
     }
+
+    location = /config/inject-env.js {
+        root   /usr/share/nginx/html;
+        try_files /inject-env.js =404;
+    }
 }

radixconfig.yaml

@@ -14,6 +14,20 @@ spec:
         from: release
   components:
     - name: web
+      readOnlyFileSystem: true
+      volumeMounts:
+        - name: tmp
+          path: /tmp
+          emptyDir:
+            sizeLimit: 1M
+        - name: nginxconfd
+          path: /etc/nginx/conf.d
+          emptyDir:
+            sizeLimit: 1M
+        - name: wwwconfig
+          path: /app/config
+          emptyDir:
+            sizeLimit: 1M
       src: "."
       ports:
         - name: http
@@ -34,6 +48,7 @@ spec:
         OAUTH2_AUTHORITY: "https://login.microsoftonline.com/3aa4a235-b6e2-48d5-9195-7fcf05b459b0"
         SERVICENOW_PROXY_SCOPES: "1b4a22f1-d4a1-4b6a-81b2-fd936daf1786/Application.Read"
         CLUSTER_OIDC_ISSUER_URL: ""
+        CMDB_CI_URL: "https://equinor.service-now.com/selfservice?id=form&table=cmdb_ci_spkg&sys_id={CIID}"
       secrets:
         - DYNATRACE_API_TOKEN # Token to use for display of availability metrics
         - OAUTH2_CLIENT_ID # Azure Application ID

src/config.json

@@ -4,7 +4,6 @@
     "enablePromotionPipeline": true,
     "enableChangeAdmin": true
   },
-  "RADIX_API_ENVIRONMENT": "prod",
   "RADIX_CLUSTER_BASE": "dev.radix.equinor.com",
   "RADIX_CLUSTERNAME": "weekly-32",
   "RADIX_CLUSTER_TYPE": "development",

src/inject-env-template.js

@@ -0,0 +1,14 @@
+window.injectEnv = {
+  RADIX_CLUSTER_BASE: '${RADIX_DNS_ZONE}',
+  RADIX_CLUSTERNAME: '${RADIX_CLUSTERNAME}',
+  RADIX_CLUSTER_TYPE: '${RADIX_CLUSTER_TYPE}',
+  RADIX_ENVIRONMENT: '${RADIX_ENVIRONMENT}',
+  CLUSTER_EGRESS_IPS: '${CLUSTER_EGRESS_IPS}',
+  CLUSTER_INGRESS_IPS: '${CLUSTER_INGRESS_IPS}',
+  OAUTH2_CLIENT_ID: '${OAUTH2_CLIENT_ID}',
+  OAUTH2_AUTHORITY: '${OAUTH2_AUTHORITY}',
+  SERVICENOW_PROXY_SCOPES: '${SERVICENOW_PROXY_SCOPES}',
+  SERVICENOW_PROXY_BASEURL: '${SERVICENOW_PROXY_BASEURL}',
+  CMDB_CI_URL: '${CMDB_CI_URL}',
+  CLUSTER_OIDC_ISSUER_URL: '${CLUSTER_OIDC_ISSUER_URL}',
+};

src/utils/config/index.ts

@@ -1,4 +1,4 @@
-import * as jsonConfig from '../../config.json';
+import jsonConfig from '../../config.json';
 
 function arrayTransformer(
   delimiter = ','
@@ -17,16 +17,21 @@ const transformers: Partial<
   SERVICENOW_PROXY_SCOPES: arrayTransformer(' '),
 };
 
+const injectEnvKey = 'injectEnv';
+
 export const configVariables: Readonly<typeof jsonConfig> = Object.freeze(
-  Object.keys(jsonConfig)
-    .filter((key) => key !== 'default')
-    .reduce<typeof jsonConfig>((config, key: keyof typeof jsonConfig) => {
+  Object.keys(jsonConfig).reduce<typeof jsonConfig>(
+    (config, key: keyof typeof jsonConfig) => {
       const value =
-        !window[key] || window[key].startsWith('${')
+        !window[injectEnvKey] ||
+        !window[injectEnvKey][key] ||
+        window[injectEnvKey][key].startsWith('${')
           ? jsonConfig[key]
-          : window[key];
+          : window[injectEnvKey][key];
 
       config[key] = transformers[key] ? transformers[key](value) : value;
       return config;
-    }, Object.create({}))
+    },
+    Object.create({})
+  )
 );