Updates job documentation

2025-08-19 00:46:19 +02:00 · 2023-07-08 19:01:32 +01:00
parent 397609e7bc
commit 46f8144a0f
6 changed files with 397 additions and 33 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,8 +18,8 @@ function App() {
    <Container>
      <Routes>
        <Route path="/" element={<Home />} />
-        <Route path="/results/:address" element={<Results />} />
        <Route path="/about" element={<About />} />
+        <Route path="/results/:address" element={<Results />} />
      </Routes>
    </Container>
  );
--- a/src/components/Form/Modal.tsx
+++ b/src/components/Form/Modal.tsx
@@ -39,6 +39,8 @@ const ModalWindow = styled.div`
  animation: appear 0.5s;
  color: ${colors.textColor};
  box-shadow: 4px 4px 0px ${colors.bgShadowColor};
+  max-height: 80%;
+  overflow-y: auto;
  @keyframes appear {
    0% {opacity: 0; transform: scale(0.9);}
    100% {opacity: 1; transform: scale(1);}
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -10,7 +10,7 @@ import docs, { about, license, fairUse } from 'utils/docs';


 const AboutContainer = styled.div`
-width: 80vw;
+width: 95vw;
 max-width: 1000px;
 margin: 2rem auto;
 padding-bottom: 1rem;
@@ -30,6 +30,7 @@ const HeaderLinkContainer = styled.nav`

 const Section = styled(StyledCard)`
  margin-bottom: 2rem;
+  overflow: clip;
  h3 {
    font-size: 1.5rem;
  }
