From 1184eb13f0bbe4768bf3dbd6cd31adf10c6c8dfe Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Fri, 22 Apr 2022 00:53:48 +0200
Subject: feat: Certificate viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show certificates with an interface modeled after firefox's certificate
viewer so that they can be inspected before trusting.

The current implementation assumes that each certificate has a unique
fingerprint (collisions are astronomically unlikely).

Signed-off-by: Kristóf Marussy <kristof@marussy.com>
---
 .../components/errorPage/CertificateDetails.tsx    | 136 ++++++--
 .../errorPage/SingleCertificateDetails.tsx         | 369 +++++++++++++++++++++
 .../errorPage/TrustCertificateDialog.tsx           |  57 ++++
 packages/renderer/src/stores/Service.ts            |   6 +
 4 files changed, 547 insertions(+), 21 deletions(-)
 create mode 100644 packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx
 create mode 100644 packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx

(limited to 'packages/renderer')

diff --git a/packages/renderer/src/components/errorPage/CertificateDetails.tsx b/packages/renderer/src/components/errorPage/CertificateDetails.tsx
index 044cb5c..51e7920 100644
--- a/packages/renderer/src/components/errorPage/CertificateDetails.tsx
+++ b/packages/renderer/src/components/errorPage/CertificateDetails.tsx
@@ -19,22 +19,41 @@
  */
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import Accordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import type { Certificate } from '@sophie/shared';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type Service from '../../stores/Service';
 
+import SingleCertificateDetails from './SingleCertificateDetails';
+import TrustCertificateDialog from './TrustCertificateDialog';
+
 const SUMMARY_ID = 'Sophie-CertificateDetails-header';
 const DETAILS_ID = 'Sophie-CertificateDetails-content';
 
