rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-01 00:24:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat/add warnings for sensitive fields other auths (#5100)

Browse Source
This commit is contained in:
Sanjai Kumar
2025-07-30 00:26:45 +05:30
committed by GitHub
parent 62151330f2
commit b571c1a1a5
14 changed files with 224 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/constants.js Normal file
View File

@@ -0,0 +1,11 @@
const sensitiveFields = [
'request.auth.oauth2.clientSecret',
'request.auth.basic.password',
'request.auth.digest.password',
'request.auth.wsse.password',
'request.auth.ntlm.password',
'request.auth.awsv4.secretAccessKey',
'request.auth.bearer.token'
];
export { sensitiveFields };

45
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
View File

@@ -1,4 +1,4 @@
import React, { useRef, useEffect } from 'react';
import React, { useRef, useEffect, useMemo } from 'react';
import cloneDeep from 'lodash/cloneDeep';
import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCheck } from '@tabler/icons';
import { useTheme } from 'providers/Theme';
@@ -13,7 +13,10 @@ import { variableNameRegex } from 'utils/common/regex';
import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
import toast from 'react-hot-toast';
import { Tooltip } from 'react-tooltip';
import { getGlobalEnvironmentVariables } from 'utils/collections';
import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
import { getGlobalEnvironmentVariables, flattenItems } from 'utils/collections';
import { isItemARequest } from 'utils/collections';
import { sensitiveFields } from './constants';
const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables, onClose }) => {
const dispatch = useDispatch();
@@ -26,6 +29,34 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
_collection.globalEnvironmentVariables = globalEnvironmentVariables;
const nonSecretSensitiveVarUsageMap = useMemo(() => {
const result = {};
if (!collection || !environment?.variables) {
return result;
}
const nonSecretVars = environment.variables.filter((v) => v.enabled && !v.secret && v.name);
if (!nonSecretVars.length) {
return result;
}
const varNames = new Set(nonSecretVars.map((v) => v.name));
const items = flattenItems(collection.items || []);
items.forEach((item) => {
if (!isItemARequest(item)) return;
const requestObj = item.draft ? item.draft : item;
sensitiveFields.forEach((fieldPath) => {
const value = fieldPath.split('.').reduce((obj, key) => (obj ? obj[key] : undefined), requestObj);
if (typeof value === 'string') {
varNames.forEach((varName) => {
if (new RegExp(`\{\{\s*${varName}\s*\}\}`).test(value)) {
result[varName] = true;
}
});
}
});
});
return result;
}, [collection, environment]);
const formik = useFormik({
enableReinitialize: true,
initialValues: environment.variables || [],
@@ -61,6 +92,8 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
}
});
const hasSensitiveUsage = (name) => !!nonSecretSensitiveVarUsageMap[name];
// Effect to track modifications.
React.useEffect(() => {
setIsModified(formik.dirty);
@@ -163,7 +196,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
<ErrorMessage name={`${index}.name`} />
</div>
</td>
<td className="flex flex-row flex-nowrap">
<td className="flex flex-row flex-nowrap items-center">
<div className="overflow-hidden grow w-full relative">
<SingleLineEditor
theme={storedTheme}
@@ -174,6 +207,12 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
/>
</div>
{!variable.secret && hasSensitiveUsage(variable.name) && (
<SensitiveFieldWarning
fieldName={variable.name}
warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
/>
)}
</td>
<td className="text-center">
<input

9
packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js
View File

@@ -6,13 +6,16 @@ import SingleLineEditor from 'components/SingleLineEditor';
import { updateAuth } from 'providers/ReduxStore/slices/collections';
import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
import StyledWrapper from './StyledWrapper';
import { update } from 'lodash';
import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
const dispatch = useDispatch();
const { storedTheme } = useTheme();
const awsv4Auth = get(request, 'auth.awsv4', {});
const { isSensitive } = useDetectSensitiveField(collection);
const { showWarning, warningMessage } = isSensitive(awsv4Auth?.secretAccessKey);
const handleRun = () => dispatch(sendRequest(item, collection.uid));
@@ -144,7 +147,7 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
</div>
<label className="block font-medium mb-2">Secret Access Key</label>
<div className="single-line-editor-wrapper mb-2">
<div className="single-line-editor-wrapper mb-2 flex items-center">
<SingleLineEditor
value={awsv4Auth.secretAccessKey || ''}
theme={storedTheme}
@@ -155,6 +158,8 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
item={item}
isSecret={true}
/>
{showWarning && <SensitiveFieldWarning fieldName="awsv4-secret-access-key" warningMessage={warningMessage} />}
</div>
<label className="block font-medium mb-2">Session Token</label>

7
packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
View File

@@ -1,4 +1,6 @@
import React from 'react';
import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
import get from 'lodash/get';
import { useTheme } from 'providers/Theme';
import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
const { storedTheme } = useTheme();
const basicAuth = get(request, 'auth.basic', {});
const { isSensitive } = useDetectSensitiveField(collection);
const { showWarning, warningMessage } = isSensitive(basicAuth?.password);
const handleRun = () => dispatch(sendRequest(item, collection.uid));
@@ -63,7 +67,7 @@ const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
</div>
<label className="block font-medium mb-2">Password</label>
<div className="single-line-editor-wrapper">
<div className="single-line-editor-wrapper flex items-center">
<SingleLineEditor
value={basicAuth.password || ''}
theme={storedTheme}
@@ -74,6 +78,7 @@ const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
item={item}
isSecret={true}
/>
{showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
</div>
</StyledWrapper>
);

7
packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
View File

@@ -1,4 +1,6 @@
import React from 'react';
import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
import get from 'lodash/get';
import { useTheme } from 'providers/Theme';
import { useDispatch } from 'react-redux';
@@ -13,6 +15,8 @@ const BearerAuth = ({ item, collection, updateAuth, request, save }) => {
// Use the request prop directly like OAuth2ClientCredentials does
const bearerToken = get(request, 'auth.bearer.token', '');
const { isSensitive } = useDetectSensitiveField(collection);
const { showWarning, warningMessage } = isSensitive(bearerToken);
const handleRun = () => dispatch(sendRequest(item, collection.uid));
@@ -36,7 +40,7 @@ const BearerAuth = ({ item, collection, updateAuth, request, save }) => {
return (
<StyledWrapper className="mt-2 w-full">
<label className="block font-medium mb-2">Token</label>
<div className="single-line-editor-wrapper">
<div className="single-line-editor-wrapper flex items-center">
<SingleLineEditor
value={bearerToken}
theme={storedTheme}
@@ -47,6 +51,7 @@ const BearerAuth = ({ item, collection, updateAuth, request, save }) => {
item={item}
isSecret={true}
/>
{showWarning && <SensitiveFieldWarning fieldName="bearer-token" warningMessage={warningMessage} />}
</div>
</StyledWrapper>
);

9
packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js
View File

@@ -1,4 +1,6 @@
import React from 'react';
import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
import get from 'lodash/get';
import { useTheme } from 'providers/Theme';
import { useDispatch } from 'react-redux';
@@ -11,6 +13,8 @@ const DigestAuth = ({ item, collection, updateAuth, request, save }) => {
const { storedTheme } = useTheme();
const digestAuth = get(request, 'auth.digest', {});
const { isSensitive } = useDetectSensitiveField(collection);
const { showWarning, warningMessage } = isSensitive(digestAuth?.password);
const handleRun = () => dispatch(sendRequest(item, collection.uid));
@@ -62,9 +66,9 @@ const DigestAuth = ({ item, collection, updateAuth, request, save }) => {
</div>
<label className="block font-medium mb-2">Password</label>
<div className="single-line-editor-wrapper">
<div className="single-line-editor-wrapper flex items-center">
<SingleLineEditor
value={digestAuth.password || ''}
value={digestAuth.username || ''}
theme={storedTheme}
onSave={handleSave}
onChange={(val) => handlePasswordChange(val)}
@@ -73,6 +77,7 @@ const DigestAuth = ({ item, collection, updateAuth, request, save }) => {
item={item}
isSecret={true}
/>
{showWarning && <SensitiveFieldWarning fieldName="digest-password" warningMessage={warningMessage} />}
</div>
</StyledWrapper>
);

7
packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.js
View File

@@ -1,4 +1,6 @@
import React from 'react';
import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
import get from 'lodash/get';
import { useTheme } from 'providers/Theme';
import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
const { storedTheme } = useTheme();
const ntlmAuth = get(request, 'auth.ntlm', {});
const { isSensitive } = useDetectSensitiveField(collection);
const { showWarning, warningMessage } = isSensitive(ntlmAuth?.password);
const handleRun = () => dispatch(sendRequest(item, collection.uid));
@@ -80,7 +84,7 @@ const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
</div>
<label className="block font-medium mb-2">Password</label>
<div className="single-line-editor-wrapper">
<div className="single-line-editor-wrapper flex items-center">
<SingleLineEditor
value={ntlmAuth.password || ''}
theme={storedTheme}
@@ -91,6 +95,7 @@ const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
item={item}
isSecret={true}
/>
{showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
</div>
<label className="block font-medium mb-2">Domain</label>

12
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
View File

@@ -1,4 +1,5 @@
import React, { useRef, forwardRef } from 'react';
import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
import get from 'lodash/get';
import { useTheme } from 'providers/Theme';
import { useDispatch } from 'react-redux';
@@ -9,13 +10,14 @@ import StyledWrapper from './StyledWrapper';
import { inputsConfig } from './inputsConfig';
import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAuth, collection, folder }) => {
const dispatch = useDispatch();
const { storedTheme } = useTheme();
const dropdownTippyRef = useRef();
const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
const { isSensitive } = useDetectSensitiveField(collection);
const oAuth = get(request, 'auth.oauth2', {});
const {
callbackUrl,
@@ -129,12 +131,15 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
</div>
{inputsConfig.map((input) => {
const { key, label, isSecret } = input;
const value = oAuth[key] || '';
const { showWarning, warningMessage } = isSensitive(value);
return (
<div className="flex items-center gap-4 w-full" key={`input-${key}`}>
<label className="block min-w-[140px]">{label}</label>
<div className="single-line-editor-wrapper flex-1">
<div className="single-line-editor-wrapper flex-1 flex items-center">
<SingleLineEditor
value={oAuth[key] || ''}
value={value}
theme={storedTheme}
onSave={handleSave}
onChange={(val) => handleChange(key, val)}
@@ -143,6 +148,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
item={item}
isSecret={isSecret}
/>
{isSecret && showWarning && <SensitiveFieldWarning fieldName={key} warningMessage={warningMessage} />}
</div>
</div>
);

12
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
View File

@@ -1,4 +1,5 @@
import React, { useRef, forwardRef } from 'react';
import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
import get from 'lodash/get';
import { useTheme } from 'providers/Theme';
import { useDispatch } from 'react-redux';
@@ -9,13 +10,14 @@ import { inputsConfig } from './inputsConfig';
import Dropdown from 'components/Dropdown';
import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
const dispatch = useDispatch();
const { storedTheme } = useTheme();
const dropdownTippyRef = useRef();
const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
const { isSensitive } = useDetectSensitiveField(collection);
const oAuth = get(request, 'auth.oauth2', {});
const {
@@ -96,12 +98,15 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
</div>
{inputsConfig.map((input) => {
const { key, label, isSecret } = input;
const value = oAuth[key] || '';
const { showWarning, warningMessage } = isSensitive(value);
return (
<div className="flex items-center gap-4 w-full" key={`input-${key}`}>
<label className="block min-w-[140px]">{label}</label>
<div className="single-line-editor-wrapper flex-1">
<div className="single-line-editor-wrapper flex-1 flex items-center">
<SingleLineEditor
value={oAuth[key] || ''}
value={value}
theme={storedTheme}
onSave={handleSave}
onChange={(val) => handleChange(key, val)}
@@ -110,6 +115,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
item={item}
isSecret={isSecret}
/>
{isSecret && showWarning && <SensitiveFieldWarning fieldName={key} warningMessage={warningMessage} />}
</div>
</div>
);

12
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
View File

@@ -1,4 +1,5 @@
import React, { useRef, forwardRef } from 'react';
import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
import get from 'lodash/get';
import { useTheme } from 'providers/Theme';
import { useDispatch } from 'react-redux';
@@ -9,14 +10,15 @@ import { inputsConfig } from './inputsConfig';
import Dropdown from 'components/Dropdown';
import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
import SensitiveFieldWarning from 'components/SensitiveFieldWarning/index';
const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
const dispatch = useDispatch();
const { storedTheme } = useTheme();
const dropdownTippyRef = useRef();
const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
const oAuth = get(request, 'auth.oauth2', {});
const { isSensitive } = useDetectSensitiveField(collection);
const {
accessTokenUrl,
@@ -99,12 +101,15 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
</div>
{inputsConfig.map((input) => {
const { key, label, isSecret } = input;
const value = oAuth[key] || '';
const { showWarning, warningMessage } = isSensitive(value);
return (
<div className="flex items-center gap-4 w-full" key={`input-${key}`}>
<label className="block min-w-[140px]">{label}</label>
<div className="single-line-editor-wrapper flex-1">
<div className="single-line-editor-wrapper flex-1 flex items-center">
<SingleLineEditor
value={oAuth[key] || ''}
value={value}
theme={storedTheme}
onSave={handleSave}
onChange={(val) => handleChange(key, val)}
@@ -113,6 +118,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
item={item}
isSecret={isSecret}
/>
{isSecret && showWarning && <SensitiveFieldWarning fieldName={key} warningMessage={warningMessage} />}
</div>
</div>
);

7
packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.js
View File

@@ -1,4 +1,6 @@
import React from 'react';
import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
import get from 'lodash/get';
import { useTheme } from 'providers/Theme';
import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
const { storedTheme } = useTheme();
const wsseAuth = get(request, 'auth.wsse', {});
const { isSensitive } = useDetectSensitiveField(collection);
const { showWarning, warningMessage } = isSensitive(wsseAuth?.password);
const handleRun = () => dispatch(sendRequest(item, collection.uid));
@@ -63,7 +67,7 @@ const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
</div>
<label className="block font-medium mb-2">Password</label>
<div className="single-line-editor-wrapper">
<div className="single-line-editor-wrapper flex items-center">
<SingleLineEditor
value={wsseAuth.password || ''}
theme={storedTheme}
@@ -74,6 +78,7 @@ const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
item={item}
isSecret={true}
/>
{showWarning && <SensitiveFieldWarning fieldName="wsse-password" message={warningMessage} />}
</div>
</StyledWrapper>
);

10
packages/bruno-app/src/components/SensitiveFieldWarning/StyledWrapper.js Normal file
View File

@@ -0,0 +1,10 @@
import styled from 'styled-components';
const Wrapper = styled.div`
.tooltip-mod {
font-size: 11px !important;
width: 150px !important;
}
`;
export default Wrapper;

29
packages/bruno-app/src/components/SensitiveFieldWarning/index.js Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import { IconAlertTriangle } from '@tabler/icons';
import { Tooltip } from 'react-tooltip';
import StyledWrapper from './StyledWrapper';
const SensitiveFieldWarning = ({ fieldName, warningMessage }) => {
const tooltipId = `sensitive-field-warning-${fieldName}`;
return (
<StyledWrapper>
<span className="ml-2 flex items-center">
<IconAlertTriangle id={tooltipId} className="text-amber-600 cursor-pointer" size={20} />
<Tooltip
anchorId={tooltipId}
className="tooltip-mod max-w-lg"
content={
<div>
<p>
<span>{warningMessage}</span>
</p>
</div>
}
/>
</span>
</StyledWrapper>
);
};
export default SensitiveFieldWarning;

67
packages/bruno-app/src/hooks/useDetectSensitiveField/index.js Normal file
View File

@@ -0,0 +1,67 @@
import { useMemo } from 'react';
const VARIABLE_NAME_REGEX = /\{\{([^}]+)\}\}/g;
const ENV_VAR_REFERENCE_REGEX = /^\s*\{\{.*\}\}\s*$/;
export const useDetectSensitiveField = (collection) => {
const envVars = useMemo(() => {
if (!collection) {
return [];
}
const activeEnv = collection?.environments?.find((env) => env.uid === collection.activeEnvironmentUid);
if (!activeEnv || !Array.isArray(activeEnv.variables)) {
return [];
}
return activeEnv.variables;
}, [collection]);
// Checks if the value is a single environment variable reference (e.g., {{API_KEY}})
const isEnvVarReference = (value) => {
return typeof value === 'string' && ENV_VAR_REFERENCE_REGEX.test(value);
};
// Extracts all variable names from a string (e.g., "Bearer {{TOKEN}}-{{SUFFIX}}" → ["TOKEN", "SUFFIX"])
const extractVarNames = (value) => {
if (!value || typeof value !== 'string') {
return [];
}
const matches = [];
let match;
while ((match = VARIABLE_NAME_REGEX.exec(value)) !== null) {
matches.push(match[1].trim());
}
return matches;
};
// Checks if a variable is present and not marked as secret in the environment
const isVarNotSecret = (varName, envVars = []) => {
const found = envVars.find((v) => v.name === varName);
return found && !found.secret;
};
const isSensitive = (value) => {
if (value && !isEnvVarReference(value)) {
return {
showWarning: true,
warningMessage: 'Store sensitive info as a secret variable or in a .env file'
};
}
if (value && typeof value === 'string') {
const varNames = extractVarNames(value);
if (varNames.some((varName) => isVarNotSecret(varName, envVars))) {
return {
showWarning: true,
warningMessage: 'Mark the environment variable as secret for better security.'
};
}
}
// No warning needed
return { showWarning: false };
};
return {
isSensitive
};
};