custom-nodes-security-scan/report-templates/yara-results-template.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Custom Node Security Scan Results</title>
    <script src="./lib/jquery-3.7.1.min.js"></script>
    <script src="./lib/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="./lib/css/bootstrap.min.css" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <style>
      .dd3 {
        font-size: 5rem;
        font-weight: 100;
        font-family: "Noto Sans", sans-serif;
      }
      .subtitle-dd3 {
        font-size: 1.4rem;
        font-weight: 400;
        font-family: "Noto Sans", sans-serif;
      }
      main {
        font-size: large;
        min-height: 92vh;
      }
      .hidden_xd {
        display: none !important;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="container col-12 p-4 mt-5">
        <h1 class="display-1 text-center dd3 mt-4">{{ package_name }}</h1>
        <p class="text-center text-muted mb-0 pb-0 subtitle-dd3">
          Yara Scan Results
        </p>
        <p class="text-center text-muted mb-2 mt-0 pb-2 subtitle-dd3">
          Generated on {{ date }}
        </p>
      </div>

      <div class="col-md-12 p-4">
        {% if has_passed_tests %}
        <div class="col-md-12 p-4 mb-4 mt-5">
          <h2 class="display-1 text-center dd3 mb-5" style="font-size: 3.75rem">
            Passed Tests
            <button
              type="button"
              class="btn btn-primary"
              id="passedTestsButton"
            >
              Show
              <span class="badge badge-light"> {{n_passed_tests}} </span>
            </button>
          </h2>
          <div
            class="row d-flex justify-content-center mt-3 hidden_xd"
            id="passedTests"
          >
            {% for test_name in passed_tests %}
            <div
              class="col-sm-12 col-m-6 col-lg-4 col-xl-3"
              style="overflow-x: hidden"
              title="{{ test_name }}"
              data-toggle="tooltip"
              data-placement="top"
              aria-describedby="tooltip"
            >
              {{ test_name }}
            </div>
            {% endfor %}
          </div>
        </div>
        {% endif %} {% if has_failed_tests %}
        <div class="col-md-12 p-4 mb-4 mt-5">
          <h2
            class="display-1 text-center dd3 mt-3 mb-5"
            style="font-size: 3.75rem"
          >
            Failed Tests
            <button class="btn btn-danger" id="failedTestsButton">
              Show
              <span class="badge badge-light">{{n_failed_tests}}</span>
            </button>
          </h2>
          <div
            class="row d-flex justify-content-center mt-3 hidden_xd"
            id="failedTests"
          >
            {% for test_name in failed_tests %}
            <div
              class="col-sm-12 col-m-6 col-lg-4 col-xl-3"
              style="overflow-x: hidden"
              title="{{ test_name }}"
              data-toggle="tooltip"
              data-placement="top"
              aria-describedby="tooltip"
            >
              {{ test_name }}
            </div>
            {% endfor %}
          </div>
        </div>

        {% endif %} {% if results.items() %}

        <div class="col-md-12 p-4 mb-4 mt-5">
          <h2 class="display-1 text-center dd3 mb-5" style="font-size: 3.75rem">
            Issues
            <button class="btn btn-warning" id="issuesButton">
              Show
              <span class="badge badge-light">{{n_issues}}</span>
              <span class="badge badge-light">{{n_matches}}</span>
              <span class="badge badge-light">{{n_instances}}</span>
            </button>
          </h2>
          <span id="issues" class="hidden_xd">
            {% for path, matches in results.items() %}
            <h3 class="mt-5 mb-2 pt-5 pb-3">
              <span class="text-muted text-small">FILE &nbsp;</span>
              <span class="text-primary">{{ path }}</span>
            </h3>
            <table class="table mt-5 p-5">
              <thead>
                <tr class="text-secondary">
                  <th scope="col">Test Name</th>
                  <th scope="col">Test Description</th>
                  <th scope="col">Match Rule</th>
                  <th scope="col">Match String</th>
                  <th scope="col">Is XOR</th>
                  <th scope="col">Author</th>
                  <th scope="col">Test Creation Date</th>
                  <th scope="col">Matched data</th>
                  <th scope="col">Length</th>
                  <th scope="col">Offset</th>
                  <th scope="col">XOR key</th>
                  <th scope="col">Plaintext</th>
                </tr>
              </thead>
              <tbody>
                {% for match in matches %} {% for string_data in match.Strings
                %} {% for instance in string_data.Instances %}
                <tr>
                  <td>{{ match.Namespace }}</td>
                  <td
                    title="{{ match.Meta.desc }}"
                    data-toggle="tooltip"
                    data-placement="top"
                    aria-describedby="tooltip"
                    class="text-info"
                  >
                    {{ match.Meta.desc }}
                  </td>
                  <td>{{ match.Rule }}</td>
                  <td>{{ string_data["Identifier"] }}</td>
                  <td>{{ string_data["Is XOR"] }}</td>
                  <td class="text-muted">
                    {{ match.Meta.author }} {{ match.Meta.company }}
                  </td>
                  <td class="text-muted">{{ match.Meta.lastmod }}</td>
                  <td class="code">{{ instance["Matched data"] }}</td>
                  <td>{{ instance["Matched length"] }}</td>
                  <td>{{ instance["Offset"] }}</td>
                  <td>{{ instance["XOR key"] }}</td>
                  <td>{{ instance["Plaintext"] }}</td>
                </tr>
                {% endfor %} {% endfor %} {% endfor %}
              </tbody>
            </table>
            {% endfor %}
          </span>
        </div>
        {% endif %}
      </div>
    </main>
    <footer class="footer mt-auto py-3 bg-light p-4">
      <div class="container text-center d-flex justify-content-space-between">
        <div class="text-muted text-center col-lg-2 col-m-4">
          <a href="https://github.com/christian-byrne/node-sec-scan"
            >Source Code
            <i class="fa fa-github text-secondary"></i>
          </a>
          <span class="text-muted">
            - that generated these reports &nbsp;
          </span>
        </div>
        <div class="text-muted text-center col-lg-2 col-m-4">
          <a href="https://virustotal.github.io/yara/"
            >Yara
            <img src="icons/yara.svg" alt="yara" class="w-25" />
          </a>
        </div>
        <div class="text-muted text-center col-lg-2 col-m-4">
          <a href="https://github.com/PyCQA/bandit"
            >Bandit
            <img src="icons/bandit.avif" alt="bandit" class="w-25" />
          </a>
        </div>
        <div class="text-muted text-center col-lg-2 col-m-4">
          <a href="https://snyk.io/"
            >Snyk
            <img src="icons/snyk.svg" alt="snyk" class="w-25" />
          </a>
        </div>
        <div class="text-muted text-center col-lg-2 col-m-4">
          <a href="https://pypi.org/project/pylint/"
            >Pylint
            <img src="icons/pylint.svg" alt="pylint" class="w-25" />
          </a>
        </div>
      </div>
    </footer>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        setTimeout(() => {
          const passedTestsButton =
            document.querySelector("#passedTestsButton");
          if (passedTestsButton) {
            passedTestsButton.addEventListener("click", function () {
              let target = document.querySelector("#passedTests");
              if (target.classList.contains("hidden_xd")) {
                target.classList.remove("hidden_xd");
              } else {
                target.classList.add("hidden_xd");
              }
            });
          }

          const failedTestsButton =
            document.querySelector("#failedTestsButton");

          if (failedTestsButton) {
            failedTestsButton.addEventListener("click", function () {
              let target = document.querySelector("#failedTests");
              if (target.classList.contains("hidden_xd")) {
                target.classList.remove("hidden_xd");
              } else {
                target.classList.add("hidden_xd");
              }
            });
          }
          const issuesButton = document.querySelector("#issuesButton");
          if (issuesButton) {
            issuesButton.addEventListener("click", function () {
              let target = document.querySelector("#issues");
              if (target.classList.contains("hidden_xd")) {
                target.classList.remove("hidden_xd");
              } else {
                target.classList.add("hidden_xd");
              }
            });
          }
        }, 800);
      });
    </script>
  </body>
</html>