feat: initial mTLS support

usebruno · Oct 4, 2023 · 59e5a42 · 59e5a42
1 parent bf2d122
commit 59e5a42
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 3 deletions.
diff --git a/packages/bruno-app/src/components/Preferences/General/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/General/StyledWrapper.js
@@ -2,6 +2,10 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
  color: ${(props) => props.theme.text};
+
+ .settings-label {
+ width: 80px;
+ }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Preferences/General/index.js b/packages/bruno-app/src/components/Preferences/General/index.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import toast from 'react-hot-toast';
 import { usePreferences } from 'providers/Preferences';
 import StyledWrapper from './StyledWrapper';
 
@@ -7,6 +8,11 @@ const General = () => {
 
  const [sslVerification, setSslVerification] = useState(preferences.request.sslVerification);
 
+ const [mTlsDomain, setMTlsDomain] = useState(preferences.request.mTlsDomain);
+ const [mTlsCert, setMTlsCert] = useState(preferences.request.mTlsCert);
+ const [mTlsKey, setMTlsKey] = useState(preferences.request.mTlsKey);
+ const [mTlsPassphrase, setMtlPassphrase] = useState(preferences.request.mTlsPassphrase);
+
  const handleCheckboxChange = () => {
  const updatedPreferences = {
  ...preferences,
@@ -25,12 +31,56 @@ const General = () => {
  });
  };
 
+ const handleMTls = () => {
+ const updatedPreferences = {
+ ...preferences,
+ request: {
+ ...preferences.request,
+ mTlsDomain: mTlsDomain,
+ mTlsCert: mTlsCert,
+ mTlsKey: mTlsKey,
+ mTlsPassphrase: mTlsPassphrase
+ }
+ };
+ setPreferences(updatedPreferences)
+ .then(() => toast.success(`Mutual TLS config saved`));
+ }
+
  return (
  <StyledWrapper>
  <div className="flex items-center mt-2">
  <input type="checkbox" checked={sslVerification} onChange={handleCheckboxChange} className="mr-3 mousetrap" />
  SSL Certificate Verification
  </div>
+ <div className="mt-4">
+ <h1 className="font-medium mb-2">Mutual TLS</h1>
+
+ <div className="ml-4 mb-2 flex items-center">
+ <label className="settings-label">Domain</label>
+ <input type="text" placeholder="*.example.org" onChange={e => setMTlsDomain(e.target.value)} value={mTlsDomain} className="block textbox" />
+ </div>
+
+ <div className="ml-4 mb-2 flex items-center">
+ <label className="settings-label">Client cert</label>
+ <input type="file" onChange={e => setMTlsCert(e.target.files[0].path)} className="block textbox" />
+ </div>
+
+ <div className="ml-4 mb-2 flex items-center">
+ <label className="settings-label">Client key</label>
+ <input type="file" onChange={e => setMTlsKey(e.target.files[0].path)} className="block textbox" />
+ </div>
+
+ <div className="ml-4 mb-2 flex items-center">
+ <label className="settings-label">Passphrase</label>
+ <input type="text" onChange={e => setMtlPassphrase(e.target.value)} value={mTlsPassphrase} className="block textbox" />
+ </div>
+
+ <div className="mt-8 ml-4">
+ <button onClick={handleMTls} className="submit btn btn-md btn-secondary">
+ Save mTLS
+ </button>
+ </div>
+ </div>
  </StyledWrapper>
  );
 };

diff --git a/packages/bruno-app/src/providers/Preferences/index.js b/packages/bruno-app/src/providers/Preferences/index.js
@@ -14,13 +14,21 @@ import toast from 'react-hot-toast';
 
 const defaultPreferences = {
  request: {
- sslVerification: true
+ sslVerification: true,
+ mTlsDomain: null,
+ mTlsCert: null,
+ mTlsKey: null,
+ mTlsPassphrase: null,
  }
 };
 
 const preferencesSchema = Yup.object().shape({
  request: Yup.object().shape({
- sslVerification: Yup.boolean()
+ sslVerification: Yup.boolean(),
+ mTlsDomain: Yup.string().nullable(),
+ mTlsCert: Yup.string().nullable(),
+ mTlsKey: Yup.string().nullable(),
+ mTlsPassphrase: Yup.string().nullable()
  })
 });
 

diff --git a/packages/bruno-electron/src/ipc/network/index.js b/packages/bruno-electron/src/ipc/network/index.js
@@ -1,4 +1,5 @@
 const qs = require('qs');
+const fs = require('fs');
 const https = require('https');
 const axios = require('axios');
 const Mustache = require('mustache');
@@ -225,7 +226,6 @@ const registerNetworkIpc = (mainWindow) => {
  cacertFile = cacertArray.find((el) => el);
  if (cacertFile && cacertFile.length > 1) {
  try {
- const fs = require('fs');
  caCrt = fs.readFileSync(cacertFile);
  httpsAgentRequestFields['ca'] = caCrt;
  } catch (err) {
@@ -234,6 +234,25 @@ const registerNetworkIpc = (mainWindow) => {
  }
  }
 
+ const mTlsDomain = get(preferences, 'request.mTlsDomain', null);
+ const mTlsCert = get(preferences, 'request.mTlsCert', null);
+ const mTlsKey = get(preferences, 'request.mTlsKey', null);
+ const mTlsPassphrase = get(preferences, 'request.mTlsPassphrase', null);
+
+ if (mTlsDomain && mTlsCert && mTlsKey) {
+ const hostRegex = '^https:\\\/\\\/' + mTlsDomain.replaceAll('.', '\\.').replaceAll('*', '.*');
+
+ if (request.url.match(hostRegex)) {
+ try {
+ httpsAgentRequestFields['cert'] = fs.readFileSync(mTlsCert);
+ httpsAgentRequestFields['key'] = fs.readFileSync(mTlsKey);
+ } catch (err) {
+ console.log('Error loading mTLS cert/key', err);
+ }
+ httpsAgentRequestFields['passphrase'] = mTlsPassphrase;
+ }
+ }
+
  if (Object.keys(httpsAgentRequestFields).length > 0) {
  request.httpsAgent = new https.Agent({
  ...httpsAgentRequestFields