feat(new tool): CSR Generator

Fix #586 and #736

src/tools/csr-generator/csr-generator.service.ts

@@ -0,0 +1,77 @@
+import { pki } from 'node-forge';
+import workerScript from 'node-forge/dist/prime.worker.min?url';
+
+export { generateCSR };
+
+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);
+    }),
+  );
+}
+
+async function generateCSR(config: {
+  bits?: number
+  password?: string
+  commonName?: string
+  countryName?: string
+  city?: string
+  state?: string
+  organizationName?: string
+  organizationalUnit?: string
+  contactEmail?: string
+} = {}): Promise<{
+  publicKeyPem: string
+  privateKeyPem: string
+  csrPem: string
+}> {
+  const { privateKey, publicKey } = await generateRSAPairs(config);
+
+  // create a certification request (CSR)
+  const csr = pki.createCertificationRequest();
+  csr.publicKey = publicKey;
+  csr.setSubject([{
+    name: 'CN',
+    value: config.commonName,
+  }, {
+    name: 'C',
+    value: config.countryName,
+  }, {
+    shortName: 'ST',
+    value: config.state,
+  }, {
+    name: 'L',
+    value: config.city,
+  }, {
+    name: 'O',
+    value: config.organizationName,
+  }, {
+    shortName: 'OU',
+    value: config.organizationalUnit,
+  }, {
+    name: 'EMAIL',
+    value: config.contactEmail,
+  }]);
+
+  // sign certification request
+  csr.sign(privateKey);
+
+  // convert certification request to PEM-format
+  const csrPem = pki.certificationRequestToPem(csr);
+
+  const privateUnencryptedKeyPem = pki.privateKeyToPem(privateKey);
+
+  return {
+    csrPem,
+    publicKeyPem: pki.publicKeyToPem(publicKey),
+    privateKeyPem: config?.password
+      ? pki.encryptRsaPrivateKey(privateKey, config?.password)
+      : privateUnencryptedKeyPem,
+  };
+}

src/tools/csr-generator/csr-generator.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { withDefaultOnErrorAsync } from '@/utils/defaults';
+import { computedRefreshableAsync } from '@/composable/computedRefreshable';
+import { generateCSR } from "./csr-generator.service.ts";
+
+const commonName = ref('');
+const organizationName = ref('');
+const organizationUnit = ref('');
+const city = ref('');
+const state = ref('');
+const country = ref('');
+const contactEmail = ref('');
+const emptyCSR = { csrPem: '', privateKeyPem: '', publicKeyPem: '' };
+
+const [certs, refreshCerts] = computedRefreshableAsync(
+  () => withDefaultOnErrorAsync(() => {
+    return generateCSR({
+      password: password.value,
+      commonName: commonName.value,
+      countryName: country.value,
+      city: city.value,
+      state: state.value,
+      organizationName: organizationName.value,
+      organizationalUnit: organizationalUnit.value,
+      contactEmail: contactEmail.value,
+    });
+  },
+  ), emptyCSR),
+  emptyCSR,
+);
+</script>
+
+<template>
+  <div>
+        <n-form-item label="Private Key passphrase:" label-placement="left">
+          <n-input
+            v-model:value="password"
+            type="password"
+            show-password-on="mousedown"
+            placeholder="Passphrase"
+          />
+        </n-form-item>
+    </div>
+
+    <div>
+        <n-form-item label="Common Name/Domain Name:" label-placement="left">
+          <n-input
+            v-model:value="commonName"
+            placeholder="Common/Domain Name"
+          />
+        </n-form-item>
+    </div>
+
+    <div>
+        <n-form-item label="Organization Name:" label-placement="left">
+          <n-input
+            v-model:value="organizationName"
+            placeholder="Organization Name"
+          />
+        </n-form-item>
+    </div>
+
+    <div>
+        <n-form-item label="Organization Unit:" label-placement="left">
+          <n-input
+            v-model:value="organizationalUnit"
+            placeholder="Organization Unit"
+          />
+        </n-form-item>
+    </div>
+
+    <div>
+        <n-form-item label="State:" label-placement="left">
+          <n-input
+            v-model:value="state"
+            placeholder="State"
+          />
+        </n-form-item>
+    </div>
+
+    <div>
+        <n-form-item label="City:" label-placement="left">
+          <n-input
+            v-model:value="city"
+            placeholder="City"
+          />
+        </n-form-item>
+    </div>
+
+    <div>
+        <n-form-item label="Country:" label-placement="left">
+          <n-input
+            v-model:value="country"
+            placeholder="Country"
+          />
+        </n-form-item>
+    </div>
+
+    <div>
+        <n-form-item label="Contact Email:" label-placement="left">
+          <n-input
+            v-model:value="contactEmail"
+            placeholder="Contact Email"
+          />
+        </n-form-item>
+    </div>
+
+    <div>
+        <c-button @click="refreshCerts">
+          Refresh CSR
+        </c-button>
+      </div>
+
+    <div>
+      <h3>Certifacate Signing Request</h3>
+      <TextareaCopyable :value="certs.csrPem" />
+    </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>
+</template>

src/tools/csr-generator/index.ts

@@ -0,0 +1,12 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Csr generator',
+  path: '/csr-generator',
+  description: '',
+  keywords: ['csr', 'certificate', 'signing', 'request', 'x509', 'generator'],
+  component: () => import('./csr-generator.vue'),
+  icon: ArrowsShuffle,
+  createdAt: new Date('2024-02-22'),
+});

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as textToUnicode } from './text-to-unicode';
+import { tool as csrGenerator } from './csr-generator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -81,7 +82,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,
+      csrGenerator,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
+    ],
   },
   {
     name: 'Converter',