Merge pull request #1494 from guardicore/1415/add-ransomware-report-links

1415/add ransomware report links

monkey/monkey_island/cc/ui/src/components/report-components/common/ExternalLink.tsx

@@ -0,0 +1,19 @@
+import React, {ReactFragment, ReactElement} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faExternalLinkSquareAlt} from '@fortawesome/free-solid-svg-icons';
+
+type Props = {
+    url: string,
+    text: string,
+}
+
+function ExternalLink(props: Props): ReactElement {
+    return (
+        <a href={props.url} target="_blank" rel="noreferrer">
+          {props.text}
+          <FontAwesomeIcon icon={faExternalLinkSquareAlt} className="external-link-icon"/>
+        </a>
+    )
+}
+
+export default ExternalLink

monkey/monkey_island/cc/ui/src/components/report-components/ransomware/AttackSection.tsx

@@ -3,11 +3,21 @@ 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 />
+                             <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 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.'
 const HOSTNAME_REGEX = /^(.* - )?(\S+) :.*$/;
 
 function AttackSection(): ReactElement {

monkey/monkey_island/cc/ui/src/components/report-components/ransomware/BreachSection.tsx

@@ -3,11 +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.';
 
   useEffect(() => {
     IslandHttpClient.get('/api/exploitations/manual')
@@ -16,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 />
   }

monkey/monkey_island/cc/ui/src/components/report-components/ransomware/LateralMovement.tsx

@@ -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,

monkey/monkey_island/cc/ui/src/components/report-components/ransomware/NumberedReportSection.tsx

@@ -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>
   )
 }

monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss

@@ -22,3 +22,7 @@
 .ransomware-breach-section .ip-address {
   display: inline-block;
 }
+
+.numbered-report-section .external-link-icon {
+    margin-left: .25em;
+}