Documentation and Cros Proxy option

.env

@@ -1 +1,3 @@
-GENERATE_SOURCEMAP=false
+GENERATE_SOURCEMAP=false
+# REACT_APP_CORS_PROXY=https://corsproxy.io/?url=
+# REACT_APP_BASENAME=/

SETUP.md

@@ -16,10 +16,73 @@ To run the software in local run:
 
 After the initialization the page will be available to http://localhost:3000
 
-### Note:
-To run every functionality of the software in local environment you need to install any browser plug-in that suppresses CORS such as "CORS Everywere" for Firefox. 
 
-## Build
-To build the project to HTML run the following command:
+## Build and deploy
+
+### Page options
+In the .env file there are two option that can be optionally set: 
+```
+# REACT_APP_CORS_PROXY=https://corsproxy.io/?url=
+# REACT_APP_BASENAME=/
+```
+
+- REACT_APP_CORS_PROXY: sets an url of a service that provide proxy suppression.
+- REACT_APP_BASENAME: sets a base name if the page in not served under '/' .
+
+### Build
+To build the project to an HTML optimized version run the following command:
 
 > npm run build
+
+A directory named "build" will be created containing a web page that can be hosted from a web server like Nginx or similar.
+
+### Host with Nginx
+After the Nginx, the domain and certificates setup you need to determinate where the page HTML files needs to be copied.
+You can find the path searching for the configuration contained in /etc/nginx/sites-enabled/ where the filename matches your domain.
+You will find the html path under the "root" option like this example:
+
+```
+server {
+        listen 80;
+        listen [::]:80;
+
+        root /var/www/your_domain/html;
+        index index.html index.htm index.nginx-debian.html;
+
+        server_name your_domain www.your_domain;
+
+        location / {
+                try_files $uri $uri/ =404;
+        }
+}
+```
+
+You can copy the content of the directory "build" inside the html one.
+
+## CORS restriction
+To run every the app without cors restriction you have two possibilities: one is to install any browser plug-in that suppresses CORS such as "CORS Everywere" for Firefox or use a self hosted or remote cors proxy server.
+
+### Nginx as a Forwarder Proxy
+Nginx can be used as a forward proxy on the same host using adding a server or a route that handle the traffic.
+Below you can find an example of configuration that exposes the port 8888 to proxy the traffic.
+```
+server {
+    listen 8888;
+
+    location / {
+        resolver 8.8.8.8;
+
+        proxy_pass $arg_url;
+    }
+}
+```
+
+An example url of proxied GET request using this configuration:
+> localhost:8888?url=https://oidc.registry.servizicie.interno.gov.it/.well-known/openid-federation
+
+### A self hosted service
+A simple self hosted proxy can be also used like the one contained in the bin directary that can be launched using the command:
+> npm run proxy
+
+### A third party service
+There are other third party service on-line that can be used to proxy the request like corsproxy.io or corsmirror.com that can be used valoraizing the variiable 'REACT_APP_CORS_PROXY' in .env .

bin/proxy.js

@@ -0,0 +1,27 @@
+const express = require('express');
+const axios = require('axios');
+
+const app = express();
+const port = 3000;
+
+app.get('/proxy', (req, res) => {
+    if (
+        !req.query.url ||
+        !req.query.url.startsWith('https://') || 
+        req.query.url.includes('localhost') || 
+        req.query.url.match(/(\d{1,3}\.){3}\d{1,3}/)
+
+    ) {
+        res.send('Please provide a valid url').status(400);
+        return;
+    }
+
+    axios.get(req.query.url)
+        .then(response => res.send(response.data))
+        .catch(error => res.send(error));
+});
+
+app.listen(
+    port, 
+    () => console.log(`Proxy listening on port ${port}`)
+);

package.json

@@ -11,6 +11,7 @@
     "@types/react-dom": "^18.3.1",
     "axios": "^1.7.7",
     "bootstrap-italia": "^2.11.0",
+    "express": "^4.21.2",
     "formatjs": "^0.1.1",
     "jose": "^5.9.6",
     "react": "^18.3.1",
@@ -34,7 +35,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "test-lib": "jest ./src/lib",
-    "lint": "npx prettier . --write"
+    "lint": "npx prettier . --write",
+    "proxy": "node bin/proxy.js"
   },
   "eslintConfig": {
     "plugins": ["no-secrets"],

src/index.tsx

@@ -10,7 +10,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <Router>
+    <Router basename={process.env.REACT_APP_BASENAME}>
       <App />
     </Router>
   </React.StrictMode>,

src/lib/openid-federation/trustChain.ts

@@ -18,13 +18,15 @@ import { Graph } from "../grap-data/types";
 import { updateGraph, genNode } from "../grap-data/utils";
 import { setEntityType } from "./utils";
 
+const cors_proxy = process.env.REACT_APP_CORS_PROXY || "";
+
 const getSubordinateStatement = async (
   fetchEndpoint: string,
   sub: string,
   ec: EntityConfiguration,
 ): Promise<SubordianteStatement> => {
   const completeFetchEndpoint = `${fetchEndpoint}?sub=${sub}`;
-  const response = await axios.get(completeFetchEndpoint);
+  const response = await axios.get(cors_proxy + completeFetchEndpoint);
   const payload = jose.decodeJwt(response.data) as SubordinateStatementPayload;
   const header = jose.decodeProtectedHeader(response.data) as JWTHeader;
 
@@ -47,7 +49,7 @@ const getEntityConfigurations = async (
 ): Promise<EntityConfiguration> => {
   const subjectWellKnown = subject.endsWith("/") ? subject : subject + "/";
 
-  const { data: jwt } = await axios.get(subjectWellKnown + wellKnownEndpoint);
+  const { data: jwt } = await axios.get(cors_proxy + subjectWellKnown + wellKnownEndpoint);
 
   const header = jose.decodeProtectedHeader(jwt) as JWTHeader;
   const payload = jose.decodeJwt(jwt) as EntityConfigurationPayload;
@@ -77,7 +79,7 @@ export const discovery = async (currenECUrl: string): Promise<NodeInfo> => {
   };
 
   if (federationListEndpoint) {
-    const response = await axios.get(federationListEndpoint);
+    const response = await axios.get(cors_proxy + federationListEndpoint);
     nodeInfo.immDependants = response.data;
   }
 

src/lib/openid-federation/utils.ts

@@ -1,5 +1,4 @@
 import * as jose from "jose";
-import { Tree } from "@easygrating/easytree";
 import { NodeInfo, EntityConfigurationPayload, EntityType } from "./types";
 
 export const jsonToPublicKey = (jwk: { [key: string]: any }) => {
@@ -27,8 +26,6 @@ export const jsonToPublicKey = (jwk: { [key: string]: any }) => {
   throw new Error(`Unsupported key type ${jwk.kty}`);
 };
 
-export const getTreeRoot = (tree: Tree<NodeInfo>): Tree<NodeInfo> =>
-  tree.parent ? getTreeRoot(tree.parent) : tree;
 export const getFetchEndpoint = (payload: EntityConfigurationPayload) =>
   payload.metadata?.federation_entity?.federation_fetch_endpoint;
 export const hasFetchEndpoint = (payload: EntityConfigurationPayload) =>