UI: Add external link icon to Ransomware report

This commit is contained in:
Mike Salvatore 2021-09-27 14:19:27 -04:00
parent 7d9386c266
commit e67066dd0d
4 changed files with 45 additions and 42 deletions

View File

@ -3,19 +3,20 @@ import IslandHttpClient from '../../IslandHttpClient';
import {FileEncryptionTable, TableRow} from './FileEncryptionTable';
import NumberedReportSection from './NumberedReportSection';
import LoadingIcon from '../../ui-components/LoadingIcon';
import ExternalLink from '../common/ExternalLink';
const ATTACK_DESCRIPTION = 'After the attacker or malware has propagated through your network, \
your data is at risk on any machine the attacker can access. It can be \
encrypted and held for ransom, exfiltrated, or manipulated in \
whatever way the attacker chooses. \
<br /> \
<br /> \
<a \
href="https://www.guardicore.com/blog/what-are-ransomware-costs/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report" \
target="_blank" \
> \
Learn about the financial impact of ransomware on Guardicore\'s blog. \
</a>';
const ATTACK_DESCRIPTION = <>
After the attacker or malware has propagated through your network,
your data is at risk on any machine the attacker can access. It can be
encrypted and held for ransom, exfiltrated, or manipulated in
whatever way the attacker chooses.
<br />
<br />
<ExternalLink
url="https://www.guardicore.com/blog/what-are-ransomware-costs/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report"
text="Learn about the financial impact of ransomware on Guardicore's blog"
/>
</>
const HOSTNAME_REGEX = /^(.* - )?(\S+) :.*$/;

View File

@ -3,22 +3,23 @@ import IslandHttpClient from '../../IslandHttpClient';
import NumberedReportSection from './NumberedReportSection';
import LoadingIcon from '../../ui-components/LoadingIcon';
import {renderLimitedArray} from '../common/RenderArrays';
import ExternalLink from '../common/ExternalLink';
const BREACH_DESCRIPTION = <>
Ransomware attacks start after machines in the internal network get
compromised. The initial compromise was simulated by running Monkey Agents
manually. Detecting ransomware at this stage will minimize the impact to the
organization.
<br />
<br />
<ExternalLink
url="https://www.guardicore.com/blog/4-techniques-for-early-ransomware-detection/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report"
text="Learn techniques for early ransomware detection on Guardicore's blog"
/>
</>
function BreachSection() {
const [machines, setMachines] = useState(null);
let description = 'Ransomware attacks start after machines in the internal network get \
compromised. The initial compromise was simulated by running Monkey Agents \
manually. Detecting ransomware at this stage will minimize the impact to the \
organization. \
<br /> \
<br /> \
<a \
href="https://www.guardicore.com/blog/4-techniques-for-early-ransomware-detection/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report" \
target="_blank" \
> \
Learn techniques for early ransomware detection on Guardicore\'s blog. \
</a>';
useEffect(() => {
IslandHttpClient.get('/api/exploitations/manual')
@ -27,7 +28,7 @@ function BreachSection() {
if(machines !== null){
let body = getBreachSectionBody(machines);
return (<NumberedReportSection index={1} title={'Breach'} description={description} body={body}/>)
return (<NumberedReportSection index={1} title={'Breach'} description={BREACH_DESCRIPTION} body={body}/>)
} else {
return <LoadingIcon />
}

View File

@ -2,19 +2,20 @@ import React, {ReactElement} from 'react';
import NumberedReportSection from './NumberedReportSection';
import pluralize from 'pluralize'
import BreachedServersComponent from '../security/BreachedServers';
import ExternalLink from '../common/ExternalLink';
const LATERAL_MOVEMENT_DESCRIPTION = 'After the initial breach, the attacker will begin the Lateral \
Movement phase of the attack. They will employ various \
techniques in order to compromise other systems in your \
network. \
<br /> \
<br /> \
<a \
href="https://www.guardicore.com/blog/stopping-ransomware-with-segmentation/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report" \
target="_blank" \
> \
See some real-world examples on Guardicore\'s blog. \
</a>';
const LATERAL_MOVEMENT_DESCRIPTION = <>
After the initial breach, the attacker will begin the Lateral
Movement phase of the attack. They will employ various
techniques in order to compromise other systems in your
network.
<br />
<br />
<ExternalLink
url="https://www.guardicore.com/blog/stopping-ransomware-with-segmentation/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report"
text="See some real-world examples on Guardicore's blog"
/>
</>
type PropagationStats = {
num_scanned_nodes: number,

View File

@ -5,7 +5,7 @@ import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
type Props = {
index: number,
title: string,
description: string,
description: ReactFragment,
body: ReactFragment
}
@ -14,7 +14,7 @@ function NumberedReportSection(props: Props): ReactElement {
<div className='numbered-report-section'>
<Header index={props.index} title={props.title} />
<div className='indented'>
<Description text={props.description} />
<Description description={props.description} />
{props.body}
</div>
</div>
@ -27,11 +27,11 @@ function Header({index, title}: {index: number, title: string}): ReactElement {
)
}
function Description({text}: {text: string}): ReactElement {
function Description({description}: {description: ReactFragment}): ReactElement {
return (
<div className='alert alert-secondary description'>
<FontAwesomeIcon icon={faInfoCircle} className='alert-icon'/>
<span dangerouslySetInnerHTML={{__html: text}} />
<span>{description}</span>
</div>
)
}