diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json index 9273f6a7..ba189955 100644 --- a/packages/hoppscotch-common/locales/en.json +++ b/packages/hoppscotch-common/locales/en.json @@ -62,7 +62,9 @@ "turn_on": "Turn on", "undo": "Undo", "verify": "Verify", - "yes": "Yes" + "yes": "Yes", + "enable": "Enable", + "disable": "Disable" }, "add": { "new": "Add new", @@ -714,12 +716,16 @@ "account_email_description": "Your primary email address.", "account_name_description": "This is your display name.", "additional": "Additional Settings", + "auto_encode_mode": "Auto", + "auto_encode_mode_tooltip": "Encode the parameters in the request only if some special characters are present", "background": "Background", "black_mode": "Black", "choose_language": "Choose language", "dark_mode": "Dark", "delete_account": "Delete account", "delete_account_description": "Once you delete your account, all your data will be permanently deleted. This action cannot be undone.", + "disable_encode_mode_tooltip": "Never encode the parameters in the request", + "enable_encode_mode_tooltip": "Always encode the parameters in the request", "expand_navigation": "Expand navigation", "experiments": "Experiments", "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, ", @@ -728,11 +734,15 @@ "extensions": "Browser extension", "extensions_use_toggle": "Use the browser extension to send requests (if present)", "follow": "Follow us", + "general": "General", + "general_description": " General settings used in the application", "interceptor": "Interceptor", "interceptor_description": "Middleware between application and APIs.", "language": "Language", "light_mode": "Light", "official_proxy_hosting": "Official Proxy is hosted by Hoppscotch.", + "query_parameters_encoding": "Query Parameters Encoding", + "query_parameters_encoding_description": "Configure encoding for query parameters in requests", "profile": "Profile", "profile_description": "Update your profile details", "profile_email": "Email address", diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts index e2e04d48..67e56775 100644 --- a/packages/hoppscotch-common/src/components.d.ts +++ b/packages/hoppscotch-common/src/components.d.ts @@ -230,6 +230,7 @@ declare module 'vue' { SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default'] SmartChangeLanguage: typeof import('./components/smart/ChangeLanguage.vue')['default'] SmartColorModePicker: typeof import('./components/smart/ColorModePicker.vue')['default'] + SmartEncodingPicker: typeof import('./components/smart/EncodingPicker.vue')['default'] SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default'] TabPrimary: typeof import('./components/tab/Primary.vue')['default'] TabSecondary: typeof import('./components/tab/Secondary.vue')['default'] diff --git a/packages/hoppscotch-common/src/components/smart/EncodingPicker.vue b/packages/hoppscotch-common/src/components/smart/EncodingPicker.vue new file mode 100644 index 00000000..64866228 --- /dev/null +++ b/packages/hoppscotch-common/src/components/smart/EncodingPicker.vue @@ -0,0 +1,60 @@ + + + diff --git a/packages/hoppscotch-common/src/newstore/settings.ts b/packages/hoppscotch-common/src/newstore/settings.ts index 8765770f..d6a792af 100644 --- a/packages/hoppscotch-common/src/newstore/settings.ts +++ b/packages/hoppscotch-common/src/newstore/settings.ts @@ -20,6 +20,10 @@ export const HoppAccentColors = [ "pink", ] as const +export const EncodeModes = ["enable", "disable", "auto"] as const + +export type EncodeMode = (typeof EncodeModes)[number] + export type HoppAccentColor = (typeof HoppAccentColors)[number] export type SettingsDef = { @@ -59,6 +63,7 @@ export type SettingsDef = { } THEME_COLOR: HoppAccentColor BG_COLOR: HoppBgColor + ENCODE_MODE: EncodeMode TELEMETRY_ENABLED: boolean EXPAND_NAVIGATION: boolean SIDEBAR: boolean @@ -107,6 +112,7 @@ export const getDefaultSettings = (): SettingsDef => ({ }, THEME_COLOR: "indigo", BG_COLOR: "system", + ENCODE_MODE: "enable", TELEMETRY_ENABLED: true, EXPAND_NAVIGATION: false, SIDEBAR: true, diff --git a/packages/hoppscotch-common/src/pages/settings.vue b/packages/hoppscotch-common/src/pages/settings.vue index 81bb4f2a..d141c7e3 100644 --- a/packages/hoppscotch-common/src/pages/settings.vue +++ b/packages/hoppscotch-common/src/pages/settings.vue @@ -4,38 +4,13 @@

- {{ t("settings.theme") }} + {{ t("settings.general") }}

- {{ t("settings.theme_description") }} + {{ t("settings.general_description") }}

-
-

- {{ t("settings.background") }} -

-
- {{ t(getColorModeName(colorMode.preference)) }} - - ({{ t(getColorModeName(colorMode.value)) }}) - -
-
- -
-
-
-

- {{ t("settings.accent_color") }} -

-
- {{ ACCENT_COLOR.charAt(0).toUpperCase() + ACCENT_COLOR.slice(1) }} -
-
- -
-

{{ t("settings.language") }} @@ -44,6 +19,19 @@

+ +
+

+ {{ t("settings.query_parameters_encoding") }} +

+
+ {{ t("settings.query_parameters_encoding_description") }} +
+
+ +
+
+

{{ t("settings.experiments") }} @@ -96,6 +84,44 @@

+
+
+

+ {{ t("settings.theme") }} +

+

+ {{ t("settings.theme_description") }} +

+
+
+
+

+ {{ t("settings.background") }} +

+
+ {{ t(getColorModeName(colorMode.preference)) }} + + ({{ t(getColorModeName(colorMode.value)) }}) + +
+
+ +
+
+
+

+ {{ t("settings.accent_color") }} +

+
+ {{ ACCENT_COLOR.charAt(0).toUpperCase() + ACCENT_COLOR.slice(1) }} +
+
+ +
+
+
+
+

diff --git a/packages/hoppscotch-common/src/platform/std/interceptors/agent/index.ts b/packages/hoppscotch-common/src/platform/std/interceptors/agent/index.ts index a4040fd8..ddb25045 100644 --- a/packages/hoppscotch-common/src/platform/std/interceptors/agent/index.ts +++ b/packages/hoppscotch-common/src/platform/std/interceptors/agent/index.ts @@ -6,7 +6,6 @@ import { RequestRunResult, } from "~/services/interceptor.service" import { Service } from "dioc" -import { cloneDeep } from "lodash-es" import * as E from "fp-ts/Either" import { ref, watch } from "vue" import { z } from "zod" @@ -24,6 +23,7 @@ import { UIExtensionService } from "~/services/ui-extension.service" import { x25519 } from "@noble/curves/ed25519" import { base16 } from "@scure/base" import { invokeAction } from "~/helpers/actions" +import { preProcessRequest } from "../helpers" type KeyValuePair = { key: string @@ -98,33 +98,6 @@ type RunRequestResponse = { // and the axios present in this package type AxiosRequestConfig = Parameters[0] -export const preProcessRequest = ( - req: AxiosRequestConfig -): AxiosRequestConfig => { - const reqClone = cloneDeep(req) - - // If the parameters are URLSearchParams, inject them to URL instead - // This prevents issues of marshalling the URLSearchParams to the proxy - if (reqClone.params instanceof URLSearchParams) { - try { - const url = new URL(reqClone.url ?? "") - - for (const [key, value] of reqClone.params.entries()) { - url.searchParams.append(key, value) - } - - reqClone.url = url.toString() - } catch (e) { - // making this a non-empty block, so we can make the linter happy. - // we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :) - } - - reqClone.params = {} - } - - return reqClone -} - async function processBody( axiosReq: AxiosRequestConfig ): Promise { diff --git a/packages/hoppscotch-common/src/platform/std/interceptors/browser.ts b/packages/hoppscotch-common/src/platform/std/interceptors/browser.ts index 4ddc479f..7551f285 100644 --- a/packages/hoppscotch-common/src/platform/std/interceptors/browser.ts +++ b/packages/hoppscotch-common/src/platform/std/interceptors/browser.ts @@ -6,34 +6,7 @@ import { RequestRunResult, } from "../../../services/interceptor.service" import axios, { AxiosRequestConfig, CancelToken } from "axios" -import { cloneDeep } from "lodash-es" - -export const preProcessRequest = ( - req: AxiosRequestConfig -): AxiosRequestConfig => { - const reqClone = cloneDeep(req) - - // If the parameters are URLSearchParams, inject them to URL instead - // This prevents issues of marshalling the URLSearchParams to the proxy - if (reqClone.params instanceof URLSearchParams) { - try { - const url = new URL(reqClone.url ?? "") - - for (const [key, value] of reqClone.params.entries()) { - url.searchParams.append(key, value) - } - - reqClone.url = url.toString() - } catch (e) { - // making this a non-empty block, so we can make the linter happy. - // we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :) - } - - reqClone.params = {} - } - - return reqClone -} +import { preProcessRequest } from "./helpers" async function runRequest( req: AxiosRequestConfig, @@ -41,11 +14,9 @@ async function runRequest( ): RequestRunResult["response"] { const timeStart = Date.now() - const processedReq = preProcessRequest(req) - try { const res = await axios({ - ...processedReq, + ...req, cancelToken, responseType: "arraybuffer", }) diff --git a/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts b/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts index 849c866e..de5efb12 100644 --- a/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts +++ b/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts @@ -7,13 +7,13 @@ import { InterceptorError, RequestRunResult, } from "~/services/interceptor.service" -import { cloneDeep } from "lodash-es" import { computed, readonly, ref } from "vue" import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent" import SettingsExtension from "~/components/settings/Extension.vue" import InterceptorsExtensionSubtitle from "~/components/interceptors/ExtensionSubtitle.vue" import InterceptorsErrorPlaceholder from "~/components/interceptors/ErrorPlaceholder.vue" import { until } from "@vueuse/core" +import { preProcessRequest } from "./helpers" export const defineSubscribableObject = (obj: T) => { const proxyObject = { @@ -55,31 +55,6 @@ export const cancelRunningExtensionRequest = () => { window.__POSTWOMAN_EXTENSION_HOOK__?.cancelRequest() } -const preProcessRequest = (req: AxiosRequestConfig): AxiosRequestConfig => { - const reqClone = cloneDeep(req) - - // If the parameters are URLSearchParams, inject them to URL instead - // This prevents marshalling issues with structured cloning of URLSearchParams - if (reqClone.params instanceof URLSearchParams) { - try { - const url = new URL(reqClone.url ?? "") - - for (const [key, value] of reqClone.params.entries()) { - url.searchParams.append(key, value) - } - - reqClone.url = url.toString() - } catch (e) { - // making this a non-empty block, so we can make the linter happy. - // we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :) - } - - reqClone.params = {} - } - - return reqClone -} - export type ExtensionStatus = "available" | "unknown-origin" | "waiting" /** diff --git a/packages/hoppscotch-common/src/platform/std/interceptors/helpers.ts b/packages/hoppscotch-common/src/platform/std/interceptors/helpers.ts new file mode 100644 index 00000000..cb44a6db --- /dev/null +++ b/packages/hoppscotch-common/src/platform/std/interceptors/helpers.ts @@ -0,0 +1,54 @@ +import { AxiosRequestConfig } from "axios" +import { cloneDeep } from "lodash-es" +import { useSetting } from "~/composables/settings" + +// Helper function to check if a string is already encoded +const isEncoded = (value: string) => { + try { + return value !== decodeURIComponent(value) + } catch (e) { + return false // in case of malformed URI sequence + } +} + +export const preProcessRequest = ( + req: AxiosRequestConfig +): AxiosRequestConfig => { + const reqClone = cloneDeep(req) + const encodeMode = useSetting("ENCODE_MODE") + + // If the parameters are URLSearchParams, inject them to URL instead + // This prevents issues of marshalling the URLSearchParams to the proxy + if (reqClone.params instanceof URLSearchParams) { + try { + const url = new URL(reqClone.url ?? "") + + for (const [key, value] of reqClone.params.entries()) { + let finalValue = value + if ( + encodeMode.value === "enable" || + (encodeMode.value === "auto" && + /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/.test(value)) + ) { + // Check if the value is already encoded (e.g., contains % symbols) + if (!isEncoded(value)) { + finalValue = encodeURIComponent(value) + } + } + + // Set the parameter with the final value + url.searchParams.append(key, finalValue) + } + + // decode the URL to prevent double encoding + reqClone.url = decodeURIComponent(url.toString()) + } catch (e) { + // making this a non-empty block, so we can make the linter happy. + // we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :) + } + + reqClone.params = {} + } + + return reqClone +} diff --git a/packages/hoppscotch-common/src/platform/std/interceptors/proxy.ts b/packages/hoppscotch-common/src/platform/std/interceptors/proxy.ts index f3bd7bfd..1551db2d 100644 --- a/packages/hoppscotch-common/src/platform/std/interceptors/proxy.ts +++ b/packages/hoppscotch-common/src/platform/std/interceptors/proxy.ts @@ -1,7 +1,7 @@ import { Interceptor, RequestRunResult } from "~/services/interceptor.service" import { AxiosRequestConfig, CancelToken } from "axios" import * as E from "fp-ts/Either" -import { preProcessRequest } from "./browser" +import { preProcessRequest } from "./helpers" import { v4 } from "uuid" import axios from "axios" import { settingsStore } from "~/newstore/settings" diff --git a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts index 9afdbac7..ec6f2bdc 100644 --- a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts +++ b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts @@ -26,6 +26,8 @@ const ThemeColorSchema = z.enum([ const BgColorSchema = z.enum(["system", "light", "dark", "black"]) +const EncodeMode = z.enum(["enable", "disable", "auto"]) + const SettingsDefSchema = z.object({ syncCollections: z.boolean(), syncHistory: z.boolean(), @@ -41,6 +43,7 @@ const SettingsDefSchema = z.object({ }), THEME_COLOR: ThemeColorSchema, BG_COLOR: BgColorSchema, + ENCODE_MODE: EncodeMode.catch("enable"), TELEMETRY_ENABLED: z.boolean(), EXPAND_NAVIGATION: z.boolean(), SIDEBAR: z.boolean(),