TAT-142 Add logo to site, 508 compliance, and misc formatting

* feat(TAT-142): Update favicon

* feat(TAT-142): add logo to homepage and footer, update default text on homepage

* feat(TAT-142): 508 compliance: add alt text to images, add labels to elements

* feat(TAT-142):more accessibility fixes, move css to scoped block

* bugfix(TAT-142): add conditional to delete icons for static lists, set attack version as a store value

* Edited some of the static text

* Pre-release repo cleanup and update README

* style(TAT-142): misc formatting to make site consistent across pages, improve 508 compliance and mobile view

* feat(TAT-142): apply markdown to all text blocks, fix errors with parsing spreadsheet (from updating to latest ATT&CK)

* style(TAT-142): set max width for footer

---------

Co-authored-by: arobbins <arobbins@mitre.org>
Co-authored-by: Mark E. Haase <mhaase@mitre.org>

Makefile

@@ -0,0 +1,20 @@
+#
+# See `make help` for a list of all available commands.
+#
+
+.DEFAULT_GOAL := help
+ROOTDIR := $(dir $(abspath $(lastword $(MAKEFILE_LIST))))
+
+.PHONY: help
+help: ## Show Makefile help
+	@grep -hE '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \
+		awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' | \
+		sort
+
+.PHONY: build
+build: ## Build the application
+	npm run build
+
+.PHONY: serve
+serve: ## Run the dev server
+	npm run dev

README.md

@@ -1,133 +1,70 @@
 # Top ATT&CK Techniques
 
