Merge pull request #2050 from guardicore/2002-config-encryption-in-ui

2002 config encryption in UI
This commit is contained in:
VakarisZ 2022-06-30 15:03:52 +03:00 committed by GitHub
commit fe36f863b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 120 additions and 89 deletions

View File

@ -20,6 +20,7 @@
"bootstrap": "^4.5.3",
"classnames": "^2.3.1",
"core-js": "^3.18.2",
"crypto-js": "^4.1.1",
"d3": "^5.14.1",
"downloadjs": "^1.4.7",
"fetch": "^1.1.0",
@ -4191,6 +4192,11 @@
"semver": "bin/semver"
}
},
"node_modules/crypto-js": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
"integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
},
"node_modules/css-loader": {
"version": "6.7.1",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
@ -19166,6 +19172,11 @@
}
}
},
"crypto-js": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
"integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
},
"css-loader": {
"version": "6.7.1",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",

View File

@ -76,6 +76,7 @@
"bootstrap": "^4.5.3",
"classnames": "^2.3.1",
"core-js": "^3.18.2",
"crypto-js": "^4.1.1",
"d3": "^5.14.1",
"downloadjs": "^1.4.7",
"fetch": "^1.1.0",

View File

@ -1,53 +1,44 @@
import {Button, Modal, Form} from 'react-bootstrap';
import {Button, Form, Modal} from 'react-bootstrap';
import React, {useState} from 'react';
import FileSaver from 'file-saver';
import AuthComponent from '../AuthComponent';
import '../../styles/components/configuration-components/ExportConfigModal.scss';
import {encryptText} from '../utils/PasswordBasedEncryptor';
type Props = {
show: boolean,
configuration: object,
onHide: () => void
}
const ConfigExportModal = (props: Props) => {
// TODO: Change this endpoint to new agent-configuration endpoint
const configExportEndpoint = '/api/configuration/export';
const [pass, setPass] = useState('');
const [radioValue, setRadioValue] = useState('password');
const authComponent = new AuthComponent({});
function isExportBtnDisabled() {
return pass === '' && radioValue === 'password';
}
function onSubmit() {
authComponent.authFetch(configExportEndpoint,
{
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
should_encrypt: (radioValue === 'password'),
password: pass
})
}
)
.then(res => res.json())
.then(res => {
let configToExport = res['config_export'];
if (res['encrypted']) {
configToExport = new Blob([configToExport]);
} else {
configToExport = new Blob(
[JSON.stringify(configToExport, null, 2)],
{type: 'text/plain;charset=utf-8'}
);
}
FileSaver.saveAs(configToExport, 'monkey.conf');
props.onHide();
})
let config = props.configuration;
let config_export = {'metadata': {}, 'contents': null};
if (radioValue === 'password') {
config_export.contents = encryptText(JSON.stringify(config), pass);
config_export.metadata = {'encrypted': true};
} else {
config_export.contents = config;
config_export.metadata = {'encrypted': false};
}
let export_json = JSON.stringify(config_export, null, 2);
let export_blob = new Blob(
[export_json],
{type: 'text/plain;charset=utf-8'}
);
FileSaver.saveAs(export_blob, 'monkey.conf');
props.onHide();
}
return (

View File

@ -9,10 +9,12 @@ import UnsafeConfigOptionsConfirmationModal
from './UnsafeConfigOptionsConfirmationModal.js';
import UploadStatusIcon, {UploadStatuses} from '../ui-components/UploadStatusIcon';
import isUnsafeOptionSelected from '../utils/SafeOptionValidator.js';
import {decryptText} from '../utils/PasswordBasedEncryptor';
type Props = {
show: boolean,
schema: object,
onClose: (importSuccessful: boolean) => void
}
@ -23,9 +25,9 @@ const ConfigImportModal = (props: Props) => {
const [uploadStatus, setUploadStatus] = useState(UploadStatuses.clean);
const [configContents, setConfigContents] = useState(null);
const [candidateConfig, setCandidateConfig] = useState(null);
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [configEncrypted, setConfigEncrypted] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [unsafeOptionsVerified, setUnsafeOptionsVerified] = useState(false);
const [showUnsafeOptionsConfirmation,
@ -36,10 +38,33 @@ const ConfigImportModal = (props: Props) => {
useEffect(() => {
if (configContents !== null) {
sendConfigToServer();
tryImport();
}
}, [configContents, unsafeOptionsVerified])
function tryImport() {
if (configEncrypted && !showPassword){
setShowPassword(true);
} else if (configEncrypted && showPassword) {
try {
let decryptedConfig = JSON.parse(decryptText(configContents, password));
setConfigEncrypted(false);
setConfigContents(decryptedConfig);
} catch (e) {
setUploadStatus(UploadStatuses.error);
setErrorMessage('Decryption failed: Password is wrong or the file is corrupted');
}
} else if(!unsafeOptionsVerified) {
if(isUnsafeOptionSelected(props.schema, configContents)){
setShowUnsafeOptionsConfirmation(true);
} else {
setUnsafeOptionsVerified(true);
}
} else {
sendConfigToServer();
setUploadStatus(UploadStatuses.success);
}
}
function sendConfigToServer() {
authComponent.authFetch(configImportEndpoint,
@ -48,34 +73,14 @@ const ConfigImportModal = (props: Props) => {
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
config: configContents,
password: password,
unsafeOptionsVerified: unsafeOptionsVerified
})
}
).then(res => res.json())
.then(res => {
if (res['import_status'] === 'invalid_credentials') {
setUploadStatus(UploadStatuses.success);
if (showPassword){
setErrorMessage(res['message']);
} else {
setShowPassword(true);
setErrorMessage('');
}
} else if (res['import_status'] === 'invalid_configuration') {
if (res['import_status'] === 'invalid_configuration') {
setUploadStatus(UploadStatuses.error);
setErrorMessage(res['message']);
} else if (res['import_status'] === 'unsafe_options_verification_required') {
setUploadStatus(UploadStatuses.success);
setErrorMessage('');
if (isUnsafeOptionSelected(res['config_schema'], JSON.parse(res['config']))) {
setShowUnsafeOptionsConfirmation(true);
setCandidateConfig(res['config']);
} else {
setUnsafeOptionsVerified(true);
}
} else if (res['import_status'] === 'imported'){
} else if (res['import_status'] === 'imported') {
resetState();
props.onClose(true);
}
@ -83,7 +88,8 @@ const ConfigImportModal = (props: Props) => {
}
function isImportDisabled(): boolean {
return uploadStatus !== UploadStatuses.success || (showPassword && password === '')
// Don't allow import if password input is empty or there's an error
return (showPassword && password === '') || (errorMessage !== '');
}
function resetState() {
@ -95,13 +101,22 @@ const ConfigImportModal = (props: Props) => {
setShowUnsafeOptionsConfirmation(false);
setUnsafeOptionsVerified(false);
setFileFieldKey(Date.now()); // Resets the file input
setConfigEncrypted(false);
}
function uploadFile(event) {
setShowPassword(false);
let reader = new FileReader();
reader.onload = (event) => {
setConfigContents(event.target.result);
let importContents = null;
try {
importContents = JSON.parse(event.target.result);
} catch (e){
setErrorMessage('File is not in a valid json format');
return
}
setConfigEncrypted(importContents['metadata']['encrypted']);
setConfigContents(importContents['contents']);
};
reader.readAsText(event.target.files[0]);
}
@ -115,7 +130,6 @@ const ConfigImportModal = (props: Props) => {
}}
onContinueClick={() => {
setUnsafeOptionsVerified(true);
setConfigContents(candidateConfig);
}}
/>
);
@ -150,20 +164,21 @@ const ConfigImportModal = (props: Props) => {
key={fileFieldKey}/>
<UploadStatusIcon status={uploadStatus}/>
{showPassword && <PasswordInput onChange={setPassword}/>}
{showPassword && <PasswordInput onChange={(password) => {setPassword(password);
setErrorMessage('')}}/>}
{errorMessage &&
<Alert variant={'danger'} className={'import-error'}>
<FontAwesomeIcon icon={faExclamationCircle} style={{'marginRight': '5px'}}/>
{errorMessage}
</Alert>
<Alert variant={'danger'} className={'import-error'}>
<FontAwesomeIcon icon={faExclamationCircle} style={{'marginRight': '5px'}}/>
{errorMessage}
</Alert>
}
</Form>
</div>
</Modal.Body>
<Modal.Footer>
<Button variant={'info'}
onClick={sendConfigToServer}
onClick={tryImport}
disabled={isImportDisabled()}>
Import
</Button>

View File

@ -23,6 +23,10 @@ const CONFIG_URL = '/api/configuration/island';
export const API_PBA_LINUX = '/api/file-upload/PBAlinux';
export const API_PBA_WINDOWS = '/api/file-upload/PBAwindows';
const configSubmitAction = 'config-submit';
const configExportAction = 'config-export';
const configSaveAction = 'config-saved';
class ConfigurePageComponent extends AuthComponent {
constructor(props) {
@ -87,14 +91,16 @@ class ConfigurePageComponent extends AuthComponent {
};
onUnsafeConfirmationCancelClick = () => {
this.setState({showUnsafeOptionsConfirmation: false});
this.setState({showUnsafeOptionsConfirmation: false, lastAction: 'none'});
}
onUnsafeConfirmationContinueClick = () => {
this.setState({showUnsafeOptionsConfirmation: false});
if (this.state.lastAction === 'submit_attempt') {
if (this.state.lastAction === configSubmitAction) {
this.configSubmit();
} else if (this.state.lastAction === configExportAction) {
this.configSubmit();
this.setState({showConfigExportModal: true});
}
}
@ -113,37 +119,31 @@ class ConfigurePageComponent extends AuthComponent {
};
onSubmit = () => {
this.attemptConfigSubmit();
this.setState({lastAction: configSubmitAction}, this.attemptConfigSubmit)
};
canSafelySubmitConfig(config) {
return !isUnsafeOptionSelected(this.state.schema, config);
}
checkAndShowUnsafeAttackWarning = () => {
if (isUnsafeOptionSelected(this.state.schema, this.state.configuration)) {
this.setState({showUnsafeAttackOptionsWarning: true});
async attemptConfigSubmit() {
await this.updateConfigSection();
if (this.canSafelySubmitConfig(this.state.configuration)) {
this.configSubmit();
if(this.state.lastAction === configExportAction){
this.setState({showConfigExportModal: true})
}
} else {
this.setState({showUnsafeOptionsConfirmation: true});
}
}
attemptConfigSubmit() {
this.updateConfigSection();
this.setState({lastAction: 'submit_attempt'}, () => {
if (this.canSafelySubmitConfig(this.state.configuration)) {
this.configSubmit();
} else {
this.setState({showUnsafeOptionsConfirmation: true});
}
}
);
}
configSubmit() {
this.sendConfig()
return this.sendConfig()
.then(res => res.json())
.then(res => {
this.setState({
lastAction: 'saved',
lastAction: configSaveAction,
schema: res.schema,
configuration: res.configuration
});
@ -167,11 +167,12 @@ class ConfigurePageComponent extends AuthComponent {
if (Object.keys(this.state.currentFormData).length > 0) {
newConfig[this.currentSection] = this.state.currentFormData;
}
this.setState({configuration: newConfig, lastAction: 'none'});
this.setState({configuration: newConfig});
};
renderConfigExportModal = () => {
return (<ConfigExportModal show={this.state.showConfigExportModal}
configuration={this.state.configuration}
onHide={() => {
this.setState({showConfigExportModal: false});
}}/>);
@ -179,6 +180,7 @@ class ConfigurePageComponent extends AuthComponent {
renderConfigImportModal = () => {
return (<ConfigImportModal show={this.state.showConfigImportModal}
schema={this.state.schema}
onClose={this.onClose}/>);
}
@ -307,9 +309,9 @@ class ConfigurePageComponent extends AuthComponent {
this.authFetch(apiEndpoint, request_options);
}
exportConfig = () => {
this.updateConfigSection();
this.setState({showConfigExportModal: true});
exportConfig = async () => {
await this.setState({lastAction: configExportAction});
await this.attemptConfigSubmit();
};
sendConfig() {
@ -451,7 +453,7 @@ class ConfigurePageComponent extends AuthComponent {
Configuration reset successfully.
</div>
: ''}
{this.state.lastAction === 'saved' ?
{this.state.lastAction === configSaveAction ?
<div className='alert alert-success'>
<FontAwesomeIcon icon={faCheck} style={{'marginRight': '5px'}}/>
Configuration saved successfully.

View File

@ -0,0 +1,11 @@
import AES from 'crypto-js/aes';
import Utf8 from 'crypto-js/enc-utf8';
export function encryptText(content: string, password: string): string {
return AES.encrypt(content, password).toString();
}
export function decryptText(ciphertext: string, password: string): string {
let bytes = AES.decrypt(ciphertext, password);
return bytes.toString(Utf8);
}