Merge pull request #457 from mitre-attack/develop

Update to version 4.0.5

CHANGELOG.md

@@ -1,6 +1,16 @@
 
 <!-- TOWNCRIER -->
 
+# v4.0.5 (2023-09-01)
+
+## Features
+
+* The sidebar is now collapsable and displayed properly in mobile view [#450](https://github.com/mitre-attack/attack-website/issues/450)
+
+## Bugfixes
+
+* Changed the UUID generation logic to use CONTENT_VERSION and WEBSITE_VERSION as seeds for idempotent UUID creation. This prevents the creation of redundant IndexedDB tables. [#455](https://github.com/mitre-attack/attack-website/issues/455)
+
 # v4.0.4 (2023-08-11)
 
 ## Features

attack-theme/static/scripts/navigation.js

@@ -8,6 +8,10 @@ $(document).ready(function () {
     // jumping from one domain to another. E.g. techniques to matrices
     let current_modules = window.location.pathname.split("/");
 
+    var sidebar = document.querySelector(".sidebar");
+    var sidebarSize = localStorage.getItem('sidebarWidth');
+    sidebar.style.width = sidebarSize;
+
     if (document.referrer) {
         // Loop through the modules in case page is hosted from different 
         // directory

attack-theme/static/scripts/resizer.js

@@ -1,9 +1,10 @@
+//This code is for being able to resize the sidebar in the desktop view
 var resizer = document.querySelector(".resizer");
 var sidebar = document.querySelector(".sidebar");
-$(document).ready(function (){
-resizeSidebar( resizer, sidebar );
-});
 
+if(resizer!=null) {
+  resizeSidebar( resizer, sidebar );
+}
 
 function resizeSidebar( resizer, sidebar ) {
 var x = 0;
@@ -21,6 +22,7 @@ function resizeSidebar_mousemoveHandler( event ) {
   var dx = event.clientX - x;
   var newsidebarWidth = w + dx;
   sidebar.style.width = `${ newsidebarWidth }px`;
+  localStorage.setItem("sidebarWidth", sidebar.style.width);
 }
 
 function resizeSidebar_mouseupHandler() {
@@ -29,4 +31,21 @@ function resizeSidebar_mouseupHandler() {
 }
 
 resizer.addEventListener("mousedown", resizeSidebar_mousedownHandler);
-}
+}
+
+//This code is for creating a collapsable sidebar for the mobile view
+const mediaQuery = window.matchMedia('(max-width: 47.9875rem)')
+
+function mobileSidenav(e) {
+  if (e.matches) {
+      $('#sidebar-collapse').collapse('hide')
+  }
+  else{
+      $('#sidebar-collapse').collapse('show')
+  }
+}
+$(document).ready(function() {
+  mobileSidenav(mediaQuery)
+});
+
+mediaQuery.addEventListener('change', mobileSidenav)

attack-theme/static/style/_layouts.scss

@@ -125,6 +125,18 @@ a {
         border-top: 1px solid border-color(body);
     }
 }
+.row-main-page {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+
+@media screen and (max-width: 47.9875rem) {
+    .row-main-page {
+        display: inline;
+    }
+}
 
 // p for home page
 .p-line {
@@ -578,17 +590,21 @@ pre {
 
 /*TWITTER*/
 // twitter container in the home page
-.twitter-card {
-    width: to-rem(400);
+.attack-box {
+    width: to-rem(384);
     max-width: 100%;
-    height: to-rem(400);
+    height: to-rem(464);
     margin: 0 auto;
+    border: 3px solid #dfdfdf;
+    padding: 3px;
+    display: flex;
+    flex-direction: column;
     iframe {
         border: 1px solid border-color(body) !important;
         border-radius: .25rem;
     }
-
 }
+
 /******/
 
 /*BREADCRUMBS*/

attack-theme/static/style/_nav.scss

@@ -119,8 +119,39 @@
         font-size: rem(1.3);
         color: on-color-deemphasis(body);
         letter-spacing: to-rem(3);
+        pointer-events: none;
+        @media screen and (max-width: 47.9875rem) {
+            pointer-events: all;
+        }
+    }
+
+    .heading.collapsed .fa-chevron-up,
+    .heading .fa-chevron-down {
+        display: none;
+    }
+
+    .heading.collapsed .fa-chevron-down,
+    .heading .fa-chevron-up {
+        display: inline-block;
+    }
+
+    i.fa {
+        visibility: hidden;
+        display: none;
+        @media screen and (max-width: 47.9875rem) {
+            visibility: visible;
+            display: contents;
+        }
     }
 
+    .br-mobile {
+        display: none;
+        @media screen and (max-width: 47.9875rem) {
+            display: inline-block;
+        }
+    }
+
+
     // dropdown of the button in the side navigation. This button is in MATRICES, TACTICS, TECHNIQUES, MITIGATIONS, GROUPS, and SOFTWARE
     .heading-dropdown {
         font-size: rem(0.9);
@@ -176,33 +207,9 @@
             }
         }
     }
-
-    /* Side navigation collapse */
-    // don't show collapsed side navigation (desktop view)
-    .side-nav-mobile-view {
-        display: none;
-    }
-
-    // show side navigation in desktop view
-    .side-nav-desktop-view {
-        display: block;
-    }
-
-    // side navigation collapsed view for phones and small tablets
-    @media screen and (max-width: 47.9875rem) {
-        // show collapsed side navigation (mobile view)
-        .side-nav-mobile-view {
-            display: block;
-        }
-
-        // don't show side navigation in desktop view
-        .side-nav-desktop-view {
-            display: none;
-        }
-    }
-    /******/
 }
 /******/
+
 .resizer {
     width: 2px;
     top: 0;
@@ -212,6 +219,7 @@
     position: absolute;
     background-color: #dfdfdf;
  }
+
 .sidebar.nav {
     // max-height: 60vh;
     overflow-y: auto;
@@ -222,13 +230,7 @@
     // Remove overflow and sticky position for mobile view
     @media screen and (max-width: 47.9875rem) {
         position: static;
-    }
-    .side-nav-mobile-view {
-        .sidenav-wrapper {
-            .sidenav-list {
-                overflow-y: visible;
-            }
-        }
+        min-width: fit-content;
     }
 
     .sidenav-wrapper {
@@ -238,6 +240,7 @@
         height: 100%;
         display: flex;
         flex-direction: column;
+        padding-right: 5px;
         .heading {
             border-bottom: 1px solid color-alternate(body);
             flex: 0 1 0;

attack-theme/templates/general/attack-index.html

@@ -8,13 +8,9 @@
     {{ super() }}
     <div class="col jumbotron-fluid">
         <div class="container home-banner">
-            <div class="row pt-5">
+            <div class="row-main-page pt-5">
                 {% if parsed.attack_branding %}
                     <div class="col mb-5 home-left-col">
-                        <p class="text-justify">MITRE ATT&CK<sup>&reg;</sup> is a globally-accessible knowledge base of adversary tactics and techniques based on real-world observations. The ATT&CK knowledge base is used as a foundation for the development of specific threat models and methodologies in the private sector, in government, and in the cybersecurity product and service community.</p>
-                        <p class="text-justify">With the creation of ATT&CK, MITRE is fulfilling its mission to solve problems for a safer world &mdash; by bringing communities together to develop more effective cybersecurity. ATT&CK is open and available to any person or organization for use at no charge.</p>                    
-                    </div>
-                    <div class="col">
                         <div class="py-1">
                             <img src="{{ parsed.logo_landingpage }}" class="rounded mx-auto d-block pb-4 attack-logo-bold">
                         </div>
@@ -63,6 +59,21 @@
                             <a class="twitter-timeline" href="https://twitter.com/MITREattack?ref_src=twsrc%5Etfw" data-theme="light" data-height="388">Tweets by MITREattack</a>
                             <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                         </div> -->
+                        <p class="text-justify">MITRE ATT&CK<sup>&reg;</sup> is a globally-accessible knowledge base of adversary tactics and techniques based on real-world observations. The ATT&CK knowledge base is used as a foundation for the development of specific threat models and methodologies in the private sector, in government, and in the cybersecurity product and service community.</p>
+                        <p class="text-justify">With the creation of ATT&CK, MITRE is fulfilling its mission to solve problems for a safer world &mdash; by bringing communities together to develop more effective cybersecurity. ATT&CK is open and available to any person or organization for use at no charge.</p>
+                    </div>
+                    <div class="col">
+                        <div class="attack-box">
+                            <img width="100%" height="50%" src="/theme/images/ATTACKCon-4.png" alt="ATT&CKcon 4.0">
+                                <center>
+                                    <hr>
+                                    <h2 class="attack-box-heading">
+                                        ATT&amp;CKcon 4.0 will be held on <strong>Oct 24-25</strong> in McLean, VA.
+                                        <br>
+                                        <a href="https://na.eventscloud.com/attackcon4/">Click here</a> for more details and to register.
+                                    </h2>
+                                </center>
+                        </div>
                     </div>
                 {% else %}
                     <p class="text-justify">

attack-theme/templates/macros/navigation.html

@@ -20,7 +20,10 @@
 -->
 {% macro sidenav(root, output_file, filter=False) %}
 <div class="sidenav-wrapper">
-  <div class="heading" id="v-home-tab" aria-selected="false">{{root.name | upper}}</div>
+  <div class="heading" data-toggle="collapse" data-target="#sidebar-collapse" id="v-home-tab" aria-selected="false">{{root.name | upper}}
+    <i class="fa fa-fw fa-chevron-down"></i>
+    <i class="fa fa-fw fa-chevron-up"></i>
+  </div>
   {% if filter %}
   <div class="checkbox-div" id="v-home-tab" aria-selected="false">
     <div class="custom-control custom-switch">
@@ -37,6 +40,8 @@
     </div>
   </div>
   {% endif %}
+  <br class="br-mobile">
+  <div class="collapse show" id="sidebar-collapse">
   <div class="sidenav-list">
     {# "overview" link as first item in list if root.path exists #}
     {% if root.path %}
@@ -47,6 +52,7 @@
     {% endfor %}
   </div>
 </div>
+</div>
 {% endmacro %}
 
 <!-- recusive helper for sidenav -->

data/faq.json

@@ -102,7 +102,7 @@
             "questions": [
                 {
                     "question": "How should I reference the name ATT&CK?",
-                    "answer": "<p>Both MITRE ATT&CK<sup>&reg;</sup> and ATT&CK<sup>&reg;</sup> are registered trademarks of The MITRE Corporation.</p><p>For more information please visit our <a href=\"/resources/brand\">Brand Guide</a></p>"
+                    "answer": "<p>Both MITRE ATT&CK<sup>&reg;</sup> and ATT&CK<sup>&reg;</sup> are registered trademarks of The MITRE Corporation.</p><ul><li>Your first references in writing must include \"MITRE\" preceding \"ATT&CK<sup>&reg;</sup>\" - but subsequently should just reference \"ATT&CK\" (no registered trademark symbol required).<ul><li>Example of a first reference: <i>MITRE ATT&CK<sup>&reg;</sup> is a curated knowledge base and model for cyber adversary behavior...</i></li><li>Example of subsequent reference: <i>ATT&CK is useful for understanding security risk against known adversary behavior...</i></li></ul><li>A headline should <i>always</i> reference \"MITRE ATT&CK\" together (never only \"ATT&CK<sup>&reg;</sup>\").</li><li>Always capitalize \"ATT&CK\" to distinguish it from the surrounding text.</li><li>Do not modify the trademark, such as through hyphenation or abbreviation. For example, \"ATT&CK'd!\", \"Plan-of-ATT&CK\", \"ATTK\".</li><li>You may not display the ATT&CK trademark in any manner that implies an affiliation with, sponsorship, or endorsement by MITRE, or in a manner that can be reasonably interpreted to suggest third party content represents the views and opinions of MITRE or MITRE personnel, unless those third parties receive express permission from MITRE.</li><li>You may not use ATT&CK in your product names, service names, trademarks, logos, or company names.</li></ul> For more information please visit our <a href=\"/resources/brand\"> Brand Guide </a>"
                 },
                 {
                     "question": "Where can I download the MITRE ATT&CK logo?",

data/resources.json

@@ -3,7 +3,7 @@
         {
             "name": "Automation: The Wonderful Wizard of CTI (Or Is IT?)",
             "date": "January 2020",
-            "url": "https://www.sans.org/presentations/automation-the-wonderful-wizard-of-cti-or-is-it/",
+            "url": "https://www.slideshare.net/MITREATTACK/automation-the-wonderful-wizard-of-cti-or-is-it",
             "description": "This presentation from the SANS CTI Summit explores how automation can be applied to cyber threat intelligence using the Threat Report ATT&CK Mapper (TRAM)."
         }, 
         {
@@ -22,7 +22,7 @@
             "name": "Turning Intelligence Into Action with MITRE ATT&CK",
             "date": "October 2019",
             "url": "https://www.anomali.com/resources/webcasts/turning-intelligence-into-action-with-mitre-attck-detect-19-presentation-series",
-            "description": "This presentation from Anomali Detect discusses how you can use ATT&CK for threat intelligence, including a process for mapping intelligence to ATT&CK as well as biases to watch out for as you do this. <a href='https://www.slideshare.net/AdamPennington4/anomali-detect-19-nickels-pennington-turning-intelligence-into-action-with-mitre-attck-177846813'>Slides are also available</a>."
+            "description": "This presentation from Anomali Detect discusses how you can use ATT&CK for threat intelligence, including a process for mapping intelligence to ATT&CK as well as biases to watch out for as you do this. <a href='https://www.mitre.org/sites/default/files/2021-10/first-cti-turning-intelligence-into-action-mitre-attack-2019.pdf'>Slides are also available</a>."
         },
         {
             "name": "Leveraging MITRE ATT&CK for Detection, Analysis & Defense",
@@ -57,7 +57,7 @@
         {
             "name": "Do-It-Yourself ATT&CK Evaluations to Improve Your Security Posture",
             "date": "June 2019",
-            "url": "https://www.sans.org/cyber-security-summit/archives/file/summit_archive_1559672321.pdf",
+            "url": " https://www.sans.org/presentations/do-it-yourself-att-ck-evaluations-to-improve-your-security-posture/",
             "description": "This presentation from the SANS Enterprise Defense Summit explains how defenders can improve their security posture through the use of adversary emulation by performing their very own ATT&CK Evaluations."
         },
         {
@@ -123,7 +123,7 @@
         {
             "name": "ATT&CKing the Status Quo: Threat-Based Adversary Emulation with MITRE ATT&CK",
             "date": "September 2018",
-            "url": "https://www.sans.org/cyber-security-summit/archives/file/summit-archive-1536260992.pdf",
+            "url": "https://www.slideshare.net/KatieNickels/threatbased-adversary-emulation-with-mitre-attck",
             "description": "This presentation from the SANS Threat Hunting Summit shows how you can use ATT&CK to apply threat intelligence to adversary emulation."
         },
         {

modules/campaigns/campaigns.py

@@ -63,12 +63,6 @@ def generate_markdown_files():
             "Campaigns", "/campaigns/", campaign_list_no_deprecated_revoked
         )
         data["side_menu_data"] = side_menu_data
-
-        side_menu_mobile_view_data = util.buildhelpers.get_side_menu_mobile_view_data(
-            "campaigns", "/campaigns/", campaign_list_no_deprecated_revoked, group_by
-        )
-        data["side_menu_mobile_view_data"] = side_menu_mobile_view_data
-
         data["campaigns_table"] = get_campaigns_table_data(campaign_list_no_deprecated_revoked)
         data["campaigns_list_len"] = str(len(campaign_list_no_deprecated_revoked))
 
@@ -81,12 +75,12 @@ def generate_markdown_files():
 
         # Create the markdown for the enterprise campaigns in the STIX
         for campaign in campaign_list:
-            generate_campaign_md(campaign, side_menu_data, side_menu_mobile_view_data, notes)
+            generate_campaign_md(campaign, side_menu_data, notes)
 
     return has_campaign
 
 
-def generate_campaign_md(campaign, side_menu_data, side_menu_mobile_view_data, notes):
+def generate_campaign_md(campaign, side_menu_data, notes):
     """Responsible for generating markdown of all campaigns."""
 
     attack_id = util.buildhelpers.get_attack_id(campaign)
@@ -97,7 +91,6 @@ def generate_campaign_md(campaign, side_menu_data, side_menu_mobile_view_data, n
         data["attack_id"] = attack_id
 
         data["side_menu_data"] = side_menu_data
-        data["side_menu_mobile_view_data"] = side_menu_mobile_view_data
         data["notes"] = notes.get(campaign["id"])
 
         # External references

modules/campaigns/templates/campaign.html

@@ -27,12 +27,9 @@
 
 {% block innerleft %}
 <!--stop-indexing-for-search-->
-    <div class="side-nav-desktop-view h-100">
+<div id="v-tab" role="tablist" aria-orientation="vertical" class="h-100">
         {{ navigation.sidenav(parsed.side_menu_data, output_file) }} 
     </div>
-    <div class="side-nav-mobile-view">
-        {{ navigation.sidenav(parsed.side_menu_mobile_view_data, output_file) }} 
-    </div>
 <!--start-indexing-for-search-->
 {% endblock %}