ftr: add context route support for fe application

fbedarf · fbedarf · commit f0cd2148a06d · 2023-02-03T09:07:51.000+01:00
TRACEFOSS-565
diff --git a/Dockerfile b/Dockerfile
@@ -37,9 +37,15 @@ 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/
 
-# Validate NGINX configuration
-RUN nginx -t
+USER root
+RUN chown nginx:nginx /etc/nginx/nginx.conf
+RUN chown nginx:nginx /etc/nginx/security-headers.conf
diff --git a/INSTALL.md b/INSTALL.md
@@ -18,6 +18,7 @@ const ENV_VARS_MAPPING = {
   CATENAX_PORTAL_REALM_LOGO: 'realmLogo',
   CATENAX_PORTAL_API_URL: 'apiUrl',
   CATENAX_PORTAL_BASE_URL: 'baseUrl',
+  CATENAX_PORTAL_BACKEND_DOMAIN,
 };
 ```
 
@@ -39,10 +40,15 @@ 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.com`
+
 ### Example command:
 
 ```shell
-$ docker run -d -p 4200:8080 -e CATENAX_PORTAL_DEFAULT_REALM=TEST ${dockerImage}
+$ docker run -d -p 4200:8080 -e CATENAX_PORTAL_BASE_URL=/example -e CATENAX_PORTAL_BACKEND_DOMAIN=catena-x.net ${dockerImage}
 ```
 
 #### `Docker run`
@@ -57,7 +63,7 @@ To start a container in detached mode, you use `-d=true` or just `-d` option. By
 
 To expose a container’s internal port, an operator can start the container with the `-P` or `-p` flag. The exposed port is accessible on the host and the ports are available to any client that can reach the host.
 
-#### `-e CATENAX_PORTAL_DEFAULT_REALM=TEST`
+#### `-e ***`
 
 The operator can set any environment variable in the container by using one or more `-e` flags, even overriding already defined flags by the developer with a Dockerfile `ENV`.
 
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/product-traceability-foss-frontend/templates/deployment.yaml b/charts/product-traceability-foss-frontend/templates/deployment.yaml
@@ -51,6 +51,12 @@ spec:
               value: "{{ .Values.image.CATENAX_PORTAL_CLIENT_ID }}"
             - name: CATENAX_PORTAL_DEFAULT_REALM
               value: "{{ .Values.image.CATENAX_PORTAL_DEFAULT_REALM }}"
+            - name: CATENAX_PORTAL_BASE_URL
+              value: "{{ .Values.image.CATENAX_PORTAL_BASE_URL }}"
+            - name: CATENAX_PORTAL_REALM_LOGO
+              value: "{{ .Values.image.CATENAX_PORTAL_REALM_LOGO }}"
+            - name: CATENAX_PORTAL_BACKEND_DOMAIN
+              value: "{{ .Values.image.CATENAX_PORTAL_BACKEND_DOMAIN }}"
           ports:
             - name: http
               containerPort: {{ .Values.service.port }}
@@ -76,4 +82,4 @@ spec:
       {{- with .Values.tolerations }}
       tolerations:
         {{- toYaml . | nindent 8 }}
-      {{- end }}
+      {{- end }}
diff --git a/charts/product-traceability-foss-frontend/values-dev-test.yaml b/charts/product-traceability-foss-frontend/values-dev-test.yaml
@@ -5,6 +5,7 @@ image:
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp.dev.demo.catena-x.net/auth'
   CATENAX_PORTAL_CLIENT_ID: 'Cl17-CX-Part'
   CATENAX_PORTAL_DEFAULT_REALM: 'CX-Central'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.com'
 
 nameOverride: "product-traceability-foss-test-frontend"
 fullnameOverride: "product-traceability-foss-test-frontend"
diff --git a/charts/product-traceability-foss-frontend/values-dev.yaml b/charts/product-traceability-foss-frontend/values-dev.yaml
@@ -4,6 +4,7 @@ image:
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp.dev.demo.catena-x.net/auth'
   CATENAX_PORTAL_CLIENT_ID: 'Cl17-CX-Part'
   CATENAX_PORTAL_DEFAULT_REALM: 'CX-Central'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.com'
 
 autoscaling:
   enabled: false
diff --git a/charts/product-traceability-foss-frontend/values-int-test.yaml b/charts/product-traceability-foss-frontend/values-int-test.yaml
@@ -4,6 +4,7 @@ image:
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp.int.demo.catena-x.net/auth'
   CATENAX_PORTAL_CLIENT_ID: 'Cl17-CX-Part'
   CATENAX_PORTAL_DEFAULT_REALM: 'CX-Central'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.com'
 
 nameOverride: "product-traceability-foss-test-frontend"
 fullnameOverride: "product-traceability-foss-test-frontend"