-Top ATT&CK Techniques provides defenders with a systematic approach to
-prioritizing ATT&CK techniques. Our open methodology considers technique
-prevalence, common attack choke points, and actionability to enable defenders to
-focus on the ATT&CK techniques that are most relevant to their organization.
+Top ATT&CK Techniques provides defenders with a systematic approach to prioritizing
+MITRE ATT&CK® techniques. Our methodology considers technique prevalence, common
+attack choke points, and actionability to enable defenders to focus on the ATT&CK
+techniques that are most relevant to their organization.
 
 **Table of Contents:**
 - [Getting Started](#getting-started)
-- [Overview](#overview)
-- [Limitations](#limitations)
 - [Getting Involved](#getting-involved)
 - [Questions and Feedback](#questions-and-feedback)
-- [How Do I Contribute?](#how-do-i-contribute)
 - [Notice](#notice)
 
 
 ## Getting Started
 
-To get started, try using the web-based calculator. If you want to go deeper, review the
-methodology and consult the Excel calculator spreadsheet to see the underlying data and
-computations.
-
-| Resource                                                                                                                       | Description                                                                                         |
-| ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
-| [Web Calculator](https://top-attack-techniques.mitre-engenuity.org/)                                                           | A web-based calculator for building customized priority lists of techniques tailored to your needs. |
-| [Methodology](https://github.com/center-for-threat-informed-defense/top-attack-techniques/blob/main/Methodology.md)            | An overview of the algorithms and analysis that went into creating the calculator.                  |
-| [Excel Calculator](https://github.com/center-for-threat-informed-defense/top-attack-techniques/raw/main/Calculator.xlsx)       | The Excel version of the Top ATT&CK Techniques calculator.                                          |
-| [Excel Calculator README](https://github.com/center-for-threat-informed-defense/top-attack-techniques/blob/main/Calculator.md) | Guidance for using the Top ATT&CK Techniques Excel calculator.                                      |
-
-## Overview
-
-The Top ATT&CK Techniques Calculator makes it easy to build customized lists of
-high-priority ATT&CK techniques lists. The prioritization is based on a
-[methodology](./Methodology.md) that incorporate technique prevalence, choke point
-analysis and actionability.
-
-<img width="468" alt="image" src="https://user-images.githubusercontent.com/1420025/167134772-933b2bf1-3bd2-44d0-a1c8-f27dd9e1724f.png">
-
-Users can create a top 10 technique list tailored to their
-organization. The user inputs include filters for the operating system, security
-controls, detection analytics, and modifiers for process and network monitoring
-coverage. The calculator displays the top 10 techniques and provides the option
-to export every technique in v14 of ATT&CK in JSON format.
-
-<img width="412" alt="image" src="https://user-images.githubusercontent.com/1420025/167134857-00f5aa70-1f32-4a31-8698-cdc4f97c8796.png">
-
-Along with giving defenders a tool to help prioritize techniques, the project
-wanted to put our methodology to practical use and produce a top 10 list that
-was focused on a specific topic. A ransomware list was selected because
-ransomware is wide-reaching, indiscriminate, and relevant. This list is the
-Center’s assessment of which techniques a defender should prioritize to protect
-themselves against a ransomware attack.
-
-To create this ransomware list, the project’s methodology was used and
-supplemented by adding a separate component that is specific to the Center’s
-ransomware analysis. To feed this component, CTI (Cyber Threat Intelligence)
-reporting on 22 different ransomware families was reviewed and extracted
-techniques that were used during ransomware attacks. The more times a technique
-was seen across the 22 groups, the higher the weight.
-
-## Limitations
-
-ATT&CK was never created with the intent of assigning values to each technique.
-It is a compendium of things adversaries have done and gives defenders a common
-lexicon. Therefore, quantifying the data within ATT&CK is a bit precarious. This
-project applied discrete values to abstract ideas and generated a weighted score
-for every technique.
-
-The data used for this analysis was hardly perfect, which led to some flawed
-inputs. Flawed inputs lead to flawed outputs, which means that this top 10 list
-should not be seen as a declaration that you only need to defend against the top
-10 techniques. This list should serve as a starting point for a more holistic
-approach to systematically improving defensive capabilities.
-
-There are certainly gaps and errors with our approach, but in the Center, we are
-always trying to advance the state of threat-informed defense. This is our first
-attempt at creating a methodology to prioritize ATT&CK techniques and we plan to
-make improvements. To do that, we need your feedback. Please share with us what
-is working, what isn’t working, and how we can make this more beneficial to you.
+The website hosts all of the resources for this project. The website is linked below
+along with some shortcuts to important pages on the website.
+
+| Resource                                                                            | Description                                                                |
+| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| [Web Site](https://top-attack-techniques.mitre-engenuity.org/)                      | The website hosts the calculator, methodology, and ransomware top 10 list. |
+| [Ransomware Top 10](https://top-attack-techniques.mitre-engenuity.org/top-10-lists) | A curated top 10 list created by our expert ATT&CK analysts.               |
+| [Calculator](https://top-attack-techniques.mitre-engenuity.org/calculator)          | An interactive calculator for producing your own, customized top 10 lists. |
+| [Methodology](https://top-attack-techniques.mitre-engenuity.org/methodology)        | An overview of the algorithms and analysis that power the calculator.      |
 
 ## Getting Involved
 
 There are several ways that you can get involved with this project and help
 advance threat-informed defense:
 
-- **Review the methodology, use the calculator, and tell us what you think.**
-  We welcome your review and feedback on the calculator and our methodology.
-- **Help us prioritize improvements.** Let us know where we can improve. Your
-  input will help us prioritize improvements.
-- **Share your use cases.** We are interested in hearing from you about your use
-  cases and ideas. Tell us how you leveage the Top ATT&CK Techniques resources
-  and share your ideas for improving upon this foundation.
+- **Review the Ransomware Top 10 list.**
+  If ransomware is a threat that your organization is tracking and working to mitigate, consult our Ransomware Top 10 list align your effort with our analytical process.
+- **Make your own top 10 list.** Use the calculator to create your own customized top 10
+  list of ATT&CK techniques.
+- **Spread the word.** If you find Top ATT&CK Techniques valuable, share your experience
+  with your industry peers.
 
 ## Questions and Feedback
 
-Please submit issues for any technical questions/concerns or contact
-ctid@mitre-engenuity.org directly for more general inquiries.
-
-Also see the guidance for contributors if are you interested in contributing or
-simply reporting issues.
-
-## How Do I Contribute?
+Please submit [issues on
+GitHub](https://github.com/center-for-threat-informed-defense/top-attack-techniques/issues)
+for any technical questions or requests. You may also contact
+[ctid@mitre-engenuity.org](mailto:ctid@mitre-engenuity.org?subject=Question%20about%20top-attack-techniques)
+directly for more general inquiries about the Center for Threat-Informed Defense.
 
-We welcome your feedback and contributions to help advance our methodology.
-Please see the guidance for contributors if are you interested in [contributing
-or simply reporting issues.](/CONTRIBUTING.md)
-
-Please submit
-[issues](https://github.com/center-for-threat-informed-defense/top-attack-technique/issues)
-for any technical questions/concerns or contact ctid@mitre-engenuity.org
-directly for more general inquiries.
+We welcome your contributions to help advance Top ATT&CK Tehcniques in the form
+of [pull
+requests](https://github.com/center-for-threat-informed-defense/top-attack-techniques/pulls).
+Please review the [contributor
+notice](https://github.com/center-for-threat-informed-defense/top-attack-techniques/blob/main/CONTRIBUTING.md)
+before making a pull request.
 
 ## Notice
 
-Copyright 2022 MITRE Engenuity. Approved for public release. Document number
-CT0047
+© 2022, 2024 MITRE Engenuity. Approved for public release. Document number(s) CT0047.
 
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+file except in compliance with the License. You may obtain a copy of the License at
 
 http://www.apache.org/licenses/LICENSE-2.0
 
-Unless required by applicable law or agreed to in writing, software distributed
-under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
-CONDITIONS OF ANY KIND, either express or implied. See the License for the
-specific language governing permissions and limitations under the License.
-
-This project makes use of ATT&CK®
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the specific language governing
+permissions and limitations under the License.
 
-[ATT&CK Terms of Use](https://attack.mitre.org/resources/terms-of-use/)
+This project makes use of ATT&CK®: [ATT&CK Terms of
+Use](https://attack.mitre.org/resources/terms-of-use/)
 

index.html

@@ -2,7 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link
+      rel="icon"
+      href="/favicon-light.ico"
+      media="(prefers-color-scheme: light)"
+    />
+    <link
+      rel="icon"
+      href="/favicon-dark.ico"
+      media="(prefers-color-scheme: dark)"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

scripts/update_techniques.js

@@ -18,8 +18,9 @@ const DESTINATION_FILE = "src/data/Techniques.json";
         tid: r.getCell(1).value,
         name: r.getCell(2).value,
         description: r.getCell(3).value,
-        url: r.getCell(4).hyperlink,
-        tactics: r.getCell(8).value.toString().split(", "),
+        url: r.getCell(4).hyperlink
+          ? r.getCell(4).hyperlink
+          : r.getCell(4).value,
         detection: r.getCell(9).value,
         platforms: r.getCell(10).value.toString().split(", "),
         data_sources: r.getCell(11).value
@@ -47,9 +48,9 @@ const DESTINATION_FILE = "src/data/Techniques.json";
     if (r.number > 1) {
       const m = {
         mid: r.getCell(1).value,
-        name: r.getCell(2).value,
-        description: r.getCell(3).value,
-        url: r.getCell(4).hyperlink,
+        name: r.getCell(3).value,
+        description: r.getCell(4).value,
+        url: r.getCell(5).hyperlink,
       };
       mitigations.push(m);
     }