Display HTTP errors

Dockerfile

@@ -1,6 +1,6 @@
 # syntax = docker/dockerfile:1.3
 
-FROM --platform=$BUILDPLATFORM node:18.16.0-alpine3.17 AS frontend-builder
+FROM --platform=$BUILDPLATFORM node:18.20.8-alpine3.21 AS frontend-builder
 #ENV NODE_OPTIONS=--openssl-legacy-provider
 RUN apk add autoconf automake libtool make tiff jpeg zlib zlib-dev pkgconf nasm file gcc musl-dev util-linux && yarn global add gatsby-cli && gatsby telemetry --disable
 WORKDIR /build
@@ -9,6 +9,7 @@ RUN npx browserslist@latest --update-db && yarn
 COPY frontend/. ./
 RUN yarn build
 
+#FROM alpine:3.23 AS backend
 FROM alpine:3.17 AS backend
 ENV PYTHONUNBUFFERED=1
 RUN apk add python3 py3-pip python3-dev gcc musl-dev libffi-dev make

backend/requirements.txt

@@ -1,7 +1,7 @@
 http-parser==0.9.0
-http-sfv==0.9.1
-pycryptodomex==3.10.1
-pynacl==1.4.0
+http-sfv==0.9.9
+pycryptodomex==3.23.0
+pynacl==1.5.0
 httpsigpy==0.0.8
-flask==3.0.2
+flask==3.1.3
 gunicorn==20.1.0

frontend/package.json

@@ -15,27 +15,27 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.0",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.6",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "bulma": "^0.9.2",
-    "gatsby": "^3.4.1",
-    "gatsby-plugin-image": "^1.5.0",
-    "gatsby-plugin-mdx": "^2.5.1",
-    "gatsby-plugin-react-helmet": "^4.5.0",
-    "gatsby-plugin-sass": "^4.5.0",
-    "gatsby-plugin-sharp": "^3.5.0",
-    "gatsby-source-filesystem": "^3.5.0",
-    "gatsby-transformer-sharp": "^3.5.0",
-    "react": "^17.0.1",
-    "react-bulma-components": "^4.0.4",
-    "react-dom": "^17.0.1",
+    "bulma": "^0.9.4",
+    "gatsby": "^3.15.0",
+    "gatsby-plugin-image": "^1.15.0",
+    "gatsby-plugin-mdx": "^2.15.0",
+    "gatsby-plugin-react-helmet": "^4.15.0",
+    "gatsby-plugin-sass": "^4.15.0",
+    "gatsby-plugin-sharp": "^3.15.0",
+    "gatsby-source-filesystem": "^3.15.0",
+    "gatsby-transformer-sharp": "^3.15.0",
+    "react": "^17.0.2",
+    "react-bulma-components": "^4.1.0",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-moment": "^1.1.1",
-    "sass": "^1.32.13",
-    "structured-field-values": "^1.0.0"
+    "react-moment": "^1.2.2",
+    "sass": "^1.99.0",
+    "structured-field-values": "^1.1.0"
   }
 }

frontend/src/pages/index.js