diff --git a/charts/product-traceability-foss-frontend/values-int.yaml b/charts/product-traceability-foss-frontend/values-int.yaml
@@ -4,6 +4,7 @@ image:
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp.int.demo.catena-x.net/auth'
   CATENAX_PORTAL_CLIENT_ID: 'Cl17-CX-Part'
   CATENAX_PORTAL_DEFAULT_REALM: 'CX-Central'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.com'
 
 autoscaling:
   enabled: false
diff --git a/charts/product-traceability-foss-frontend/values-pen.yaml b/charts/product-traceability-foss-frontend/values-pen.yaml
@@ -4,6 +4,7 @@ image:
   CATENAX_PORTAL_KEYCLOAK_URL: 'https://centralidp-pen.dev.demo.catena-x.net/auth'
   CATENAX_PORTAL_CLIENT_ID: 'Cl17-CX-Part'
   CATENAX_PORTAL_DEFAULT_REALM: 'CX-Central'
+  CATENAX_PORTAL_BACKEND_DOMAIN: 'catena-x.com'
 
 # important to not conflict with dev env (both use same ArgoCD instance)
 namespace: product-traceability-foss-pen
diff --git a/cypress/docker-compose.yml b/cypress/docker-compose.yml
@@ -9,6 +9,5 @@ services:
       - /ng-app/node_modules/ # we don't want to override it by host machine
     network_mode: host # important to be able to connect to localhost url on host machine
 
-
 networks:
  TRACE_X_FE:
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -292,6 +292,7 @@ const ENV_VARS_MAPPING = {
   CATENAX_PORTAL_REALM_LOGO: 'realmLogo',
   CATENAX_PORTAL_API_URL: 'apiUrl',
   CATENAX_PORTAL_BASE_URL: 'baseUrl',
+  CATENAX_PORTAL_BACKEND_DOMAIN,
 };
 ```
 
@@ -313,6 +314,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.com`
+
 ## Deployment
 
 The app is deployed on hotel budapest.
diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "version": "1.0.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/app/modules/core/api/api.service.properties.ts b/src/app/modules/core/api/api.service.properties.ts
@@ -23,6 +23,3 @@ import { environment } from '@env';
 
 export const realmLogo = environment.realmLogo;
 export const defaultRealm = environment.defaultRealm;
-
-export /** @type {*} */
-const realm: string = new RegExp(environment.realmRegExp).exec(window.location.href)?.[1] || defaultRealm;
diff --git a/src/app/modules/core/core.routing.ts b/src/app/modules/core/core.routing.ts
@@ -23,7 +23,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { LayoutComponent } from '@layout/layout/layout.component';
 import { PageNotFoundComponent } from '@page/page-not-found/presentation/page-not-found.component';
-import { defaultRealm, realm } from './api/api.service.properties';
+import { defaultRealm } from './api/api.service.properties';
 import { AuthGuard } from './auth/auth.guard';
 
 export /** @type {*} */
