feat: implement initial Mappings Explorer

center-for-threat-informed-defense · Oct 5, 2023 · 0bb6567 · 0bb6567
1 parent f6513e8
commit 0bb6567
Show file tree

Hide file tree

Showing 89 changed files with 92,515 additions and 0 deletions.
diff --git a/pyproject.toml b/pyproject.toml
@@ -13,6 +13,7 @@ classifiers = [
 repository = "https://github.com/center-for-threat-informed-defense/mappings-explorer"
 
 [tool.poetry.scripts]
+build-mappings-explorer = "mappings_explorer.site_builder:main"
 mapex = "mappings_explorer.cli.cli:main"
 
 [tool.poetry.dependencies]
@@ -31,6 +32,7 @@ mypy = "^1.2.0"
 pandas = "^2.1"
 openpyxl = "^3.1"
 ruff = "^0.0.289"
+jinja2 = "^3.1.2"
 
 [tool.black]
 line-length = 88

diff --git a/src/mappings_explorer/site_builder.py b/src/mappings_explorer/site_builder.py
@@ -0,0 +1,15 @@
+from jinja2 import Environment, FileSystemLoader
+
+
+def main():
+    print("Creating site index")
+    templateLoader = FileSystemLoader(searchpath="./templates")
+    templateEnv = Environment(loader=templateLoader, autoescape=True)
+    TEMPLATE_FILE = "landing.html.j2"
+    template = templateEnv.get_template(TEMPLATE_FILE)
+
+    template.stream(title="Mappings Explorer").dump("./output/index.html")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/templates/_footer.html.j2 b/templates/_footer.html.j2
@@ -0,0 +1,53 @@
+  <!-- ======= Footer ======= -->
+<footer id="footer" class="footer">
+
+    <div class="footer-content">
+      <div class="container">
+        <div class="row gy-4">
+          <div class="col-lg-6 col-md-12 footer-info">
+            <a href="index.html" class="logo d-flex align-items-center">
+              <span>MAPPINGS <span style="color: #C2EAF6"> EXPLORER</span></span>
+            </a>
+            <p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita valies darta donna mare fermentum iaculis eu non diam phasellus.</p>
+
+            <div class="d-flex mt-3 gap-4">
+              <img src="../templates/static/img/logo-horizontal-white.png" alt="center for threat informed defense logo" style="height: 20px; margin-top: 4px;"/>
+              <div class="social-links d-flex">
+                <a href="https://twitter.com/MITREengenuity" target="blank" class="twitter"><i class="bi bi-twitter"></i></a>
+                <a href="#" target="blank" class="facebook"><i class="bi bi-facebook"></i></a>
+                <a href="https://github.com/center-for-threat-informed-defense" target="blank" class="instagram"><i class="bi bi-instagram"></i></a>
+                <a href="#" target="blank" class="linkedin"><i class="bi bi-linkedin"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-2 col-6 footer-links">
+            <h4>MAPPING TYPES</h4>
+            <ul>
+              <li><i class="bi bi-dash"></i> <a href="#">NIST 800-53</a></li>
+              <li><i class="bi bi-dash"></i> <a href="#">VERIS</a></li>
+              <li><i class="bi bi-dash"></i> <a href="#">CVE</a></li>
+              <li><i class="bi bi-dash"></i> <a href="#">Google Cloud Platform (GCP)</a></li>
+              <li><i class="bi bi-dash"></i> <a href="#">Azure</a></li>
+              <li><i class="bi bi-dash"></i> <a href="#">Amazon Web Services (AWS)</a></li>
+            </ul>
+          </div>
+          <div class="col-lg-2 col-6 footer-links">
+            <h4>ATT&CK OBJECTS</h4>
+            <ul>
+              <li><i class="bi bi-dash"></i> <a href="#">Techniques</a></li>
+              <li><i class="bi bi-dash"></i> <a href="#">Tactics</a></li>
+              <li><i class="bi bi-dash"></i> <a href="#">Data Sources/Components</a></li>
+              <li><i class="bi bi-dash"></i> <a href="#">Groups</a></li>
+            </ul>
+          </div>
+          <div class="col-lg-2 col-6 footer-links">
+            <h4>OTHER LINKS</h4>
+            <ul>
+              <li><i class="bi bi-dash"></i> <a href="#">Search</a></li>
+              <li><i class="bi bi-dash"></i> <a href="#">About External Mappings</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer><!-- End Footer -->
diff --git a/templates/_mappings_project_section.html.j2 b/templates/_mappings_project_section.html.j2
@@ -0,0 +1,115 @@
+<div class="row gy-5">
+    <div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+        <div>
+            <h4 class="title"><a href="#" class="stretched-link">NIST 800-53</a></h4>
+            <blockquote>
+            <p>The NIST 800-53 is a cybersecurity standard and compliance framework developed by the National Institute of Standards in Technology. It’s a continuously updated framework that tries to flexibly define standards, controls, and assessments based on risk, cost-effectiveness, and capabilities.</p>
+            </blockquote>
+            <div class="section-details">
+            <p>
+                <span><strong>300</strong> Mappings</span>
+                <span>ATT&CK Versions <strong>8.2, 9.0, 10.1</strong></span>
+            </p>
+            <a href="" class="readmore stretched-link"><span>Learn More</span><i class="bi bi-arrow-right"></i></a>
+
+            </div>
+        </div>
+        </div>
+        <!-- End Service Item -->
+
+        <div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+        <div>
+            <h4 class="title"><a href="#" class="stretched-link">VERIS</a></h4>
+            <blockquote>
+            <p>
+                The Vocabulary for Event Recording and Incident Sharing (VERIS) is a set of metrics designed to provide a common language for describing security incidents in a structured and repeatable manner.
+                VERIS targets this problem by helping organizations to collect useful incident-related information and to share that information - anonymously and responsibly - with others.
+            </p>
+            </blockquote>
+            <div class="section-details">
+            <p>
+                <span><strong>300</strong> Mappings</span>
+                <span>ATT&CK Versions <strong>9.0, 12.1</strong></span>
+            </p>
+            <a href="" class="readmore stretched-link"><span>Learn More</span><i class="bi bi-arrow-right"></i></a>
+
+            </div>
+        </div>
+        </div><!-- End Service Item -->
+
+        <div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+        <div>
+            <h4 class="title"><a href="#" class="stretched-link">CVE</a></h4>
+            <blockquote>
+            <p>
+                CVE, short for Common Vulnerabilities and Exposures, is a list of publicly disclosed computer security flaws. When someone refers to a CVE, they mean a security flaw that's been assigned a CVE ID number.
+                CVEs help IT professionals coordinate their efforts to prioritize and address these vulnerabilities to make computer systems more secure.
+            </p>              </blockquote>
+            <div class="section-details">
+            <p>
+                <span><strong>300</strong> Mappings</span>
+                <span>ATT&CK Versions <strong>9.0</strong></span>
+            </p>
+            <a href="" class="readmore stretched-link"><span>Learn More</span><i class="bi bi-arrow-right"></i></a>
+            </div>
+        </div>
+        </div><!-- End Service Item -->
+
+        <div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+        <div>
+            <h4 class="title"><a href="#" class="stretched-link">Amazon Web Services</a></h4>
+            <blockquote>
+            <p>The NIST 800-53 is a cybersecurity standard and compliance framework developed by the National Institute of Standards in Technology. It’s a continuously updated framework that tries to flexibly define standards, controls, and assessments based on risk, cost-effectiveness, and capabilities.</p>
+            </blockquote>
+            <div class="section-details">
+            <p>
+                <span><strong>300</strong> Mappings</span>
+                <span>ATT&CK Versions <strong>8.2, 9.0, 10.1</strong></span>
+            </p>
+            <a href="" class="readmore stretched-link"><span>Learn More</span><i class="bi bi-arrow-right"></i></a>
+
+            </div>
+        </div>
+        </div>
+        <!-- End Service Item -->
+
+        <div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+        <div>
+            <h4 class="title"><a href="#" class="stretched-link">Azure</a></h4>
+            <blockquote>
+            <p>
+                The Vocabulary for Event Recording and Incident Sharing (VERIS) is a set of metrics designed to provide a common language for describing security incidents in a structured and repeatable manner.
+                VERIS targets this problem by helping organizations to collect useful incident-related information and to share that information - anonymously and responsibly - with others.
+            </p>
+            </blockquote>
+            <div class="section-details">
+            <p>
+                <span><strong>300</strong> Mappings</span>
+                <span>ATT&CK Versions <strong>9.0, 12.1</strong></span>
+            </p>
+            <a href="" class="readmore stretched-link"><span>Learn More</span><i class="bi bi-arrow-right"></i></a>
+
+            </div>
+        </div>
+        </div><!-- End Service Item -->
+
+        <div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+        <div>
+            <h4 class="title"><a href="#" class="stretched-link">Google Cloud Platform</a></h4>
+            <blockquote>
+            <p>
+                CVE, short for Common Vulnerabilities and Exposures, is a list of publicly disclosed computer security flaws. When someone refers to a CVE, they mean a security flaw that's been assigned a CVE ID number.
+                CVEs help IT professionals coordinate their efforts to prioritize and address these vulnerabilities to make computer systems more secure.
+            </p>              </blockquote>
+            <div class="section-details">
+            <p>
+                <span><strong>300</strong> Mappings</span>
+                <span>ATT&CK Versions <strong>9.0</strong></span>
+            </p>
+            <a href="" class="readmore stretched-link"><span>Learn More</span><i class="bi bi-arrow-right"></i></a>
+            </div>
+        </div>
+        </div><!-- End Service Item -->
+
+    </div>
+</div>
diff --git a/templates/_navigation.html.j2 b/templates/_navigation.html.j2
@@ -0,0 +1,62 @@
+<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
+
+      <a href="index.html" class="logo d-flex align-items-center">
+        <!-- Uncomment the line below if you also wish to use an image logo -->
+        <!-- <img src="assets/img/logo.png" alt=""> -->
+        <h1 class="d-flex align-items-center">MAPPINGS <span style="margin-left: 5px; color: #C2EAF6;"> Explorer</span></h1>
+      </a>
+
+      <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
+      <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
+
+      <nav id="navbar" class="navbar">
+        <ul>
+          <li><a href="index.html" class="active">HOME</a></li>
+          <li class="dropdown"><a href="#"><span>ATT&CK OBJECTS</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
+            <ul>
+
+              <li><a href="#">Tactics</a></li>
+              <li class="dropdown"><a href="#"><span>Techniques</span><i class="bi bi-chevron-down dropdown-indicator"></i></a></li>
+              <ul>
+                <li><a href="#">Techniques to NIST</a></li>
+                <li><a href="#">Techniques to Veris</a></li>
+                <li><a href="#">Techniques to CVE</a></li>
+                <li><a href="#">Techniques to Google Cloud Platform (GCP)</a></li>
+                <li><a href="#">Techniques to Azure</a></li>
+                <li><a href="#">Techniques to Amazon Web Services (AWS)</a></li>
+              </ul>
+              <li><a href="#">Data Sources/ Data Components</a></li>
+              <li><a href="#">Groups</a></li>
+              <li><a href="#">Search All ATT&CK Objects</a></li>
+            </ul>
+          </li>
+          <li class="dropdown"><a href="#"><span>MAPPING CONTROLS</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
+            <ul>
+              <li><a href="about-mappings.html">External Mappings</a></li>
+              <li><a href="#">VERIS</a></li>
+              <li><a href="#">NIST 800-53</a></li>
+              <li><a href="#">CVE</a></li>
+              <li><a href="#">Amazon Web Services (AWS)</a></li>
+              <li><a href="#">Google Cloud Platform (GCP)</a></li>
+              <li class="dropdown"><a href="#"><span>Azure</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
+                <ul>
+                  <li><a href="#">Version 1.0</a></li>
+                  <li><a href="#">Version 1.1</a></li>
+                  <li><a href="#">Version 2.0</a></li>
+                  <li><a href="#">Version 2.1</a></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li style="padding: 10px;">
+            <div class="input-group rounded">
+              <input type="search" class="search-input form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
+              <span class="input-group-text border-0 bg-primary" id="search-addon">
+                <img src="../templates/static/img/search-white.svg" alt="search" style="height: 20px;"/>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </nav><!-- .navbar -->
+
+    </div>
diff --git a/templates/base.html.j2 b/templates/base.html.j2
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta content="width=device-width, initial-scale=1.0" name="viewport">
+        <title>{% block title %}{{ title }}{% endblock title %}</title>
+        <meta content="" name="description">
+        <meta content="" name="keywords">
+        <!-- Google Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+
+        <!-- Vendor CSS Files -->
+        <link href="../templates/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+        <link href="../templates/static/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
+        <link href="../templates/static/vendor/aos/aos.css" rel="stylesheet">
+        <link href="../templates/static/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
+        <link href="../templates/static/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
+        <link href="../templates/static/vendor/remixicon/remixicon.css" rel="stylesheet">
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
+        <!-- Template Main CSS File -->
+        <link href="../templates/static/main.css" rel="stylesheet">
+    </head>
+    <body class="page-index">
+        <header class="header d-flex align-items-center fixed-top">
+            {% include "_navigation.html.j2"%}
+        </header>
+        {% block content %}
+            <h1>Welcome to Mappings Explorer</h1>
+        {% endblock content %}
+
+        <footer>
+            {% include "_footer.html.j2"%}
+        </footer>
+
+        <!-- Scripts -->
+        <script src="../templates/static/main.js"></script>
+        <script src="../templates/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <script src="../templates/static/vendor/aos/aos.js"></script>
+        <script src="../templates/static/vendor/glightbox/js/glightbox.min.js"></script>
+        <script src="../templates/static/vendor/swiper/swiper-bundle.min.js"></script>
+        <script src="../templates/static/vendor/isotope-layout/isotope.pkgd.min.js"></script>
+        <script src="../templates/static/vendor/php-email-form/validate.js"></script>
+    </body>
+</html>
diff --git a/templates/landing.html.j2 b/templates/landing.html.j2
@@ -0,0 +1,58 @@
+
+
+{% extends "base.html.j2" %}
+
+{% block content %}
+        <!-- ======= Hero Section ======= -->
+  <section id="hero" class="hero d-flex align-items-center">
+    <div class="container">
+      <div class="row">
+        <div class="col-xl-4">
+          <img data-aos="fade-up" src="../templates/static/img/logo-horizontal-white.png" alt="center for threat informed defense logo" style="height: 20px; margin-bottom: 10px;"/>
+          <h2 data-aos="fade-up">Mappings <span style="color: #C2EAF6">Explorer</span></h2>
+          <blockquote data-aos="fade-up" data-aos-delay="100">
+            <p>The website will include an overview of the mappings projects, explaining what the mappings are for, who the target audience is, what uses they support, etc. It will provide the methodology and other important information behind each mapping project. </p>
+          </blockquote>
+          <div class="d-flex" data-aos="fade-up" data-aos-delay="200">
+            <a href="#about" class="btn-get-started">Get Started</a>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </section><!-- End Hero Section -->
+
+  <main id="main">
+
+  <!-- ======= Call To Action Section ======= -->
+  <section id="call-to-action" class="call-to-action">
+    <div class="container" data-aos="fade-up">
+      <div class="row justify-content-center">
+        <div class="col-lg-6 text-center">
+          <h3>Search to Find Mappings</h3>
+          <p>Search for an ATT&CK object or a framework object to find all mappings associated with it. </p>
+          <div class="input-group rounded">
+            <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
+            <span class="input-group-text border-0" id="search-addon">
+              <img src="../templates/static/img/search.svg" alt="search" style="height: 20px;"/>
+            </span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    </section><!-- End Call To Action Section -->
+
+    <!-- ======= Our Services Section ======= -->
+    <section id="services-list" class="services-list">
+    <div class="container" data-aos="fade-up">
+
+    <div class="section-header">
+        <h2>MAPPINGS PROJECTS</h2>
+    </div>
+        {% include "_mappings_project_section.html.j2" %}
+        </div>
+    </section><!-- End Our Services Section -->
+
+  </main><!-- End #main -->
+{% endblock content %}
diff --git a/templates/static/img/background.jpeg b/templates/static/img/background.jpeg
diff --git a/templates/static/img/logo-horizontal-white.png b/templates/static/img/logo-horizontal-white.png
diff --git a/templates/static/img/search-white.svg b/templates/static/img/search-white.svg
diff --git a/templates/static/img/search.svg b/templates/static/img/search.svg