Merge pull request #4 from catenax-ng/TRACEFOSS-565-docker

fbedarf · web-flow · commit 4543c2da45e9 · 2023-02-16T13:33:18.000+01:00
Tracefoss-565: Support usage of context path in docker file
diff --git a/Dockerfile b/Dockerfile
@@ -39,10 +39,17 @@ COPY --from=builder /usr/local/bin /usr/local/bin
 
 # Copy NGINX server configuration
 COPY ./build/security-headers.conf ./build/nginx.conf /etc/nginx/
+
+# Copy custom script runner
+COPY scripts/custom-injector.sh /docker-entrypoint.d/00-custom-injector.sh
+
 # Add env variables inject script
-COPY ./scripts/run-inject-dynamic-env.sh /docker-entrypoint.d/00-inject-dynamic-env.sh
 COPY ./scripts/inject-dynamic-env.js /docker-entrypoint.d/
+# Add replace base url script
+COPY ./scripts/replace-base-href.js /docker-entrypoint.d/
+
+USER root
+RUN chown nginx:nginx /etc/nginx/nginx.conf
+RUN chown nginx:nginx /etc/nginx/security-headers.conf
 
-# Validate NGINX configuration
-RUN nginx -t
 USER 101
diff --git a/INSTALL.md b/INSTALL.md
@@ -8,6 +8,7 @@ const ENV_VARS_MAPPING = {
   CATENAX_PORTAL_CLIENT_ID: 'clientId',
   CATENAX_PORTAL_API_URL: 'apiUrl',
   CATENAX_PORTAL_BASE_URL: 'baseUrl',
+  CATENAX_PORTAL_BACKEND_DOMAIN,
 };
 ```
 
@@ -23,6 +24,11 @@ This variable points to the desired api
 `CATENAX_PORTAL_BASE_URL`
 This variable is used to set the base path of the application. (Should be set if application runs as a subtopic)
 
+`CATENAX_PORTAL_BACKEND_DOMAIN`
+This variable is needed for security, to be more explicit, for the security headers of a request.  
+The domain of the corresponding backend should be used here.  
+An example value could be: `catena-x.net`
+
 # Helm deployment
 
 ## Configuration of values.yaml
@@ -102,7 +108,7 @@ When running the build docker image you are able to pass through multiple enviro
 ### Example command:
 
 ```shell
