feat: Settings > option to disable ssl verification when making reque…

…sts (useful when you're using self signed certs) (only for electron)

packages/electron/package.json

@@ -37,6 +37,7 @@
     },
     "dependencies": {
         "electron-squirrel-startup": "^1.0.0",
+        "undici": "^5.28.2",
         "update-electron-app": "^2.0.1"
     },
     "config": {

packages/electron/src/app.js

@@ -1,6 +1,7 @@
 const { app, BrowserWindow, ipcMain } = require('electron')
 const { resolve } = require('path')
 const { File } = require('node:buffer')
+const { Agent } = require('undici')
 require('update-electron-app')()
 
 if(require('electron-squirrel-startup')) return app.quit()
@@ -25,7 +26,7 @@ let abortController = {}
 
 async function handleSendRequest(_event, data) {
     try {
-        const { requestId, url, method, headers, bodyHint } = data
+        const { requestId, url, method, headers, bodyHint, disableSSLVerification } = data
         let { body } = data
 
         abortController[requestId] = new AbortController()
@@ -49,7 +50,12 @@ async function handleSendRequest(_event, data) {
             method,
             headers,
             body: method !== 'GET' ? body : undefined,
-            signal: abortController.signal
+            signal: abortController.signal,
+            dispatcher: new Agent({
+                connect: {
+                    rejectUnauthorized: disableSSLVerification ? false : true,
+                },
+            }),
         })
 
         const endTime = new Date()

packages/ui/src/App.vue

@@ -267,6 +267,10 @@ export default {
         if(import.meta.env.MODE === 'desktop' || import.meta.env.MODE === 'desktop-electron' || import.meta.env.MODE === 'web-standalone') {
             this.$store.state.flags.isBrowser = false
         }
+
+        if(import.meta.env.MODE === 'desktop-electron') {
+            this.$store.state.flags.isElectron = true
+        }
     },
     mounted() {
         const messageHandler = message => {
@@ -296,6 +300,7 @@ export default {
         const savedTheme = localStorage.getItem(constants.LOCAL_STORAGE_KEY.THEME)
         const savedGithubStarCount = localStorage.getItem(constants.LOCAL_STORAGE_KEY.GITHUB_STAR_COUNT)
         let savedDisablePageViewAnalyticsTracking = localStorage.getItem(constants.LOCAL_STORAGE_KEY.DISABLE_PAGE_VIEW_ANALYTICS_TRACKING)
+        const savedDisableSSLVerification = localStorage.getItem(constants.LOCAL_STORAGE_KEY.DISABLE_SSL_VERIFICATION)
 
         if(savedTheme) {
             this.$store.state.theme = savedTheme
@@ -330,6 +335,14 @@ export default {
             script.src = 'https://umami.artelin.dev/umami-analytics.js'
             document.body.appendChild(script)
         }
+
+        if(savedDisableSSLVerification) {
+            try {
+                this.$store.state.flags.disableSSLVerification = JSON.parse(savedDisableSSLVerification)
+            } catch(e) {
+                this.$store.state.flags.disableSSLVerification = false
+            }
+        }
     },
     beforeUnmount() {
         window.removeEventListener('keydown', this.handleGlobalKeydown)

packages/ui/src/components/modals/SettingsModal.vue

@@ -21,8 +21,18 @@
                 <label style="display: flex;">
                     <input type="checkbox" v-model="disablePageViewAnalyticsTracking"> <div style="margin-left: 0.5rem;">Disable Page View Analytics Tracking</div> <div style="margin-left: 0.5rem;"></div>
                 </label>
-                <div style="margin-left: 1.3rem; margin-top: 0.3rem;">Disabling this will prevent the application from sending page view event to the <a href="https://umami.is" target="_blank">analytics server</a> when the application is opened. Please note that we do not track any other actions or the requests you make in the application. Click <a href="https://umami.is/docs/tracker-functions#:~:text=Pageviews,Website%20ID%20(required)" target="_blank">here</a> to see what data gets collected.</div>
+                <div style="margin-left: 1.3rem; margin-top: 0.3rem;">Ticking this will prevent the application from sending page view event to the <a href="https://umami.is" target="_blank">analytics server</a> when the application is opened. Please note that we do not track any other actions or the requests you make in the application. Click <a href="https://umami.is/docs/tracker-functions#:~:text=Pageviews,Website%20ID%20(required)" target="_blank">here</a> to see what data gets collected.</div>
             </div>
+            <template v-if="flags.isElectron">
+                <div style="padding-top: 1rem"></div>
+                <div style="padding-top: 1rem"></div>
+                <div>
+                    <label style="display: flex;">
+                        <input type="checkbox" v-model="disableSSLVerification"> <div style="margin-left: 0.5rem;">Disable SSL Verification</div> <div style="margin-left: 0.5rem;"></div>
+                    </label>
+                    <div style="margin-left: 1.3rem; margin-top: 0.3rem;">Ticking this will disable SSL verification for all requests made from the application. This is useful when you are working with self signed certificates.</div>
+                </div>
+            </template>
             <div style="padding-top: 1rem"></div>
             <div style="padding-top: 1rem"></div>
             <div style="font-style: italic; text-align: center;">Changes you make here will be auto saved</div>
@@ -52,6 +62,7 @@ export default {
             requestPanelRatio: null,
             responsePanelRatio: null,
             disablePageViewAnalyticsTracking: false,
+            disableSSLVerification: false,
         }
     },
     computed: {
@@ -62,15 +73,22 @@ export default {
             set(value) {
                 this.$emit('update:showModal', value)
             }
-        }
+        },
+        flags() {
+            return this.$store.state.flags
+        },
     },
     watch: {
         showModal() {
             this.fetchSavedSettings()
         },
         disablePageViewAnalyticsTracking() {
             localStorage.setItem(constants.LOCAL_STORAGE_KEY.DISABLE_PAGE_VIEW_ANALYTICS_TRACKING, this.disablePageViewAnalyticsTracking)
-        }
+        },
+        disableSSLVerification() {
+            localStorage.setItem(constants.LOCAL_STORAGE_KEY.DISABLE_SSL_VERIFICATION, this.disableSSLVerification)
+            this.$store.state.flags.disableSSLVerification = this.disableSSLVerification
+        },
     },
     methods: {
         resetWidths() {
@@ -84,6 +102,9 @@ export default {
         resetDisablePageViewAnalyticsTracking() {
             localStorage.removeItem(constants.LOCAL_STORAGE_KEY.DISABLE_PAGE_VIEW_ANALYTICS_TRACKING)
         },
+        resetDisableSSLVerification() {
+            localStorage.removeItem(constants.LOCAL_STORAGE_KEY.DISABLE_SSL_VERIFICATION)
+        },
         resetSettings(target = null) {
             if(target) {
                 if(target === 'widths') {
@@ -96,13 +117,15 @@ export default {
             this.resetWidths()
             this.resetLayout()
             this.resetDisablePageViewAnalyticsTracking()
+            this.resetDisableSSLVerification()
             document.location.reload()
         },
         fetchSavedSettings() {
             const savedSidebarWidth = localStorage.getItem(constants.LOCAL_STORAGE_KEY.SIDEBAR_WIDTH)
             const savedRequestPanelRatio = localStorage.getItem(constants.LOCAL_STORAGE_KEY.REQUEST_PANEL_RATIO)
             const savedResponsePanelRatio = localStorage.getItem(constants.LOCAL_STORAGE_KEY.RESPONSE_PANEL_RATIO)
             const savedDisablePageViewAnalyticsTracking = localStorage.getItem(constants.LOCAL_STORAGE_KEY.DISABLE_PAGE_VIEW_ANALYTICS_TRACKING)
+            const savedDisableSSLVerification = localStorage.getItem(constants.LOCAL_STORAGE_KEY.DISABLE_SSL_VERIFICATION)
 
             if(savedSidebarWidth) {
                 this.sidebarWidth = savedSidebarWidth
@@ -123,6 +146,14 @@ export default {
                     this.disablePageViewAnalyticsTracking = false
                 }
             }
+
+            if(savedDisableSSLVerification) {
+                try {
+                    this.disableSSLVerification = JSON.parse(savedDisableSSLVerification)
+                } catch (e) {
+                    this.disableSSLVerification = false
+                }
+            }
         }
     }
 }

packages/ui/src/constants.js

@@ -8,6 +8,7 @@ export default {
         THEME: 'Restfox-Theme',
         GITHUB_STAR_COUNT: 'Restfox-GithubStarCount',
         DISABLE_PAGE_VIEW_ANALYTICS_TRACKING: 'Restfox-DisablePageViewAnalyticsTracking',
+        DISABLE_SSL_VERIFICATION: 'Restfox-DisableSSLVerification',
     },
     HOTKEYS: {
         SEND_REQUEST: 'Ctrl + Enter',

packages/ui/src/helpers.ts

@@ -84,7 +84,7 @@ export function generateBasicAuthString(username, password) {
     return 'Basic ' + window.btoa(unescape(encodeURIComponent(username)) + ':' + unescape(encodeURIComponent(password)))
 }
 
-export async function fetchWrapper(url, method, headers, body, abortControllerSignal) {
+export async function fetchWrapper(url, method, headers, body, abortControllerSignal, disableSSLVerification) {
     if('__EXTENSION_HOOK__' in window && window.__EXTENSION_HOOK__ === 'Restfox CORS Helper Enabled') {
         let bodyHint: any = null
 
@@ -223,7 +223,8 @@ export async function fetchWrapper(url, method, headers, body, abortControllerSi
                 method,
                 headers,
                 body,
-                bodyHint
+                bodyHint,
+                disableSSLVerification,
             }).then(data => {
                 if(data.event === 'response') {
                     data.eventData.buffer = new Uint8Array(data.eventData.buffer).buffer
@@ -389,7 +390,7 @@ export async function createRequestData(state, request, environment, setEnvironm
     }
 }
 
-export async function handleRequest(request, environment, setEnvironmentVariable, plugins, abortControllerSignal) {
+export async function handleRequest(request, environment, setEnvironmentVariable, plugins, abortControllerSignal, flags) {
     const state = {
         currentPlugin: null,
         testResults: [],
@@ -398,7 +399,7 @@ export async function handleRequest(request, environment, setEnvironmentVariable
     try {
         const { url, headers, body } = await createRequestData(state, request, environment, setEnvironmentVariable, plugins)
 
-        const response = await fetchWrapper(url, request.method, headers, body, abortControllerSignal)
+        const response = await fetchWrapper(url, request.method, headers, body, abortControllerSignal, flags.disableSSLVerification)
 
         const headersToSave = JSON.parse(JSON.stringify(headers))
 

packages/ui/src/store.js

@@ -206,7 +206,9 @@ const store = createStore({
             flags: {
                 hideBrowserRelatedResponsePanelErrors: false,
                 browserExtensionEnabled: false,
-                isBrowser: true
+                isBrowser: true,
+                isElectron: false,
+                disableSSLVerification: false,
             },
             openContextMenuElement: null,
             sockets: {},
@@ -718,7 +720,7 @@ const store = createStore({
             ]
 
             context.state.requestAbortController[activeTab._id] = new AbortController()
-            const response = await handleRequest(activeTab, environment, setEnvironmentVariable, enabledPlugins, context.state.requestAbortController[activeTab._id].signal)
+            const response = await handleRequest(activeTab, environment, setEnvironmentVariable, enabledPlugins, context.state.requestAbortController[activeTab._id].signal, context.state.flags)
             context.commit('saveResponse', response)
             context.state.requestResponses[activeTab._id] = response
             context.state.requestResponseStatus[activeTab._id] = 'loaded'