{% extends "security/cves/base_cve.html" %}

{% block title %}{{ cve.id }}{% endblock %}

{% block body_class %}
  is-paper
{% endblock body_class %}

{% block content %}

  {% if cve.impact %}
    {% set cvssV3 = cve.impact.baseMetricV3.cvssV3 %}
  {% endif %}

  <section class="p-strip is-shallow u-no-padding--bottom">
    <div class="row p-section">
      <div class="col-start-large-4 col-9">
        <h1>{{ cve.id }}</h1>

        {% if cve.codename %}
          <p class="u-cve-gap">
            <span>Name</span><span>{{ cve.codename }}</span>
          </p>
        {% endif %}

        {% if cve.published %}
          <p class="u-cve-gap">
            Publication date <span>{{ cve.published }}</span>
          </p>
        {% endif %}

        {% if cve.updated_at %}
          <p class="u-cve-gap">
            Last updated <span>{{ cve.updated_at }}</span>
          </p>
        {% endif %}

        <hr class="p-rule" />
        {% if cve.priority or cvssV3 %}
          <div class="row cve-hero-scores">
            {% if cve.priority %}
              <div>
                <p class="p-text--small-caps" style="margin-bottom: 0.5rem;">Ubuntu priority</p>
                <div class="p-heading-icon--small">
                  <div class="p-heading-icon__header">
                    {% if cve.priority == 'unknown' %}
                      <img src="https://assets.ubuntu.com/v1/2dff197f-CVE-Priority-icon-Unknown.svg"
                           alt=""
                           class="p-heading-icon__img" />
                    {% endif %}

                    {% if cve.priority == 'negligible' %}
                      <img src="https://assets.ubuntu.com/v1/ef6c75b8-CVE-Priority-icon-Negligible.svg"
                           alt=""
                           class="p-heading-icon__img" />
                    {% endif %}

                    {% if cve.priority == 'low' %}
                      <img src="https://assets.ubuntu.com/v1/03ac6f86-CVE-Priority-icon-Low.svg"
                           alt=""
                           class="p-heading-icon__img" />
                    {% endif %}

                    {% if cve.priority == 'medium' %}
                      <img src="https://assets.ubuntu.com/v1/8010f9e0-CVE-Priority-icon-Medium.svg"
                           alt=""
                           class="p-heading-icon__img" />
                    {% endif %}

                    {% if cve.priority == 'high' %}
                      <img src="https://assets.ubuntu.com/v1/3887354e-CVE-Priority-icon-High.svg"
                           alt=""
                           class="p-heading-icon__img" />
                    {% endif %}

                    {% if cve.priority == 'critical' %}
                      <img src="https://assets.ubuntu.com/v1/c96f27b9-CVE-Priority-icon-Critical.svg"
                           alt=""
                           class="p-heading-icon__img" />
                    {% endif %}
                    <p class="p-heading-icon__title p-heading--4">
                      <strong>{{ cve.priority | capitalize }}</strong>
                    </p>
                  </div>
                  <p>
                    <a href="{% if cve.priority_reason %} #priority-reason {% else %} /security/cves/about#priority {% endif %}">Why this priority?</a>
                  </p>
                </div>
              </div>
            {% endif %}

            {% if cvssV3 %}
              <div>
                <h2 class="p-text--small-caps"  style="margin-bottom: 0.5rem;">Cvss 3 Severity Score</h2>
                <div class="p-heading-icon--small">
                  <div class="p-heading-icon__header">
                    {% set baseScore = cvssV3.baseScore %}
                    {% if baseScore <= 3.9 %}
                      <img src="https://assets.ubuntu.com/v1/03ac6f86-CVE-Priority-icon-Low.svg"
                           alt=""
                           class="p-heading-icon__img" />
                      <p class="p-heading-icon__title p-heading--4">
                        <strong>{{ cvssV3.baseScore | capitalize }} &middot; Low</strong>
                      </p>
                    {% elif baseScore <= 6.9 %}
                      <img src="https://assets.ubuntu.com/v1/8010f9e0-CVE-Priority-icon-Medium.svg"
                           alt=""
                           class="p-heading-icon__img" />
                      <p class="p-heading-icon__title p-heading--4">
                        <strong>{{ cvssV3.baseScore | capitalize }} &middot; Medium</strong>
                      </p>
                    {% elif baseScore <= 8.9 %}
                      <img src="https://assets.ubuntu.com/v1/3887354e-CVE-Priority-icon-High.svg"
                           alt=""
                           class="p-heading-icon__img" />
                      <p class="p-heading-icon__title p-heading--4">
                        <strong>{{ cvssV3.baseScore | capitalize }} &middot; High</strong>
                      </p>
                    {% elif baseScore <= 10 %}
                      <img src="https://assets.ubuntu.com/v1/c96f27b9-CVE-Priority-icon-Critical.svg"
                           alt=""
                           class="p-heading-icon__img" />
                      <p class="p-heading-icon__title p-heading--4">
                        <strong>{{ cvssV3.baseScore | capitalize }} &middot; Critical</strong>
                      </p>
                    {% endif %}
                  </div>
                </div>
                <p>
                  <a href="#impact-score">Score breakdown</a>
                </p>
              {% elif cve.cvss3 %}
                <p>CVSS 3 base score: {{ cve.cvss3 }}</p>
              </div>
            {% endif %}
          </div>
        {% endif %}
      </div>
    </div>
  </section>

  <section class="p-section">
    <div class="row">
      <aside class="col-3">
        <div class="p-side-navigation--raw-html u-hide--small u-hide--medium"
             id="drawer"
             style="position: sticky;
                    top: 4rem">
          <button class="p-side-navigation__toggle js-drawer-toggle"
                  aria-controls="drawer">Toggle side navigation</button>
          <div class="p-side-navigation__overlay js-drawer-toggle"
               aria-controls="drawer"></div>
          <nav class="p-side-navigation__drawer"
               aria-label="documentation side navigation">
            <div class="p-side-navigation__drawer-header">
              <button class="p-side-navigation__toggle--in-drawer js-drawer-toggle"
                      aria-controls="drawer">Toggle table of contents</button>
            </div>
            <ul>
              {% if cve.description %}
                <li class="p-side-navigation__item">
                  <a class="highlight-link is-active" href="#description">Description</a>
                </li>
              {% endif %}
              {% if cve.mitigation %}
                <li class="p-side-navigation__item">
                  <a class="highlight-link" href="#mitigation">Mitigation</a>
                </li>
              {% endif %}
              {% if cve.status %}
                <li class="p-side-navigation__item">
                  <a class="highlight-link" href="#status">Status</a>
                </li>
              {% endif %}
              {% if cve.notes and only_priority_note == False %}
                <li class="p-side-navigation__item">
                  <a class="highlight-link" href="#notes">Notes</a>
                </li>
              {% endif %}
              {% if cve.impact %}
                <li class="p-side-navigation__item">
                  <a class="highlight-link" href="#impact-score">Severity score breakdown</a>
                </li>
              {% endif %}
              {% if cve.references %}
                <li class="p-side-navigation__item">
                  <a class="highlight-link" href="#references">References</a>
                </li>
              {% endif %}
            </ul>
          </nav>
        </div>
      </aside>

      <main class="col-9">
        <div class="p-section section-heading" id="description">
          {% if cve.description %}<p class=" u-no-padding--top">{{ cve.description }}</p>{% endif %}

          {% if cve.ubuntu_description %}
            <h2 class="p-heading--3">From the Ubuntu Security Team</h2>
            <p>{{ cve.ubuntu_description }}</p>
          {% endif %}

          {% if cve.notes and only_priority_note == False %}
            <p>
              <a href="#notes">Read the notes from the security team</a>
            </p>
          {% endif %}

          {% if cve.priority_reason %}
            <h3 id="priority-reason" style="scroll-margin-top: 3.5rem">Why is this CVE {{ cve.priority }} priority?</h3>
            <p>{{ cve.priority_reason }}</p>
            <p>
              <a href="/security/cves/about#priority">Learn more about Ubuntu priority</a>
            </p>
          {% endif %}
        </div>

        {% if cve.mitigation %}
          <div class="p-section section-heading" id="mitigation">
            <h2>Mitigation</h2>
            <p>{{ cve.mitigation }}</p>
          </div>
        {% endif %}

        <div class="p-section section-heading" id="status">
          <div class="u-fixed-width p-section--shallow"
               style="display: flex;
                      justify-content: space-between">
            <h2>Status</h2>
            <label class="p-switch" style="float: right;">
              <input type="checkbox"
                     class="p-switch__input js-toggle-maintained"
                     role="switch" />
              <span class="p-switch__slider"></span>
              <span class="p-switch__label">Show unmaintained releases</span>
            </label>
          </div>
          <!-- Notification text and aria label changes depending on the statuses, see script -->
          <div class="p-notification--information is-light js-conditional-notification u-hide">
            <div class="p-notification__content">
              <p class="p-notification__message"></p>
            </div>
          </div>
          {% if cve.status == 'active' and only_upstream == False %}
            <div class="row p-section--shallow u-table-horizontal-scroll">
              <table class="cve-table u-table-horizontal-scroll__table">
                <thead>
                  <tr>
                    <th style="width: 12rem;">Package</th>
                    <th style="width: 18rem;">Ubuntu Release</th>
                    <th style="padding-left: 2rem; width:25rem">Status</th>
                  </tr>
                </thead>
                <tbody>
                  {% for package in cve.packages %}
                    {% for status in package.statuses %}
                      <tr>
                        {% if status.release_codename and status.release_codename != "upstream" %}
                          {% if loop.index == 1 %}<th rowspan="{{ package.statuses | length }}">{{ package["name"] }}</th>{% endif %}
                          <td {% if status.pocket_desc %}style="overflow: visible;"{% endif %}
                              {% if status.maintained == False %}class="js-unmaintained-cell u-hide--cell"{% endif %}>
                            {{ status.version }}
                            {% if status.support_tag %}{{ status.support_tag }}{% endif %}
                            <span class="u-text--muted">{{ status.release_codename }}</span>
                            {% if status.pocket_desc and status.pocket_desc.label != "Ubuntu Pro" %}
                              <a class="p-chip p-tooltip--top-center"
                                 href="{{ status.pocket_desc.href }}"
                                 aria-describedby="{{ status.pocket }}-tooltip">
                                <span class="p-chip__value">{{ status.pocket_desc.label }}</span>
                                <span class="p-tooltip__message cve-chip"
                                      role="tooltip"
                                      id="{{ status.pocket }}-tooltip">{{ status.pocket_desc.text }}</span>
                              </a>
                            {% endif %}
                          </td>
                          {# djlint: off #}
                          {% if status.icon %}
                            <td style="overflow: visible; display: flex;" class="{% if status.maintained == False %} js-unmaintained-cell u-hide--cell{% endif %} cve-td-status" >
                              <i class="p-icon--{{ status.icon }}" style="margin-top: .2rem; margin-right: 0.5rem;"></i>
                              <div style="display: block;">
                                {{ status.name }} {% if status.name == "Fixed" %}<span class="u-text--muted">{{ status.description }} </span> {% endif %}
                                {% if status.pocket_desc and status.pocket_desc.label == "Ubuntu Pro" %}
                                  <div>
                                    <a class="p-chip p-tooltip--top-center u-no-margin--bottom" href="/pro" aria-describedby="{{ status.pocket }}-tooltip">
                                      <p class="p-chip__value">{{ status.pocket_desc.label }}</p>
                                      <p class="p-tooltip__message cve-chip" role="tooltip" id="{{ status.pocket }}-tooltip">{{ status.pocket_desc.text }}</p>
                                    </a>
                                  </div>
                                {% endif %}
                              </div>
                            </td>     
                          {% else %}
                            <td class="{% if status.maintained == False %}js-unmaintained-cell u-hide--cell{% endif %} cve-td-status {% if status.status == 'DNE' %}u-text--muted{% endif %}" style="padding-left: 2rem;">
                              {{ status.name }} {% if status.status == "ignored" %} <span class="u-text--muted">{{ status.description }} </span> {% endif %}
                            </td>
                          {% endif %}

                            
                          {# djlint: on #}
                        {% endif %}
                      </tr>
                    {% endfor %}
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% endif %}
          <hr class="p-rule--muted" />
          <ul class="p-inline-list u-responsive-realign">
            <li class="p-inline-list__item">
              <a href="/security/cves/about#security">How can I get the fixes?</a>
            </li>
            <li class="p-inline-list__item">
              <a href="/security/cves/about#statuses">What do statuses mean?</a>
            </li>
            {% if patches %}
              <li class="p-inline-list__item">
                <a href="#patch-details">Patch details</a>
              </li>
            {% endif %}
          </ul>
        </div>

        {% if cve.expanded_coverage %}
          <div class="p-section">
            <h3>Get expanded security coverage with Ubuntu Pro</h3>
            <p>
              Reduce your average CVE exposure time from 98 days to 1 day with expanded CVE patching, ten-years security maintenance and optional support for the full stack of open-source applications. Free for personal use.
            </p>
            <a class="p-button--positive" href="/pro">Get Ubuntu Pro</a>
          </div>
        {% endif %}

        {% if cve.notes and only_priority_note == False %}
          <div class="p-section section-heading" id="notes">
            <h2>Notes</h2>
            <div class="row">
              <div class="col-6">
                {% for note in cve.notes if "Priority reason" not in note.note %}
                  <hr class="p-rule" />
                  {% if note.author %}
                    <h3 class="p-heading--5">
                      <a href="https://launchpad.net/~{{ note.author }}">{{ note.author }}</a>
                    </h3>
                  {% endif %}
                  <p>{{ note.note }}</p>
                {% endfor %}
              </div>
            </div>
          </div>
        {% endif %}

        {% if patches %}
          <div class="p-section"
               id="patch-details"
               style="scroll-margin-top: 3.5rem">
            <h3>Patch details</h3>
            <div class="p-notification--information">
              <div class="p-notification__content">
                <p class="p-notification__message">
                  For informational purposes only. We recommend not to cherry-pick updates. <a href="/security/cves/about#security">How can I get the fixes?</a>
                </p>
              </div>
            </div>
            <table>
              <thead>
                <tr>
                  <th class="u-adjust-table-heading">Package</th>
                  <th>Patch details</th>
                </tr>
              </thead>
              <tbody>
                {% for package in cve.packages %}
                  {% if package["name"] in patches|map(attribute="name") %}
                    <tr>
                      <td>{{ package["name"] }}</td>
                      <td>
                        <ul class="p-list">
                          {% for patch in patches %}
                            {% if patch.name == package["name"] %}
                              {% if patch.type == "text" %}
                                <li class="p-list__item has-bullet">{{ patch.content }}</li>
                              {% elif patch.type == "break-fix" %}
                                <li class="p-list__item has-bullet">
                                  Introduced by
                                  <a href="https://git.kernel.org/linus/{{ patch.content.introduced }}">{{ patch.content.introduced[:7] }}</a>,
                                  fixed by
                                  <a href="https://git.kernel.org/linus/{{ patch.content.fixed }}">{{ patch.content.fixed[:7] }}</a>
                                </li>
                              {% elif patch.type == "link" %}
                                {% if patch.content.suffix %}
                                  <li class="p-list__item has-bullet">
                                    {{ patch.content.prefix | capitalize }}:
                                    <a href="{{ patch.content.suffix }}">{{ patch.content.suffix_text }}</a>
                                  </li>
                                {% endif %}
                              {% endif %}
                            {% endif %}
                          {% endfor %}
                        </ul>
                      </td>
                    </tr>
                  {% endif %}
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
        {% if cvssV3 %}
          <div class="p-section section-heading" id="impact-score">
            <div>
              <h2>Severity score breakdown</h2>
              <table>
                <thead>
                  <tr>
                    <th class="u-adjust-table-heading">Parameter</th>
                    <th class="u-align--left">Value</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>Base score</th>
                    <td class="u-cve-base-score">
                      {% set baseScore = cvssV3.baseScore %}
                      {% if baseScore <= 3.9 %}
                        <img src="https://assets.ubuntu.com/v1/03ac6f86-CVE-Priority-icon-Low.svg"
                             alt=""
                             class="p-heading-icon__img" />
                        <span>{{ cvssV3.baseScore | capitalize }} &middot; Low</span>
                      {% elif baseScore <= 6.9 %}
                        <img src="https://assets.ubuntu.com/v1/8010f9e0-CVE-Priority-icon-Medium.svg"
                             alt=""
                             class="p-heading-icon__img" />
                        <span>{{ cvssV3.baseScore | capitalize }} &middot; Medium</span>
                      {% elif baseScore <= 8.9 %}
                        <img src="https://assets.ubuntu.com/v1/3887354e-CVE-Priority-icon-High.svg"
                             alt=""
                             class="p-heading-icon__img" />
                        <span>{{ cvssV3.baseScore | capitalize }} &middot; High</span>
                      {% elif baseScore <= 10 %}
                        <img src="https://assets.ubuntu.com/v1/c96f27b9-CVE-Priority-icon-Critical.svg"
                             alt=""
                             class="p-heading-icon__img" />
                        <span>{{ cvssV3.baseScore | capitalize }} &middot; Critical</span>
                      {% endif %}
                    </td>
                  </tr>
                  <tr>
                    <th>Attack vector</th>
                    <td>{{ cvssV3.attackVector | capitalize }}</td>
                  </tr>
                  <tr>
                    <th>Attack complexity</th>
                    <td>{{ cvssV3.attackComplexity | capitalize }}</td>
                  </tr>
                  <tr>
                    <th>Privileges required</th>
                    <td>{{ cvssV3.privilegesRequired | capitalize }}</td>
                  </tr>
                  <tr>
                    <th>User interaction</th>
                    <td>{{ cvssV3.userInteraction | capitalize }}</td>
                  </tr>
                  <tr>
                    <th>Scope</th>
                    <td>{{ cvssV3.scope | capitalize }}</td>
                  </tr>
                  <tr>
                    <th>Confidentiality</th>
                    <td>{{ cvssV3.confidentialityImpact | capitalize }}</td>
                  </tr>
                  <tr>
                    <th>Integrity impact</th>
                    <td>{{ cvssV3.integrityImpact | capitalize }}</td>
                  </tr>
                  <tr>
                    <th>Availability impact</th>
                    <td>{{ cvssV3.availabilityImpact | capitalize }}</td>
                  </tr>
                  <tr>
                    <th>Vector</th>
                    <td>{{ cvssV3.vectorString }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        {% endif %}

        <div class="p-section section-heading" id="references">
          <h2>References</h2>
          <ul class="p-inline-list">
            <li class="p-inline-list__item">
              <a href="https://cve.mitre.org/cgi-bin/cvename.cgi?name={{ cve.id }}">MITRE</a>
            </li>
            <li class="p-inline-list__item">
              <a href="https://nvd.nist.gov/vuln/detail/{{ cve.id }}">NVD</a>
            </li>
            <li class="p-inline-list__item">
              <a href="https://launchpad.net/bugs/cve/{{ cve.id }}">Launchpad</a>
            </li>
            <li class="p-inline-list__item">
              <a href="https://security-tracker.debian.org/tracker/{{ cve.id }}">Debian</a>
            </li>
          </ul>

          {% if cve.notices %}
            <h3>Related Ubuntu Security Notices (USN)</h3>
            <ul class="p-list">
              {% for notice in cve.notices %}
                <ul class="p-inline-list u-responsive-realign">
                  <li class="p-inline-list__item">
                    <a href="https://usn.ubuntu.com/{{ notice.id }}">{{ notice.id }}</a>
                  </li>
                  <li class="p-inline-list__item">{{ notice.title }}</li>
                  <li class="p-inline-list__item u-text--muted">{{ notice.published }}</li>
                </ul>
              {% endfor %}
            </ul>
          {% endif %}

          {% if other_references %}
            <h3>Other references</h3>
            <ul class="p-list">
              {% for reference in other_references %}
                <li class="p-list__item">
                  <a href="{{ reference }}">{{ reference }}</a>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      </main>
    </div>
  </section>

  <!-- Linting is turned off as additional indentaion on view variables (maintainedCount, isOnlyUpstream) will break the rest of the script -->
  {# djlint: off #}
  <script>
    function handleHiddenReleasesSwitch() {
      const maintainedCount = {{ maintained_count | tojson | safe }};
      const isOnlyUpstream = {{ only_upstream | tojson | safe }};
      const maintainedReleasesSwitch = document.querySelector(".js-toggle-maintained");
      const hiddenCells = document.querySelectorAll(".js-unmaintained-cell");

      // When the CVE does not include statuses for maintained releases or if it only has upstream statuses, 
      // the switch is disabled and checked
      if (maintainedCount === 0 || isOnlyUpstream) {

        maintainedReleasesSwitch.checked = true;
        maintainedReleasesSwitch.setAttribute("disabled", true);
      
        toggleCells(hiddenCells);
      }

      // When the CVE includes only maintained releases, the switch is disabled
      if (hiddenCells.length === 0) {
        maintainedReleasesSwitch.setAttribute("disabled", true);
      }
      
      // Toggle hidden releases on switch click
      maintainedReleasesSwitch.addEventListener("click", () => {
        toggleCells(hiddenCells);
      });

      handleNotificationText(maintainedCount, isOnlyUpstream, hiddenCells, maintainedReleasesSwitch);
    };
    handleHiddenReleasesSwitch()

    function toggleCells(hiddenCells) {
      hiddenCells.forEach((cell) => {
          cell.classList.toggle("u-hide--cell");
      });
    }

    // Updates notification text and aria-describedby attribute for the switch
    // depending on if the releases are all maintained, unmaintained or only upstream
    function handleNotificationText(maintainedCount, isOnlyUpstream, hiddenCells, maintainedReleasesSwitch) {
      const notification = document.querySelector(".js-conditional-notification");
      const maintainedReleasesSwitchLabel = document.querySelector(".p-switch");
      
      if (maintainedCount < 1 && !isOnlyUpstream) {
        notification.classList.remove("u-hide");
        notification.querySelector(".p-notification__message").textContent = "No maintained releases are affected by this CVE.";
        notification.id = "disabled-switch-notification";
      }
            
      if (hiddenCells.length === 0 && !isOnlyUpstream) {
        maintainedReleasesSwitchLabel.classList.add("u-hide");
      }
      
      if (isOnlyUpstream) {
        notification.classList.remove("u-hide");
        notification.querySelector(".p-notification__message").textContent = "No information for any release.";
        notification.id = "disabled-switch-notification-only-upstream";
      }
      
      if (notification.id) {
        maintainedReleasesSwitch.setAttribute("aria-describedby", notification.id);
      }
    };

    function setUpDynamicSideNav() {
      const sections = Array.prototype.slice.call(
        document.querySelectorAll(".section-heading")
      );

      const navigationLinks = Array.prototype.slice.call(
        document.querySelectorAll(".highlight-link")
      );

      sections.forEach(function(section) {
        const observer = new IntersectionObserver(function(entry) {
          if (entry[0].isIntersecting) {
            const sectionId = entry[0].target.id;
            navigationLinks.forEach(function(link) {
              if (link.getAttribute("href") === `#${sectionId}`) {
                link.classList.add("is-active");
              } else {
                link.classList.remove("is-active");
              }
            });
          }
        }, {
          rootMargin: "-200px 0px -400px",
          threshold: 0.5,
        });

        observer.observe(section);
      });
    };
    setUpDynamicSideNav();
</script>
  {# djlint: on #}

{% endblock %}