-$ docker run -d -p 4200:8080 -e ENV_VAR=VAR_VALUE ${dockerImage}
+$ docker run -d -p 4200:8080 -e CATENAX_PORTAL_BASE_URL=/example -e CATENAX_PORTAL_BACKEND_DOMAIN=catena-x.net ${dockerImage}
 ```
 
 #### `Docker run`
diff --git a/build/nginx.conf b/build/nginx.conf
@@ -35,18 +35,19 @@ http {
 
     server_tokens off;
 
-    location ~ /index.html|.*\.json$ {
+    location ~ /{baseHrefPlaceholder}/index.html|/{baseHrefPlaceholder}/*\.json$ {
       expires -1;
       add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
       include /etc/nginx/security-headers.conf;
     }
 
-    location ~ .*\.css$|.*\.js$ {
+    location ~ /{baseHrefPlaceholder}/*\.(css|js)$ {
       add_header Cache-Control 'max-age=31449600'; # one year
       include /etc/nginx/security-headers.conf;
     }
 
-    location / {
+    location /{baseHrefPlaceholder}/ {
+      alias /usr/share/nginx/html/;
 	  try_files $uri$args $uri$args/ /index.html;
 
       add_header Cache-Control 'max-age=86400'; # one day
diff --git a/build/security-headers.conf b/build/security-headers.conf
@@ -1,5 +1,5 @@
 add_header Strict-Transport-Security "max-age=31449600; includeSubDomains" always;
-add_header Content-Security-Policy "default-src 'self' https://*.mapbox.com https://*.catena-x.net; object-src 'none'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://api.mapbox.com 'self' blob:; script-src-elem 'self'; base-uri 'self'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; block-all-mixed-content; font-src 'self' https: data:; frame-ancestors 'self'; img-src 'self' data:; upgrade-insecure-requests;" always;
+add_header Content-Security-Policy "default-src 'self' https://*.mapbox.com https://*.{backendDomain}; object-src 'none'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://api.mapbox.com 'self' blob:; script-src-elem 'self'; base-uri 'self'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; block-all-mixed-content; font-src 'self' https: data:; frame-ancestors 'self'; img-src 'self' data:; upgrade-insecure-requests;" always;
 add_header X-Frame-Options "DENY" always;
 add_header X-Content-Type-Options "nosniff" always;
 add_header Referrer-Policy "strict-origin" always;
diff --git a/charts/traceability-foss-frontend/templates/deployment.yaml b/charts/traceability-foss-frontend/templates/deployment.yaml
@@ -49,6 +49,10 @@ spec:
               value: "{{ .Values.image.CATENAX_PORTAL_KEYCLOAK_URL }}"
             - name: CATENAX_PORTAL_CLIENT_ID
               value: "{{ .Values.image.CATENAX_PORTAL_CLIENT_ID }}"
+            - name: CATENAX_PORTAL_BASE_URL
+              value: "{{ .Values.image.CATENAX_PORTAL_BASE_URL }}"
+            - name: CATENAX_PORTAL_BACKEND_DOMAIN
+              value: "{{ .Values.image.CATENAX_PORTAL_BACKEND_DOMAIN }}"
           ports:
             - name: http
               containerPort: {{ .Values.service.port }}
diff --git a/charts/traceability-foss-frontend/values-dev-test.yaml b/charts/traceability-foss-frontend/values-dev-test.yaml
@@ -3,6 +3,7 @@ image:
   tag: $ARGOCD_APP_REVISION
   CATENAX_PORTAL_API_URL: 'https://traceability-test.dev.demo.catena-x.net/api'
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp.dev.demo.catena-x.net/auth'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.net'
 
 nameOverride: "traceability-foss-test-frontend"
 fullnameOverride: "traceability-foss-test-frontend"
diff --git a/charts/traceability-foss-frontend/values-dev.yaml b/charts/traceability-foss-frontend/values-dev.yaml
@@ -2,6 +2,7 @@ image:
   tag: $ARGOCD_APP_REVISION
   CATENAX_PORTAL_API_URL: 'https://traceability.dev.demo.catena-x.net/api'
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp.dev.demo.catena-x.net/auth'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.net'
 
 ingress:
   enabled: true
diff --git a/charts/traceability-foss-frontend/values-int-test.yaml b/charts/traceability-foss-frontend/values-int-test.yaml
@@ -2,6 +2,7 @@ image:
   tag: $ARGOCD_APP_REVISION
   CATENAX_PORTAL_API_URL: 'https://traceability-test.int.demo.catena-x.net/api'
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp.int.demo.catena-x.net/auth'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.net'
 
 nameOverride: "traceability-foss-test-frontend"
 fullnameOverride: "traceability-foss-test-frontend"
diff --git a/charts/traceability-foss-frontend/values-int.yaml b/charts/traceability-foss-frontend/values-int.yaml
@@ -2,6 +2,7 @@ image:
   tag: $ARGOCD_APP_REVISION
   CATENAX_PORTAL_API_URL: 'https://traceability.int.demo.catena-x.net/api'
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp.int.demo.catena-x.net/auth'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.net'
 
 ingress:
   enabled: true
diff --git a/charts/traceability-foss-frontend/values-pen.yaml b/charts/traceability-foss-frontend/values-pen.yaml
@@ -2,6 +2,7 @@ image:
   tag: $ARGOCD_APP_REVISION
   CATENAX_PORTAL_API_URL: 'https://traceability-pen.dev.demo.catena-x.net/api'
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp-pen.dev.demo.catena-x.net/auth'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.net'
 
 # important to not conflict with dev env (both use same ArgoCD instance)
 namespace: product-traceability-foss-pen
diff --git a/charts/traceability-foss-frontend/values-pre-prod.yaml b/charts/traceability-foss-frontend/values-pre-prod.yaml
@@ -2,6 +2,7 @@ image:
   tag: $ARGOCD_APP_REVISION
   CATENAX_PORTAL_API_URL: 'https://traceability.pre-prod.demo.catena-x.net/api'
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp.pre-prod.demo.catena-x.net/auth'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.net'
 
 ingress:
   enabled: true
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -289,6 +289,7 @@ const ENV_VARS_MAPPING = {
   CATENAX_PORTAL_CLIENT_ID: 'clientId',
   CATENAX_PORTAL_API_URL: 'apiUrl',
   CATENAX_PORTAL_BASE_URL: 'baseUrl',
+  CATENAX_PORTAL_BACKEND_DOMAIN,
 };
 ```
 
@@ -304,6 +305,11 @@ This variable points to the desired api
 `CATENAX_PORTAL_BASE_URL`
 This variable is used to set the base path of the application. (Should be set if application runs as a subtopic)
 
+`CATENAX_PORTAL_BACKEND_DOMAIN`
+This variable is needed for security, to be more explicit, for the security headers of a request.  
+The domain of the corresponding backend should be used here.  
+An example value could be: `catena-x.net`
+
 ## Deployment
 
 The app is deployed on hotel budapest.
diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "version": "1.1.0",
   "scripts": {
     "analyze": "ng build --configuration=production --stats-json && webpack-bundle-analyzer dist/stats.json",
-    "build:prod": "ng build --configuration=production",
-    "build:prodDebug": "ng build --configuration=debugProd",
+    "build:prod": "ng build --configuration=debugProd --base-href /{baseHrefPlaceholder}/ --deploy-url /{baseHrefPlaceholder}/",
+    "build:prodDebug": "ng build --configuration=debugProd --base-href /{baseHrefPlaceholder}/ --deploy-url /{baseHrefPlaceholder}/",
     "format": "prettier --write \"src/**/*.{js,ts,json,md,css,scss,html}\"",
     "lint": "eslint --color --fix -c .eslintrc.js --ext .ts ./src/app",
     "ng": "ng",
diff --git a/scripts/custom-injector.sh b/scripts/custom-injector.sh
@@ -15,4 +15,5 @@
 # specific language governing permissions and limitations
 # under the License.
 
-node /docker-entrypoint.d/inject-dynamic-env.js
+node /docker-entrypoint.d/inject-dynamic-env.js
+node /docker-entrypoint.d/replace-base-href.js
diff --git a/scripts/replace-base-href.js b/scripts/replace-base-href.js
@@ -0,0 +1,47 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const fs = require('fs');
+
+const NGINX_CONF_PATH = '/etc/nginx/nginx.conf';
+const NGINX_SECURITY_CONF_PATH = '/etc/nginx/security-headers.conf';
+const HTML_PATH = '/usr/share/nginx/html/index.html';
+const RUNTIME_PATH = '/usr/share/nginx/html/runtime.js';
+
+const BASE_HREF_PLACEHOLDER_VAR = '/{baseHrefPlaceholder}';
+const BACKEND_DOMAIN_PLACEHOLDER_VAR = '{backendDomain}';
+
+const BASE_URL = process.env.CATENAX_PORTAL_BASE_URL || '';
+const BACKEND_DOMAIN = process.env.CATENAX_PORTAL_BACKEND_DOMAIN || '';
+
+const INDEX_HTML = fs.readFileSync(HTML_PATH, 'utf8');
+const INDEX_HTML_WITH_BASE = INDEX_HTML.split(BASE_HREF_PLACEHOLDER_VAR).join(BASE_URL);
+fs.writeFileSync(HTML_PATH, INDEX_HTML_WITH_BASE, 'utf8');
+
+const RUNTIME_JS = fs.readFileSync(RUNTIME_PATH, 'utf8');
+const RUNTIME_JS_WITH_BASE = RUNTIME_JS.split(BASE_HREF_PLACEHOLDER_VAR).join(BASE_URL);
+fs.writeFileSync(RUNTIME_PATH, RUNTIME_JS_WITH_BASE, 'utf8');
+
+const NGINX_CONF = fs.readFileSync(NGINX_CONF_PATH, 'utf8');
+const NGINX_CONF_WITH_BASE = NGINX_CONF.split(BASE_HREF_PLACEHOLDER_VAR).join(BASE_URL);
+fs.writeFileSync(NGINX_CONF_PATH, NGINX_CONF_WITH_BASE, 'utf8');
+
+const NGINX_SECURITY_CONF = fs.readFileSync(NGINX_SECURITY_CONF_PATH, 'utf8');
+const NGINX_SECURITY_CONF_WITH_DOMAIN = NGINX_SECURITY_CONF.split(BACKEND_DOMAIN_PLACEHOLDER_VAR).join(BACKEND_DOMAIN);
+fs.writeFileSync(NGINX_SECURITY_CONF_PATH, NGINX_SECURITY_CONF_WITH_DOMAIN, 'utf8');
diff --git a/src/index.html b/src/index.html
@@ -26,15 +26,15 @@
     <title>Trace-X UI</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
-    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5" />
-    <link rel="shortcut icon" href="/favicon/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/{baseHrefPlaceholder}/favicon/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/{baseHrefPlaceholder}/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/{baseHrefPlaceholder}/favicon/favicon-16x16.png" />
+    <link rel="mask-icon" href="/{baseHrefPlaceholder}/favicon/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="shortcut icon" href="/{baseHrefPlaceholder}/favicon/favicon.ico" />
     <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
+    <meta name="msapplication-config" content="/{baseHrefPlaceholder}/favicon/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="/{baseHrefPlaceholder}/manifest.json" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
   </head>