@@ -11,7 +11,7 @@ import { faJava, faJs, faNodeJs, faGolang, faPhp, faPython, faRust, faSquareGith
 
 
 
-import { Button, ButtonGroup, Tabs, Container, Section, Level, Form, Columns, Content, Heading, Box, Icon, Tag, TagGroup, Hero, Tile, Card } from 'react-bulma-components';
+import { Button, ButtonGroup, Tabs, Container, Section, Level, Form, Columns, Content, Heading, Box, Icon, Tag, TagGroup, Hero, Tile, Card, Notification } from 'react-bulma-components';
 
 //const api = 'https://grb8qjtvye.execute-api.us-east-1.amazonaws.com/dev' // bspk test
 //const api = 'https://o52ky0nc31.execute-api.ca-central-1.amazonaws.com/dev' // secureKey install
@@ -394,7 +394,11 @@ Signature: sig=:SfHwLLMHetROs/nmZoKFbxwJhlgVt5pwWc0Ag7yuDfTxB1RaX8x\\
       if (response.ok) {
         return response.json();
       } else {
-        throw new Error(response.json()['error']);
+        return response.json().then(data => {
+          const message = data && data['error'] ? data['error'] : `HTTP ${response.status}`;
+          console.error('Backend error:', message);
+          throw new Error(message);
+        });
       }
     }).then(data => {
       var components = data['components'];
@@ -594,9 +598,13 @@ Signature: sig=:SfHwLLMHetROs/nmZoKFbxwJhlgVt5pwWc0Ag7yuDfTxB1RaX8x\\
       body: JSON.stringify(body)
     }).then(response => {
       if (response.ok) {
-        return response.json()
+        return response.json();
       } else {
-        throw new Error(response.json()['error']);
+        return response.json().then(data => {
+          const message = data && data['error'] ? data['error'] : `HTTP ${response.status}`;
+          console.error('Backend error:', message);
+          throw new Error(message);
+        });
       }
     }).then(data => {
       this.setState({
@@ -631,12 +639,15 @@ Signature: sig=:SfHwLLMHetROs/nmZoKFbxwJhlgVt5pwWc0Ag7yuDfTxB1RaX8x\\
       var sigCovered = sig['coveredComponents'];
       // collect covered components
       var coveredComponents = [];
-      var avail = this.state.availableComponents;
+      var availCompos = this.state.availableComponents;
+      var missingCompos = [];//components covered by the signature but missing in the HTTP message
       sigCovered.forEach(c => {
-        console.log(avail);
-        console.log(c);
-        var comp = avail[c['id']].find(x => x['cid'] === c['cid']);
-        coveredComponents.push(comp);
+        var comp = availCompos[c['id']]?.find(x => x['cid'] === c['cid']);
+        if (comp) {
+          coveredComponents.push(comp);
+        } else {
+          missingCompos.push(c['cid'] || c['id']);
+        }
       });
       var alg = sig['params']['alg'];
       var created = sig['params']['created'];
@@ -650,7 +661,8 @@ Signature: sig=:SfHwLLMHetROs/nmZoKFbxwJhlgVt5pwWc0Ag7yuDfTxB1RaX8x\\
         expires: expires,
         keyid: keyid,
         existingSignature: sel,
-        verifySignature: sel
+        verifySignature: sel,
+        error: missingCompos.length ? `Signature "${sel}" covers components not present in the parsed message: ${missingCompos.join(', ')}.` : undefined
       });
     } else {
       this.setState({
@@ -899,7 +911,11 @@ MCowBQYDK2VwAyEAJrQLj5P/89iXES9+vFgrIy29clF9CC/oPPsw3c5D0bs=
       if (response.ok) {
         return response.json();
       } else {
-        throw new Error(response.json()['error']);
+        return response.json().then(data => {
+          const message = data && data['error'] ? data['error'] : `HTTP ${response.status}`;
+          console.error('Backend error:', message);
+          throw new Error(message);
+        });
       }
     }).then(data => {
       this.setState({
@@ -960,7 +976,11 @@ MCowBQYDK2VwAyEAJrQLj5P/89iXES9+vFgrIy29clF9CC/oPPsw3c5D0bs=
       if (response.ok) {
         return response.json();
       } else {
-        throw new Error(response.json()['error']);
+        return response.json().then(data => {
+          const message = data && data['error'] ? data['error'] : `HTTP ${response.status}`;
+          console.error('Backend error:', message);
+          throw new Error(message);
+        });
       }
     }).then(data => {
       this.setState({
@@ -1018,13 +1038,10 @@ MCowBQYDK2VwAyEAJrQLj5P/89iXES9+vFgrIy29clF9CC/oPPsw3c5D0bs=
       </Heading>
 
       {this.state.error && (
-        <Box id="input" color="danger">
-        <Hero color="danger">
-          <Hero.Header>Error</Hero.Header>
-          <Hero.Body>{this.state.error}</Hero.Body>
-          <Hero.Footer><Button onClick={this.clearError}>Close</Button></Hero.Footer>
-        </Hero>
-        </Box>
+        <Notification color="danger">
+          <button className="delete" aria-label="delete" onClick={this.clearError} />
+          <strong>Error:</strong> {this.state.error}
+        </Notification>
       )}
       {this.props.stage === 'input' && (
         <Box id="input">