+function getCertificateChain(endEntityCertificate: Certificate): Certificate[] {
+  const chain: Certificate[] = [];
+  let certificate: Certificate | undefined = endEntityCertificate;
+  while (certificate !== undefined) {
+    chain.push(certificate);
+    certificate = certificate.issuerCert as Certificate;
+  }
+  return chain;
+}
+
+const DetailsBox = styled(Box)(({ theme }) => ({
+  padding: `0 ${theme.spacing(2)}`,
+}));
+
 function CertificateDetails({
   service,
 }: {
@@ -43,8 +62,9 @@ function CertificateDetails({
   const { t } = useTranslation(undefined, {
     keyPrefix: 'error.certificateError.details',
   });
+  const [certificateIndex, setCertificateIndex] = useState(0);
 
-  const { state } = service;
+  const { id: serviceId, state } = service;
   const { type: errorType } = state;
 
   if (errorType !== 'certificateError') {
@@ -54,6 +74,22 @@ function CertificateDetails({
 
   const { certificate, trust } = state;
 
+  const chain = getCertificateChain(certificate);
+
+  if (chain.length === 0) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  const id = `${serviceId}-certificateDetails`;
+
+  const trustCertificateDialog = (
+    <TrustCertificateDialog
+      trust={trust}
+      onClick={() => service.temporarilyTrustCurrentCertificate()}
+    />
+  );
+
   return (
     <Accordion
       disableGutters
@@ -67,23 +103,81 @@ function CertificateDetails({
       >
         <Typography>{t('title')}</Typography>
       </AccordionSummary>
-      <AccordionDetails>
-        <Typography sx={{ wordWrap: 'break-word' }}>
-          {JSON.stringify(certificate)}
-        </Typography>
-        <Typography mt={2}>
-          <WarningAmberIcon fontSize="small" /> <strong>{t('warning')}</strong>
-        </Typography>
-        <Box mt={1}>
-          <Button
-            disabled={trust !== 'pending'}
-            onClick={() => service.temporarilyTrustCurrentCertificate()}
-            color="error"
-            variant="outlined"
-          >
-            {t(`acceptButton.${trust}`)}
-          </Button>
-        </Box>
+      <AccordionDetails
+        sx={{
+          px: 0,
+          pt: 0,
+        }}
+      >
+        {chain.length >= 2 ? (
+          <>
+            <Tabs
+              aria-label={t<string>('tabsLabel')}
+              value={certificateIndex < chain.length ? certificateIndex : false}
+              onChange={(_event, value) => setCertificateIndex(value as number)}
+              variant="fullWidth"
+            >
+              {chain.map((member, i) => (
+                <Tab
+                  key={member.fingerprint}
+                  value={i}
+                  id={`${id}-tab-${i}`}
+                  aria-controls={`${id}-tabpanel-${i}`}
+                  label={
+                    member.subjectName === ''
+                      ? member.fingerprint
+                      : member.subjectName
+                  }
+                />
+              ))}
+            </Tabs>
+            <DetailsBox
+              sx={(theme) => ({
+                paddingTop: 1,
+                borderTop: `1px solid ${theme.palette.divider}`,
+              })}
+            >
+              {chain.map((member, i) => (
+                <div
+                  key={member.fingerprint}
+                  role="tabpanel"
+                  hidden={certificateIndex !== i}
+                  id={`${id}-tabpanel-${i}`}
+                  aria-labelledby={`${id}-tab-${i}`}
+                >
+                  {certificateIndex === i && (
+                    <>
+                      <SingleCertificateDetails
+                        detailsId={id}
+                        certificate={member}
+                        onIssuerClick={
+                          i < chain.length - 1
+                            ? () => setCertificateIndex(i + 1)
+                            : undefined
+                        }
+                        onDownloadClick={() =>
+                          service.downloadCertificate(member.fingerprint)
+                        }
+                      />
+                      {i === 0 && trustCertificateDialog}
+                    </>
+                  )}
+                </div>
+              ))}
+            </DetailsBox>
+          </>
+        ) : (
+          <DetailsBox>
+            <SingleCertificateDetails
+              detailsId={id}
+              certificate={chain[0]}
+              onDownloadClick={() =>
+                service.downloadCertificate(chain[0].fingerprint)
+              }
+            />
+            {trustCertificateDialog}
+          </DetailsBox>
+        )}
       </AccordionDetails>
     </Accordion>
   );
diff --git a/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx b/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx
new file mode 100644
index 0000000..107d9f1
--- /dev/null
+++ b/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx
@@ -0,0 +1,369 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import AttachmentIcon from '@mui/icons-material/Attachment';
+import Link from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
+import type { Certificate, CertificatePrincipal } from '@sophie/shared';
+import type { TFunction } from 'i18next';
+import { observer } from 'mobx-react-lite';
+import React, { type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const SingleCertificateDetailsRoot = styled('table')(({ theme }) => ({
+  width: '100%',
+  borderSpacing: `${theme.spacing(2)} 0`,
+}));
+
+const Header = styled('th')({
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  verticalAlign: 'top',
+});
+
+const SectionHeader = styled(Header)(({ theme }) => ({
+  padding: `${theme.spacing(2)} 0`,
+}));
+
+const SubHeader = styled(Header)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+}));
+
+const Cell = styled('td')({
+  verticalAlign: 'top',
+});
+
+function Section({ id, label }: { id: string; label: string }): JSX.Element {
+  return (
+    <tr>
+      <SectionHeader id={id} scope="colgroup">
+        {label}
+      </SectionHeader>
+      <Cell aria-hidden="true" />
+    </tr>
+  );
+}
+
+function Row({
+  id,
+  label,
+  headers,
+  children,
+}: {
+  id: string;
+  label: string;
+  headers: string;
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <tr>
+      <SubHeader id={id} scope="row">
+        {label}
+      </SubHeader>
+      <Cell headers={`${headers} ${id}`}>{children}</Cell>
+    </tr>
+  );
+}
+
+function OptionalRow({
+  id,
+  label,
+  value,
+  headers,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  headers: string;
+}): JSX.Element | null {
+  if (value === '') {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  return (
+    <Row id={id} label={label} headers={headers}>
+      {value}
+    </Row>
+  );
+}
+
+function DateTimeRow({
+  id,
+  label,
+  value,
+  locales,
+  headers,
+}: {
+  id: string;
+  label: string;
+  value: number;
+  locales: readonly string[];
+  headers: string;
+}): JSX.Element {
+  // Electron provides `validStart` and `validExpiry` in seconds,
+  // but `Date` expects milliseconds.
+  const date = new Date(value * 1000);
+  const dateStr = new Intl.DateTimeFormat([...locales], {
+    dateStyle: 'long',
+    timeStyle: 'long',
+  }).format(date);
+
+  return (
+    <Row id={id} label={label} headers={headers}>
+      {dateStr}
+    </Row>
+  );
+}
+
+function Principal({
+  id,
+  label,
+  principal: {
+    country,
+    state,
+    locality,
+    organizations,
+    organizationUnits,
+    commonName,
+  },
+  t,
+  onIssuerClick,
+}: {
+  id: string;
+  label: string;
+  principal: CertificatePrincipal;
+  t: TFunction;
+  onIssuerClick?: (() => void) | undefined;
+}): JSX.Element {
+  return (
+    <>
+      <Section id={id} label={label} />
+      <OptionalRow
+        id={`${id}-country`}
+        label={t<string>('country')}
+        value={country}
+        headers={id}
+      />
+      <OptionalRow
+        id={`${id}-state`}
+        label={t<string>('state')}
+        value={state}
+        headers={id}
+      />
+      <OptionalRow
+        id={`${id}-locality`}
+        label={t<string>('locality')}
+        value={locality}
+        headers={id}
+      />
+      {/*
+        eslint-disable react/no-array-index-key --
+        These entries can freely contain repetitions, so we can only tell them apart by index.
+      */}
+      {organizations.map((value, i) => (
+        <OptionalRow
+          key={i}
+          id={`${id}-organization-${i}`}
+          label={t<string>('organization')}
+          value={value}
+          headers={id}
+        />
+      ))}
+      {organizationUnits.map((value, i) => (
+        <OptionalRow
+          key={i}
+          id={`${id}-organizationUnit-${i}`}
+          label={t<string>('organizationUnit')}
+          value={value}
+          headers={id}
+        />
+      ))}
+      {/* eslint-enable react/no-array-index-key */}
+      {commonName !== '' && (
+        <Row
+          id={`${id}-commonName`}
+          label={t<string>('commonName')}
+          headers={id}
+        >
+          {onIssuerClick === undefined ? (
+            commonName
+          ) : (
+            // eslint-disable-next-line jsx-a11y/anchor-is-valid -- This is a `button`.
+            <Link
+              component="button"
+              variant="body1"
+              onClick={onIssuerClick}
+              sx={{ verticalAlign: 'baseline' }}
+            >
+              {commonName}
+            </Link>
+          )}
+        </Row>
+      )}
+    </>
+  );
+}
+
+Principal.defaultProps = {
+  onIssuerClick: undefined,
+};
+
+function parseFingerprint(fingerprint: string): {
+  algorithm: string | undefined;
+  formattedValue: string;
+} {
+  const separatorIndex = fingerprint.indexOf('/');
+  if (separatorIndex <= 0) {
+    return {
+      algorithm: undefined,
+      formattedValue: fingerprint,
+    };
+  }
+  return {
+    algorithm: fingerprint.slice(0, separatorIndex).toUpperCase(),
+    formattedValue: fingerprint.slice(separatorIndex + 1),
+  };
+}
+
+function Fingerprint({
+  id,
+  label,
+  fallbackAlgorithmLabel,
+  value,
+}: {
+  id: string;
+  label: string;
+  fallbackAlgorithmLabel: string;
+  value: string;
+}) {
+  const { algorithm, formattedValue } = parseFingerprint(value);
+  return (
+    <>
+      <Section id={id} label={label} />
+      <OptionalRow
+        id={`${id}-fingerprint`}
+        label={algorithm ?? fallbackAlgorithmLabel}
+        headers={id}
+        value={formattedValue}
+      />
+    </>
+  );
+}
+
+function SingleCertificateDetails({
+  detailsId,
+  certificate: {
+    subject,
+    issuer,
+    validStart,
+    validExpiry,
+    fingerprint,
+    serialNumber,
+  },
+  onIssuerClick,
+  onDownloadClick,
+}: {
+  detailsId: string;
+  certificate: Certificate;
+  onIssuerClick?: (() => void) | undefined;
+  onDownloadClick: () => void;
+}): JSX.Element {
+  const {
+    t,
+    i18n: { languages },
+  } = useTranslation(undefined, {
+    keyPrefix: 'error.certificateError.details',
+  });
+
+  const id = `${detailsId}-${fingerprint}-certificate`;
+
+  return (
+    <SingleCertificateDetailsRoot>
+      <tbody>
+        <Principal
+          id={`${id}-subject`}
+          label={t<string>('subject')}
+          principal={subject}
+          t={t}
+        />
+        <Principal
+          id={`${id}-issuer`}
+          label={t<string>('issuer')}
+          principal={issuer}
+          t={t}
+          onIssuerClick={onIssuerClick}
+        />
+        <Section id={`${id}-validity`} label={t<string>('validity')} />
+        <DateTimeRow
+          id={`${id}-validity-validStart`}
+          label={t<string>('validStart')}
+          value={validStart}
+          locales={languages}
+          headers={`${id}-validity`}
+        />
+        <DateTimeRow
+          id={`${id}-validity-validExpiry`}
+          label={t<string>('validExpiry')}
+          value={validExpiry}
+          locales={languages}
+          headers={`${id}-validity`}
+        />
+        <Section
+          id={`${id}-miscellaneous`}
+          label={t<string>('miscellaneous')}
+        />
+        <OptionalRow
+          id={`${id}-miscellaneous-serialNumber`}
+          label={t<string>('serialNumber')}
+          value={serialNumber}
+          headers={`${id}-miscellaneous`}
+        />
+        <Row
+          id={`${id}-miscellaneous-download`}
+          label={t<string>('download')}
+          headers={`${id}-miscellaneous`}
+        >
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid -- This is a `button`. */}
+          <Link
+            component="button"
+            variant="body1"
+            onClick={onDownloadClick}
+            sx={{ verticalAlign: 'baseline' }}
+          >
+            <AttachmentIcon fontSize="inherit" /> {t('downloadPEM')}
+          </Link>
+        </Row>
+        <Fingerprint
+          id={`${id}-fingerprint`}
+          label={t<string>('fingerprint')}
+          fallbackAlgorithmLabel={t<string>('fingerprintUnknown')}
+          value={fingerprint}
+        />
+      </tbody>
+    </SingleCertificateDetailsRoot>
+  );
+}
+
+SingleCertificateDetails.defaultProps = {
+  onIssuerClick: undefined,
+};
+
+export default observer(SingleCertificateDetails);
diff --git a/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx b/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx
new file mode 100644
index 0000000..630cbe0
--- /dev/null
+++ b/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function TrustCertificateDialog({
+  trust,
+  onClick,
+}: {
+  trust: 'pending' | 'rejected' | 'accepted';
+  onClick: () => void;
+}): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'error.certificateError.details',
+  });
+
+  return (
+    <>
+      <Typography mt={2}>
+        <WarningAmberIcon fontSize="inherit" />{' '}
+        <strong>{t('trustWarning')}</strong>
+      </Typography>
+      <Box mt={1}>
+        <Button
+          disabled={trust !== 'pending'}
+          onClick={onClick}
+          color="error"
+          variant="outlined"
+        >
+          {t(`trustButton.${trust}`)}
+        </Button>
+      </Box>
+    </>
+  );
+}
diff --git a/packages/renderer/src/stores/Service.ts b/packages/renderer/src/stores/Service.ts
index 4510ec0..dcaf96e 100644
--- a/packages/renderer/src/stores/Service.ts
+++ b/packages/renderer/src/stores/Service.ts
@@ -123,6 +123,12 @@ const Service = defineServiceModel(ServiceSettings)
           action: 'dismiss-all-popups',
         });
       },
+      downloadCertificate(fingerprint: string): void {
+        dispatch({
+          action: 'download-certificate',
+          fingerprint,
+        });
+      },
     };
   })
   .actions((self) => ({
-- 
cgit v1.2.3-54-g00ecf