Hardening of the Frontend docker image (#377)

* move the env-config script to a sub folder
* fix doc
* fix ports and ref to the official image
* add hardening to the docker-compose examples

frontend/Dockerfile

@@ -1,11 +1,12 @@
 #### BUILDER IMAGE  ####
 FROM docker.io/node:12 as builder
 LABEL maintainer="Chevdor <chevdor@gmail.com>"
-LABEL description="Polkadot Telemetry frontend builder image"
+LABEL description="Substrate Telemetry Frontend builder image"
 
 WORKDIR /opt/builder
 
 COPY . .
+
 RUN yarn install && \
     yarn build && \
     yarn cache clean
@@ -13,20 +14,28 @@ RUN yarn install && \
 #### OUTPUT IMAGE ####
 FROM docker.io/nginx:stable-alpine
 LABEL maintainer="Chevdor <chevdor@gmail.com>"
-LABEL description="Polkadot Telemetry frontend"
+LABEL description="Substrate Telemetry Frontend"
 
 # Each time this container is ran, the value that's provided for this env var
 # determines where the frontend will try to request feed information from:
 ENV SUBSTRATE_TELEMETRY_URL=
 
-WORKDIR /usr/share/nginx/html
-
-COPY --from=builder /opt/builder/env.sh /usr/bin/
-RUN apk add --no-cache bash; chmod +x /usr/bin/env.sh
+WORKDIR /app
 
+COPY --from=builder /opt/builder/scripts/*.sh /usr/local/bin/
+COPY --from=builder /opt/builder/build /app
 COPY --from=builder /opt/builder/nginx/nginx.conf /etc/nginx/nginx.conf
-COPY --from=builder /opt/builder/build /usr/share/nginx/html
 
+RUN apk add --no-cache bash && \
+    chown -R nginx:nginx /app && \
+    chown -R nginx:nginx /var/cache/nginx && \
+    chown -R nginx:nginx /var/log/nginx && \
+    chown -R nginx:nginx /etc/nginx/conf.d && \
+    touch /var/run/nginx.pid && \
+    chown -R nginx:nginx /var/run/nginx.pid
+
+# UID= 101
+USER nginx
 EXPOSE 8000
 
-CMD ["/bin/bash", "-c", "/usr/bin/env.sh && nginx -g \"daemon off;\""]
+CMD ["/usr/local/bin/start.sh"]

frontend/nginx/nginx.conf

@@ -1,4 +1,3 @@
-user  nginx;
 worker_processes  auto;
 worker_rlimit_nofile  30000;
 
@@ -19,13 +18,13 @@ http {
 
     access_log  /var/log/nginx/access.log  main;
     sendfile        on;
-    #tcp_nopush     on;
+
     keepalive_timeout  65;
     gzip  on;
     include /etc/nginx/conf.d/*.conf;
 
     server {
-        root /usr/share/nginx/html;
+        root /app;
         index index.html;
         listen 8000;
         listen [::]:8000;

frontend/package.json

@@ -13,7 +13,7 @@
     "eject": "react-scripts-ts eject",
     "pretty:check": "prettier --check src/**/*.{ts,tsx}",
     "pretty:fix": "prettier --write src",
-    "clean": "rm -rf node_modules build .nyc env-config.js report*.json yarn-error.log"
+    "clean": "rm -rf node_modules build .nyc ./tmp/env-config.js report*.json yarn-error.log"
   },
   "dependencies": {
     "@polkadot/util-crypto": "^2.8.1",

frontend/public/index.html

@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#000000">
     <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
     <title>Polkadot Telemetry</title>
-    <script type="text/javascript" src="/env-config.js"></script>
+    <script type="text/javascript" src="/tmp/env-config.js"></script>
     <style>
       body, html {
         background: #fff;

frontend/scripts/env.sh

@@ -1,9 +1,11 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 # This script is used when the docker container starts and does the magic to
 # bring the ENV variables to the generated static UI.
 
-TARGET=./env-config.js
+ENV_DIR=./tmp
+mkdir -p "$ENV_DIR"
+TARGET="$ENV_DIR/env-config.js"
 
 # Recreate config file
 echo -n > $TARGET
@@ -18,3 +20,5 @@ for VAR in ${vars[@]}; do
   echo "  $VAR: \"${!VAR}\"," >> $TARGET
 done
 echo "}" >> $TARGET
+
+chmod 440 $TARGET

frontend/scripts/start.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env sh
+
+ENV_CONFIG=/app/tmp/env-config.js
+
+if test -f $ENV_CONFIG; then
+    echo Config is locked
+else
+    echo Generate env-config script...
+    /usr/local/bin/env.sh
+    echo done
+    chmod 444 $ENV_CONFIG
+fi
+
+echo Starting nginx...
+nginx -g "daemon off;"