apply mask on sensitive information

master
Tudor Stanciu 2023-03-05 01:39:00 +02:00
parent d992b5eedc
commit 6f341415f0
3 changed files with 37 additions and 5 deletions

View File

@ -12,6 +12,7 @@ import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import MachineLog from "./MachineLog"; import MachineLog from "./MachineLog";
import WakeComponent from "./WakeComponent"; import WakeComponent from "./WakeComponent";
import { useSensitiveInfo } from "../../../hooks";
const useRowStyles = makeStyles({ const useRowStyles = makeStyles({
root: { root: {
@ -62,6 +63,7 @@ const Machine = ({
}) => { }) => {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const classes = useRowStyles(); const classes = useRowStyles();
const { mask } = useSensitiveInfo();
const topActions = useMemo( const topActions = useMemo(
() => actions.filter(a => a.top === true), () => actions.filter(a => a.top === true),
@ -86,11 +88,11 @@ const Machine = ({
</IconButton> </IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{machine.fullMachineName} {mask(machine.fullMachineName)}
</TableCell> </TableCell>
<TableCell>{machine.machineName}</TableCell> <TableCell>{mask(machine.machineName)}</TableCell>
<TableCell>{machine.iPv4Address}</TableCell> <TableCell>{mask(machine.iPv4Address)}</TableCell>
<TableCell>{machine.macAddress}</TableCell> <TableCell>{mask(machine.macAddress)}</TableCell>
<TableCell align="right"> <TableCell align="right">
<WakeComponent machine={machine} addLog={addLog} /> <WakeComponent machine={machine} addLog={addLog} />
{topActions.map(action => ( {topActions.map(action => (

View File

@ -1,5 +1,6 @@
import React, { useReducer, useMemo, useContext } from "react"; import React, { useReducer, useMemo, useContext } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { obfuscate } from "../utils/obfuscateStrings";
const SensitiveInfoContext = React.createContext(); const SensitiveInfoContext = React.createContext();
@ -31,7 +32,12 @@ const useSensitiveInfo = () => {
const { enabled } = state; const { enabled } = state;
const { onSensitiveInfoEnabled } = actions; const { onSensitiveInfoEnabled } = actions;
return { enabled, onSensitiveInfoEnabled }; const mask = text => {
if (!enabled) return text;
return obfuscate(text, "#");
};
return { enabled, onSensitiveInfoEnabled, mask };
}; };
const SensitiveInfoProvider = ({ children }) => { const SensitiveInfoProvider = ({ children }) => {

View File

@ -0,0 +1,24 @@
const obfuscateForChars = (text, placeholder = "*") => {
const firstChar = text.substring(0, 1);
const lastChar = text.substring(text.length - 1);
const middleChars = text
.substring(1, text.length - 1)
.replace(/[a-zA-Z0-9]/g, placeholder);
return firstChar + middleChars + lastChar;
};
const obfuscate = (text, placeholder = "*") => {
if (text.length <= 2) return text;
if (text.length <= 4) {
return obfuscateForChars(text);
}
const firstTwoChars = text.substring(0, 2);
const lastTwoChars = text.substring(text.length - 2);
const middleChars = text
.substring(2, text.length - 2)
.replace(/[a-zA-Z0-9]/g, placeholder);
return firstTwoChars + middleChars + lastTwoChars;
};
export { obfuscate };