@@ -69,6 +70,13 @@ const Section = styled(StyledCard)`
      }
    }
  }
+  .screenshot {
+    float: right;
+    break-inside: avoid;
+    max-width: 300px;
+    max-height: 28rem;
+    border-radius: 6px;
+  }
 `;

 const makeAnchor = (title: string): string => {
@@ -109,16 +117,25 @@ const About = (): JSX.Element => {
        {docs.map((section, sectionIndex: number) => (
          <section key={section.title}>
            <Heading as="h3" size="small" id={makeAnchor(section.title)} color={colors.primary}>{section.title}</Heading>
-            <Heading as="h4" size="small">Description</Heading>
-            <p>{section.description}</p>
-            <Heading as="h4" size="small">Use Cases</Heading>
-            <p>{section.use}</p>
-            <Heading as="h4" size="small">Useful Links</Heading>
-            <ul>
-              {section.resources.map((link: string) => (
-                <li><a href={link}>{link}</a></li>
-              ))}
-            </ul>
+            {section.screenshot && 
+              <img className="screenshot" src={section.screenshot} alt={`Example Screenshot ${section.title}`} />
+            }
+            {section.description && <>
+              <Heading as="h4" size="small">Description</Heading>
+              <p>{section.description}</p>
+            </>}
+            { section.use && <>
+              <Heading as="h4" size="small">Use Cases</Heading>
+              <p>{section.use}</p>
+            </>}
+            {section.resources && section.resources.length > 0 && <>
+              <Heading as="h4" size="small">Useful Links</Heading>
+              <ul>
+                {section.resources.map((link: string, linkIndx: number) => (
+                  <li key={linkIndx}><a href={link}>{link}</a></li>
+                ))}
+              </ul>
+            </>}
            { sectionIndex < docs.length - 1 && <hr /> }
          </section>
        ))}
--- a/src/pages/Results.tsx
+++ b/src/pages/Results.tsx
@@ -78,6 +78,7 @@ ul {
 ul li a {
  color: ${colors.primary};
 }
+summary { color: ${colors.primary};}
 h4 {
  border-top: 1px solid ${colors.primary};
  color: ${colors.primary};
@@ -141,6 +142,7 @@ const Results = (): JSX.Element => {
  }, []);

  const parseJson = (response: Response): Promise<any> => {
+    // return response.json()
    return new Promise((resolve) => {
      if (response.ok) {
        response.json()
@@ -431,6 +433,10 @@ const Results = (): JSX.Element => {
          <li id={`link-${index}`}><a target="_blank" rel="noreferrer" href={resource}>{resource}</a></li>
          ))}
        </ul>
+        <details>
+          <summary><Heading as="h4" size="small">Example</Heading></summary>
+          <img width="300" src={doc.screenshot} alt="Screenshot" />
+        </details>
      </JobDocsContainer>)
    : (
      <JobDocsContainer>
--- a/src/utils/docs.ts
+++ b/src/utils/docs.ts
@@ -4,6 +4,7 @@ interface Doc {
  description: string;
  use: string;
  resources: string[];
+  screenshot?: string;
 }

 const docs: Doc[] = [
@@ -32,6 +33,7 @@ const docs: Doc[] = [
      "https://letsencrypt.org/docs/",
      "https://www.sslshopper.com/ssl-checker.html",
    ],
+    screenshot: 'https://i.ibb.co/kB7LsV1/wc-ssl.png',
  },
  {
    id: "dns",
@@ -45,6 +47,7 @@ const docs: Doc[] = [
      "https://mxtoolbox.com/DNSLookup.aspx",
      "https://www.dnswatch.info/",
    ],
+    screenshot: 'https://i.ibb.co/7Q1kMwM/wc-dns.png',
  },
  {
    id: "cookies",
@@ -58,6 +61,7 @@ const docs: Doc[] = [
      "https://owasp.org/www-community/controls/SecureFlag",
      "https://tools.ietf.org/html/rfc6265",
    ],
+    screenshot: 'https://i.ibb.co/TTQ6DtP/wc-cookies.png',
  },
  {
    id: "robots-txt",
@@ -71,6 +75,7 @@ const docs: Doc[] = [
      "https://moz.com/learn/seo/robotstxt",
      "https://en.wikipedia.org/wiki/Robots_exclusion_standard",
    ],
+    screenshot: 'https://i.ibb.co/KwQCjPf/wc-robots.png',
  },
  {
    id: "headers",
@@ -84,10 +89,11 @@ const docs: Doc[] = [
      "https://www.w3schools.com/tags/ref_httpheaders.asp",
      "https://owasp.org/www-project-secure-headers/",
    ],
+    screenshot: 'https://i.ibb.co/t3xcwP1/wc-headers.png',
  },
  {
    id: "lighthouse",
-    title: "Headers",
+    title: "Quality Report",
    description:
      "The Headers task involves extracting and interpreting the HTTP headers sent by the target website during the request-response cycle. HTTP headers are key-value pairs sent at the start of an HTTP response, or before the actual data. Headers contain important directives for how to handle the data being transferred, including cache policies, content types, encoding, server information, security policies, and more.",
    use: "Analyzing HTTP headers can provide significant insights in an OSINT investigation. Headers can reveal specific server configurations, chosen technologies, caching directives, and various security settings. This information can help to determine a website's underlying technology stack, server-side security measures, potential vulnerabilities, and general operational practices.",
@@ -97,6 +103,7 @@ const docs: Doc[] = [
      "https://www.w3schools.com/tags/ref_httpheaders.asp",
      "https://owasp.org/www-project-secure-headers/",
    ],
+    screenshot: 'https://i.ibb.co/Kqg8rx7/wc-quality.png',
  },
  {
    id: "location",
@@ -110,6 +117,7 @@ const docs: Doc[] = [
      "https://www.cloudflare.com/learning/cdn/glossary/geolocation/",
      "https://developers.google.com/maps/documentation/geolocation/intro",
    ],
+    screenshot: 'https://i.ibb.co/cXH2hfR/wc-location.png',
  },
  {
    id: "hosts",
@@ -123,6 +131,7 @@ const docs: Doc[] = [
      "https://subdomainfinder.c99.nl/",
      "https://securitytrails.com/blog/top-dns-enumeration-tools",
    ],
+    screenshot: 'https://i.ibb.co/25j1sT7/wc-hosts.png',
  },
  {
    id: "redirects",
@@ -136,6 +145,7 @@ const docs: Doc[] = [
      "https://www.screamingfrog.co.uk/server-response-codes/",
      "https://ahrefs.com/blog/301-redirects/",
    ],
+    screenshot: 'https://i.ibb.co/hVVrmwh/wc-redirects.png',
  },
  {
    id: "txt-records",
@@ -149,10 +159,11 @@ const docs: Doc[] = [
      "https://tools.ietf.org/html/rfc7208",
      "https://dmarc.org/wiki/FAQ",
    ],
+    screenshot: 'https://i.ibb.co/wyt21QN/wc-txt-records.png',
  },
  {
    id: "status",
-    title: "TXT Records",
+    title: "Server Status",
    description:
      "TXT records are a type of Domain Name Service (DNS) record that provides text information to sources outside your domain. They can be used for a variety of purposes, such as verifying domain ownership, ensuring email security, and even preventing unauthorized changes to your website.",
    use: "In the context of OSINT, TXT records can be a valuable source of information. They may reveal details about the domain's email configuration, the use of specific services like Google Workspace or Microsoft 365, or security measures in place such as SPF and DKIM. Understanding these details can give an insight into the technologies used by the organization, their email security practices, and potential vulnerabilities.",
@@ -162,6 +173,7 @@ const docs: Doc[] = [
      "https://tools.ietf.org/html/rfc7208",
      "https://dmarc.org/wiki/FAQ",
    ],
+    screenshot: 'https://i.ibb.co/V9CNLBK/wc-status.png',
  },
  {
    id: "ports",
@@ -175,6 +187,7 @@ const docs: Doc[] = [
      "https://www.cloudflare.com/learning/ddos/glossary/open-port/",
      "https://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers",
    ],
+    screenshot: 'https://i.ibb.co/F8D1hmf/wc-ports.png',
  },
  {
    id: "trace-route",
@@ -188,6 +201,7 @@ const docs: Doc[] = [
      "https://en.wikipedia.org/wiki/Traceroute",
      "https://www.ripe.net/publications/docs/ripe-611",
    ],
+    screenshot: 'https://i.ibb.co/M59qgxP/wc-trace-route.png',
  },
  {
    id: "carbon",
@@ -201,6 +215,7 @@ const docs: Doc[] = [
      "https://www.nature.com/articles/s41598-020-76164-y",
      "https://www.sciencedirect.com/science/article/pii/S0959652620307817",
    ],
+    screenshot: 'https://i.ibb.co/dmbFxjN/wc-carbon.png',
  },
  {
    id: "server-info",
@@ -214,10 +229,11 @@ const docs: Doc[] = [
      "https://tools.ietf.org/html/rfc7231#section-7.4.2",
      "https://builtwith.com/",
    ],
+    screenshot: 'https://i.ibb.co/Mk1jx32/wc-server.png',
  },
  {
    id: "whois",
-    title: "Whois",
+    title: "Domain Info",
    description:
      "This task retrieves Whois records for the target domain. Whois records are a rich source of information, including the name and contact information of the domain registrant, the domain's creation and expiration dates, the domain's nameservers, and more. The information is usually obtained through a query to a Whois database server.",
    use: "In an OSINT context, Whois records can provide valuable clues about the entity behind a website. They can show when the domain was first registered and when it's set to expire, which could provide insights into the operational timeline of the entity. The contact information, though often redacted or anonymized, can sometimes lead to additional avenues of investigation. The nameservers could also be used to link together multiple domains owned by the same entity.",
@@ -226,6 +242,7 @@ const docs: Doc[] = [
      "https://www.icann.org/resources/pages/whois-2018-01-17-en",
      "https://whois.domaintools.com/",
    ],
+    screenshot: 'https://i.ibb.co/89WLp14/wc-domain.png',
  },
  {
    id: "dnssec",
@@ -241,6 +258,15 @@ const docs: Doc[] = [
      "https://support.google.com/domains/answer/6147083",
      "https://www.internetsociety.org/resources/deploy360/2013/dnssec-test-sites/",
    ],
+    screenshot: 'https://i.ibb.co/J54zVmQ/wc-dnssec.png',
+  },
+  {
+    id: "features",
+    title: "Features",
+    description: '',
+    use: "",
+    resources: [],
+    screenshot: 'https://i.ibb.co/gP4P6kp/wc-features.png',
  },
 ];