Merge cb45057c78 into fe349ad69b

package.json

@@ -81,6 +81,7 @@
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
     "sql-formatter": "^13.0.0",
+    "sshpk": "^1.18.0",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",
     "unicode-emoji-json": "^0.4.0",
@@ -110,6 +111,7 @@
     "@types/node": "^18.15.11",
     "@types/node-forge": "^1.3.2",
     "@types/qrcode": "^1.5.0",
+    "@types/sshpk": "^1.17.4",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.0",
     "@unocss/eslint-config": "^0.57.0",
@@ -131,6 +133,7 @@
     "unplugin-icons": "^0.17.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.4.9",
+    "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-pwa": "^0.16.0",
     "vite-plugin-vue-markdown": "^0.23.5",
     "vite-svg-loader": "^4.0.0",

src/components/TextareaCopyable.vue

@@ -16,6 +16,7 @@ const props = withDefaults(
     language?: string
     copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
     copyMessage?: string
+    wordWrap?: boolean
   }>(),
   {
     followHeightOf: null,
@@ -47,7 +48,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
         :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
       >
         <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
+          <n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
         </n-config-provider>
       </n-scrollbar>
       <div absolute right-10px top-10px>

src/tools/index.ts

@@ -5,7 +5,7 @@ import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
-
+import { tool as x509CertificateGenerator } from './x509-certificate-generator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -85,7 +85,20 @@ import { tool as yamlViewer } from './yaml-viewer';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
+    components: [
+      tokenGenerator,
+      hashText,
+      bcrypt,
+      uuidGenerator,
+      ulidGenerator,
+      cypher,
+      bip39,
+      hmacGenerator,
+      rsaKeyPairGenerator,
+      x509CertificateGenerator,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
+    ],
   },
   {
     name: 'Converter',

src/tools/x509-certificate-generator/index.ts

@@ -0,0 +1,12 @@
+import { FileCertificate } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'X509 certificate generator',
+  path: '/x509-certificate-generator',
+  description: 'Generate a self signed SSL/x509 certificate',
+  keywords: ['x509', 'ssl', 'tls', 'self-signed', 'certificate', 'generator'],
+  component: () => import('./x509-certificate-generator.vue'),
+  icon: FileCertificate,
+  createdAt: new Date('2024-02-25'),
+});

src/tools/x509-certificate-generator/x509-certificate-generator.service.ts

@@ -0,0 +1,119 @@
+import { asn1, md, pki, random, util } from 'node-forge';
+import workerScript from 'node-forge/dist/prime.worker.min?url';
+
+export { generateSSLCertificate };
+
+function generateRSAPairs({ bits = 2048 }) {
+  return new Promise<pki.rsa.KeyPair>((resolve, reject) =>
+    pki.rsa.generateKeyPair({ bits, workerScript }, (err, keyPair) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      resolve(keyPair);
+    }),
+  );
+}
+
+// a hexString is considered negative if it's most significant bit is 1
+// because serial numbers use ones' complement notation
+// this RFC in section 4.1.2.2 requires serial numbers to be positive
+// http://www.ietf.org/rfc/rfc5280.txt
+function toPositiveHex(hexString: string) {
+  let mostSiginficativeHexAsInt = Number.parseInt(hexString[0], 16);
+  if (mostSiginficativeHexAsInt < 8) {
+    return hexString;
+  }
+
+  mostSiginficativeHexAsInt -= 8;
+  return mostSiginficativeHexAsInt.toString() + hexString.substring(1);
+}
+
+async function generateSSLCertificate(config: {
+  bits?: number
+  password?: string
+  commonName?: string
+  countryName?: string
+  city?: string
+  state?: string
+  organizationName?: string
+  organizationalUnit?: string
+  contactEmail?: string
+  days?: number
+} = {}): Promise<{
+  fingerprint: string
+  publicKeyPem: string
+  privateKeyPem: string
+  certificatePem: string
+}> {
+  const { privateKey, publicKey } = await generateRSAPairs(config);
+
+  const cert = pki.createCertificate();
+
+  cert.serialNumber = toPositiveHex(util.bytesToHex(random.getBytesSync(9))); // the serial number can be decimal or hex (if preceded by 0x)
+
+  cert.validity.notBefore = new Date();
+  cert.validity.notAfter = new Date();
+  cert.validity.notAfter.setDate(cert.validity.notBefore.getDate() + (config.days || 365));
+
+  const attrs = [{
+    name: 'commonName',
+    value: config.commonName,
+  }, {
+    name: 'countryName',
+    value: config.countryName,
+  }, {
+    name: 'stateOrProvinceName',
+    value: config.state,
+  }, {
+    name: 'localityName',
+    value: config.city,
+  }, {
+    name: 'organizationName',
+    value: config.organizationName,
+  }, {
+    name: 'organizationalUnitName',
+    value: config.organizationalUnit,
+  }, {
+    name: 'emailAddress',
+    value: config.contactEmail,
+  }].filter(attr => attr.value !== null && attr.value?.trim() !== '');
+
+  cert.setSubject(attrs);
+  cert.setIssuer(attrs);
+
+  cert.publicKey = publicKey;
+
+  cert.setExtensions([{
+    name: 'basicConstraints',
+    cA: true,
+  }, {
+    name: 'keyUsage',
+    keyCertSign: true,
+    digitalSignature: true,
+    nonRepudiation: true,
+    keyEncipherment: true,
+    dataEncipherment: true,
+  }]);
+
+  cert.sign(privateKey);
+
+  const fingerprint = md.sha1
+    .create()
+    .update(asn1.toDer(pki.certificateToAsn1(cert)).getBytes())
+    .digest()
+    .toHex()
+    .match(/.{2}/g)?.join(':') ?? '';
+
+  const privateUnencryptedKeyPem = pki.privateKeyToPem(privateKey);
+
+  return {
+    fingerprint,
+    certificatePem: pki.certificateToPem(cert),
+    publicKeyPem: pki.publicKeyToPem(publicKey),
+    privateKeyPem: config?.password
+      ? pki.encryptRsaPrivateKey(privateKey, config?.password)
+      : privateUnencryptedKeyPem,
+  };
+}

