Explainer for out-of-bounds-read exploit (#24)

* WIP explainer with both slides and svg versions

* Improve aspect ratio handling and remove slides version

* Reorg components and reset bug version

docker-compose.yml

@@ -22,7 +22,7 @@ services:
     expose:
       - "19507"
   morello-api:
-    image: digicatapult/morello-api:v0.6.2
+    image: digicatapult/morello-api:v0.6.4
     container_name: api
     ports:
       - "3001:3000"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digicatapult/morello-ui",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "User interface for interacting with morello-api",
   "main": "src/index.js",
   "scripts": {

src/assets/images/out-of-bounds-read-explainer/OutOfBoundsReadImages.js

@@ -0,0 +1,31 @@
+import Image_01 from './01.svg'
+import Image_02 from './02.svg'
+import Image_03 from './03.svg'
+import Image_04 from './04.svg'
+import Image_05 from './05.svg'
+import Image_06 from './06.svg'
+import Image_07 from './07.svg'
+import Image_08 from './08.svg'
+import Image_09 from './09.svg'
+import Image_10 from './10.svg'
+import Image_11 from './11.svg'
+import Image_12 from './12.svg'
+import Image_13 from './13.svg'
+import Image_14 from './14.svg'
+
+export default [
+  Image_01,
+  Image_02,
+  Image_03,
+  Image_04,
+  Image_05,
+  Image_06,
+  Image_07,
+  Image_08,
+  Image_09,
+  Image_10,
+  Image_11,
+  Image_12,
+  Image_13,
+  Image_14,
+]

src/components/Explainer.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import Header from './Header'
+
+const ExplainerWrapper = styled.div`
+  width: min(
+    calc(100vw - 20vw),
+    calc((100vh - 10vh - 164px) * ${({ aspectRatio }) => aspectRatio})
+  );
+  height: min(
+    calc(100vh - 10vh - 164px),
+    calc((100vw - 20vw) / ${({ aspectRatio }) => aspectRatio})
+  );
+  overflow: hidden;
+  align-self: center;
+  justify-self: center;
+`
+
+const ExplainerImage = styled.img`
+  width: 100%;
+  height: 100%;
+`
+
+export default function Explainer(props) {
+  const { images, nativeSize } = props
+  const [currentSlide, setCurrentSlide] = React.useState(0)
+
+  const imageCount = images.length
+  const prevSlide = React.useCallback(() => {
+    if (currentSlide !== 0) {
+      setCurrentSlide(currentSlide - 1)
+    }
+  }, [currentSlide])
+  const nextSlide = React.useCallback(() => {
+    if (currentSlide !== imageCount - 1) {
+      setCurrentSlide(currentSlide + 1)
+    }
+  }, [currentSlide, imageCount])
+
+  React.useEffect(() => {
+    const eventListener = (event) => {
+      switch (event.key) {
+        case 'ArrowRight':
+          return nextSlide()
+        case 'ArrowLeft':
+          return prevSlide()
+        default:
+          return
+      }
+    }
+    window.addEventListener('keydown', eventListener)
+    return () => {
+      window.removeEventListener('keydown', eventListener)
+    }
+  }, [nextSlide, prevSlide])
+
+  return (
+    <>
+      <Header {...props} showClose={true} />
+      <ExplainerWrapper aspectRatio={nativeSize.width / nativeSize.height}>
+        <ExplainerImage
+          src={images[currentSlide]}
+          width={nativeSize.width}
+          height={nativeSize.height}
+          onClick={nextSlide}
+        />
+      </ExplainerWrapper>
+    </>
+  )
+}

src/components/Info.js

@@ -29,7 +29,7 @@ const QrCode = styled.img`
   max-width: 25vw;
 `
 
-export default function Demo1(props) {
+export default function Info(props) {
   return (
     <>
       <Header {...props} showClose={true} />

src/fixtures/demos.js

@@ -14,6 +14,9 @@ import DsbdQR from '../assets/images/dsbd-info-qr.svg'
 import DsbdScreenShotWebP from '../assets/images/dsbd-info-screenshot.webp'
 import DsbdScreenShotAvif from '../assets/images/dsbd-info-screenshot.avif'
 import DsbdScreenShotPng from '../assets/images/dsbd-info-screenshot.png'
+import Explainer from '../components/Explainer'
+
+import OutOfBoundsReadImages from '../assets/images/out-of-bounds-read-explainer/OutOfBoundsReadImages'
 
 export const demos = [
   {
@@ -22,7 +25,7 @@ export const demos = [
     // TODO group by A and B
     binaryName: 'out-of-bounds-readV2',
     title: 'Are your secrets really safe?',
-    description: 'Out of Bounds read. CWE Score 24.9',
+    description: 'Out of Bounds Read. CWE Score 24.9',
     color: '#384D6C',
     windowTitle: 'SUPER_SAFE_APP.EXE',
     modalTitle: 'hacker.app',
@@ -82,18 +85,24 @@ export const demos = [
     link: 'https://www.arm.com/architecture/cpu/morello',
   },
   {
-    path: 'demo5',
-    title: 'Do you believe your password is safe?',
-    description: 'Out of Bounds write / Out of Bounds read. CWE Score 65.93',
+    path: 'demo1-explainer',
+    title: 'What is an Out of Bounds Read?',
+    description:
+      'Learn about Out of Bounds Read Exploits and How Morello Prevents Them',
     color: '#D1B44E',
-    Element: () => <div>somee demo5 content</div>, // main element
+    Element: (props) => <Explainer {...props} />, // main element
+    images: OutOfBoundsReadImages,
+    nativeSize: {
+      width: 960,
+      height: 540,
+    },
   },
   {
     path: 'demo6',
     title: 'Do you believe your password is safe?',
     description: 'Out of Bounds write / Out of Bounds read. CWE Score 65.93',
-    color: '#959728',
-    Element: () => <div>somee demo6 content</div>, // main element
+    color: '#4F6C38',
+    Element: () => <div>somee demo7 content</div>, // main element
   },
   {
     path: 'demo7',