@@ -34,7 +34,7 @@ const routes: Routes = [
     pathMatch: 'full',
   },
   {
-    path: realm || defaultRealm,
+    path: defaultRealm,
     component: LayoutComponent,
     canActivate: [AuthGuard],
     data: { breadcrumb: 'home' },
diff --git a/src/app/modules/core/layout/nav-bar/nav-bar.component.ts b/src/app/modules/core/layout/nav-bar/nav-bar.component.ts
@@ -21,7 +21,7 @@
 
 import { Component, HostListener } from '@angular/core';
 import { Router } from '@angular/router';
-import { realm, realmLogo as _realmLogo } from 'src/app/modules/core/api/api.service.properties';
+import { defaultRealm, realmLogo as _realmLogo } from 'src/app/modules/core/api/api.service.properties';
 import { LayoutFacade } from 'src/app/modules/shared/abstraction/layout-facade';
 
 @Component({
@@ -36,7 +36,7 @@ export class NavBarComponent {
   public userDetails = { name: '', email: '', role: '' };
 
   constructor(private readonly layoutFacade: LayoutFacade, private readonly router: Router) {
-    this.userInitials = this.layoutFacade.realmName;
+    this.userInitials = this.layoutFacade.realName;
     this.userDetails = this.layoutFacade.userInformation;
   }
 
@@ -52,7 +52,7 @@ export class NavBarComponent {
   }
 
   public navigateToHome(): void {
-    this.router.navigate([`/${realm}`]).then();
+    this.router.navigate([`/${defaultRealm}`]).then();
   }
 
   @HostListener('window:click', [])
diff --git a/src/app/modules/core/user/role.guard.ts b/src/app/modules/core/user/role.guard.ts
@@ -31,7 +31,7 @@ import {
   UrlTree,
 } from '@angular/router';
 import { Observable } from 'rxjs';
-import { realm } from '../api/api.service.properties';
+import { defaultRealm } from '../api/api.service.properties';
 import { Role } from './role.model';
 import { RoleService } from './role.service';
 
@@ -66,7 +66,7 @@ export class RoleGuard implements CanActivate, CanActivateChild, CanDeactivate<u
       return true;
     }
 
-    void this.router.navigate([realm]);
+    void this.router.navigate([defaultRealm]);
     return false;
   }
 }
diff --git a/src/app/modules/page/about/about-route.ts b/src/app/modules/page/about/about-route.ts
@@ -19,11 +19,11 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { realm } from '@core/api/api.service.properties';
+import { defaultRealm } from '@core/api/api.service.properties';
 import { PageRoute } from '@shared/model/page-route.model';
 
 export const ABOUT_BASE_ROUTE = 'about';
 
 export const getAboutRoute = (): PageRoute => ({
-  link: `${realm}/${ABOUT_BASE_ROUTE}`,
+  link: `${defaultRealm}/${ABOUT_BASE_ROUTE}`,
 });
diff --git a/src/app/modules/page/admin/admin-route.ts b/src/app/modules/page/admin/admin-route.ts
@@ -19,11 +19,11 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { realm } from '@core/api/api.service.properties';
+import { defaultRealm } from '@core/api/api.service.properties';
 import { PageRoute } from '@shared/model/page-route.model';
 
 export const ADMIN_BASE_ROUTE = 'admin';
 
 export const getAdminRoute = (): PageRoute => ({
-  link: `${realm}/${ADMIN_BASE_ROUTE}`,
+  link: `${defaultRealm}/${ADMIN_BASE_ROUTE}`,
 });
diff --git a/src/app/modules/page/dashboard/dashboard-route.ts b/src/app/modules/page/dashboard/dashboard-route.ts
@@ -19,11 +19,11 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { realm } from '@core/api/api.service.properties';
+import { defaultRealm } from '@core/api/api.service.properties';
 import { PageRoute } from '@shared/model/page-route.model';
 
 export const DASHBOARD_BASE_ROUTE = 'dashboard';
 
 export const getDashboardRoute = (): PageRoute => ({
-  link: `${realm}/${DASHBOARD_BASE_ROUTE}`,
+  link: `${defaultRealm}/${DASHBOARD_BASE_ROUTE}`,
 });
diff --git a/src/app/modules/page/investigations/investigations-external-route.ts b/src/app/modules/page/investigations/investigations-external-route.ts
@@ -19,14 +19,14 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { realm } from '@core/api/api.service.properties';
+import { defaultRealm } from '@core/api/api.service.properties';
 import { NotificationStatusGroup } from '@shared/model/notification.model';
 import { PageRoute } from '@shared/model/page-route.model';
 
 export const INVESTIGATION_BASE_ROUTE = 'investigations';
 
 export const getInvestigationInboxRoute = (investigationStatusGroup?: NotificationStatusGroup): PageRoute => ({
-  link: `${realm}/${INVESTIGATION_BASE_ROUTE}`,
+  link: `${defaultRealm}/${INVESTIGATION_BASE_ROUTE}`,
   queryParams: investigationStatusGroup
     ? {
         tabIndex: String(Object.values(NotificationStatusGroup).indexOf(investigationStatusGroup)),
diff --git a/src/app/modules/page/other-parts/other-parts-route.ts b/src/app/modules/page/other-parts/other-parts-route.ts
@@ -19,11 +19,11 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { realm } from '@core/api/api.service.properties';
+import { defaultRealm } from '@core/api/api.service.properties';
 import { PageRoute } from '@shared/model/page-route.model';
 
 export const OTHER_PARTS_BASE_ROUTE = 'otherParts';
 
 export const getOtherPartsRoute = (): PageRoute => ({
-  link: `${realm}/${OTHER_PARTS_BASE_ROUTE}`,
+  link: `${defaultRealm}/${OTHER_PARTS_BASE_ROUTE}`,
 });
diff --git a/src/app/modules/page/parts/parts-route.ts b/src/app/modules/page/parts/parts-route.ts
@@ -19,11 +19,11 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { realm } from '@core/api/api.service.properties';
+import { defaultRealm } from '@core/api/api.service.properties';
 import { PageRoute } from '@shared/model/page-route.model';
 
 export const PARTS_BASE_ROUTE = 'parts';
 
 export const getPartsRoute = (): PageRoute => ({
-  link: `${realm}/${PARTS_BASE_ROUTE}`,
+  link: `${defaultRealm}/${PARTS_BASE_ROUTE}`,
 });
diff --git a/src/app/modules/shared/abstraction/layout-facade.ts b/src/app/modules/shared/abstraction/layout-facade.ts
diff --git a/src/app/modules/shared/modules/part-details/presentation/part-detail.component.ts b/src/app/modules/shared/modules/part-details/presentation/part-detail.component.ts
diff --git a/src/index.html b/src/index.html