src/tools/x509-certificate-generator/x509-certificate-generator.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { generateSSLCertificate } from './x509-certificate-generator.service';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { withDefaultOnErrorAsync } from '@/utils/defaults';
+import { computedRefreshableAsync } from '@/composable/computedRefreshable';
+import { useValidation } from '@/composable/validation';
+
+const commonName = ref('test.com');
+const commonNameValidation = useValidation({
+  source: commonName,
+  rules: [
+    {
+      message: 'Common Name/Domain Name must not be empty',
+      validator: value => value?.trim() !== '',
+    },
+  ],
+});
+
+const organizationName = ref('Test');
+const organizationalUnit = ref('');
+const days = ref(365);
+const password = ref('');
+const city = ref('Paris');
+const state = ref('FR');
+const country = ref('France');
+const contactEmail = ref('');
+const emptyCSR = { certificatePem: '', privateKeyPem: '', publicKeyPem: '', fingerprint: '' };
+
+const [certs, refreshCerts] = computedRefreshableAsync(
+  () => withDefaultOnErrorAsync(() => {
+    if (!commonNameValidation.isValid) {
+      return emptyCSR;
+    }
+
+    return generateSSLCertificate({
+      password: password.value,
+      commonName: commonName.value,
+      countryName: country.value,
+      city: city.value,
+      state: state.value,
+      organizationName: organizationName.value,
+      organizationalUnit: organizationalUnit.value,
+      contactEmail: contactEmail.value,
+      days: days.value,
+    });
+  },
+  emptyCSR,
+  ), emptyCSR);
+</script>
+
+<template>
+  <div>
+    <div mb-2>
+      <n-form-item
+        label="Common Name/Domain Name:"
+        label-placement="top"
+        :feedback="commonNameValidation.message"
+        :validation-status="commonNameValidation.status"
+      >
+        <n-input
+          v-model:value="commonName"
+          placeholder="Common/Domain Name"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Duration (days):"
+        label-placement="left" label-width="100"
+      >
+        <n-input-number
+          v-model:value="days"
+          placeholder="Duration (days)"
+          :min="1"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Organization Name:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="organizationName"
+          placeholder="Organization Name"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Organizational Unit:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="organizationalUnit"
+          placeholder="Organization Unit"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="State:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="state"
+          placeholder="State"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="City:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="city"
+          placeholder="City"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Country:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="country"
+          placeholder="Country"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Contact Email:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="contactEmail"
+          placeholder="Contact Email"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Private Key passphrase:"
+        label-placement="top"
+      >
+        <n-input
+          v-model:value="password"
+          type="password"
+          show-password-on="mousedown"
+          placeholder="Passphrase"
+        />
+      </n-form-item>
+    </div>
+
+    <div flex justify-center>
+      <c-button @click="refreshCerts">
+        Refresh Certificate
+      </c-button>
+    </div>
+
+    <n-divider />
+
+    <div v-if="commonNameValidation.isValid">
+      <div>
+        <h3>Certificate (PEM)</h3>
+        <TextareaCopyable :value="certs.certificatePem" />
+      </div>
+
+      <div>
+        <h3>Fingerprint:</h3>
+        <TextareaCopyable :value="certs.fingerprint" :word-wrap="true" />
+      </div>
+
+      <div>
+        <h3>Public key</h3>
+        <TextareaCopyable :value="certs.publicKeyPem" :word-wrap="true" />
+      </div>
+
+      <div>
+        <h3>Private key</h3>
+        <TextareaCopyable :value="certs.privateKeyPem" />
+      </div>
+    </div>
+  </div>
+</template>

vite.config.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'node:path';
 import { URL, fileURLToPath } from 'node:url';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 import VueI18n from '@intlify/unplugin-vue-i18n/vite';
 import vue from '@vitejs/plugin-vue';
@@ -97,6 +98,7 @@ export default defineConfig({
       resolvers: [NaiveUiResolver(), IconsResolver({ prefix: 'icon' })],
     }),
     Unocss(),
+    nodePolyfills(),
   ],
   base: baseUrl,
   resolve: {