Александр Маджугин

Важные данные обычно никогда не хранятся на клиенте, они передаются, используются и удаляются.

Есть ли какие-то ситуации, когда использование httpOnly сессионной куки нас защищает, а вот использование localStorage и sessionStorage уязвимо?

Если есть компроментация клиента, то никак не защищает. Единственное место, это где JS вообще в принципе не используется, т.е. клиенты с отключенным JS. Ну это как в рыцарских доспехах ходить по улице. Неудобно, но вроде как защищает от меча. Только с мечом уже давно не ходят, все больше с автоматами.

Теперь про токены. Токены в теории лучше всего держать не в localStorage, а в sessionStorage. Это хранилище переживает перезагрузки страниц и не расшарено между табами. Т.е. при открытии того же самого адреса в новом табе будет созданая новая сессия. Хранилище очищается при закрытии браузера и таба. Но это жутко неудобно, каждый раз логиниться. Поэтому здравая логика говорит об использовании localStorage, хотя если вы совсем отбитый, то можете хранить токен в сессионой куке.

Если вы прочли те статьи внимательно, то можно понять, что преимущества сессионных кук нивелируются неудобством их использования.
JWT Токены предназначены для микросервисной архитектуры. Т.е. у вас есть некоторый центр аутентификации, который выдает вам токен. Токен этот подписан относительно стойкой криптографией и постоянно ротируется.
Этот токен передается другим микросервисам, которые могут его верифицировать через публичные ключи (JWKS).
Т.е. если вы хотите, вы можете строить свои сервисы так, что они доверяют не только вашему центру аутентификации, но и гуглу с амазоном через OpenID. Есть ситуации, например когда вы хотите разрешить доступ к сервису сотрудникам другой компании. Например, когда такая компания огромна (десятки тысяч сотрудников). Они аутенфицируются у себя, а вы проверяете, что токен выпущен сервисом данной компании. Это не так сложно реализовать.
Реализация авторизации лежит на плечах каждого микросервиса и напрямую завязана на бизнес-логику. Как правило это некий внутренний микросервис, который интегрирован c middleware микросервиса.

node.isConnected

Найти все элементы div и перебирая каждый запрашивать атрибут id, сравнивая его значение с желаемым.

То что браузеры позволяют делать несколько элементов с одинаковым id не значит что это правильно. Идентификатор по определению должен быть уникальным.

Используйте другие атрибуты для этого

Есть строки, а есть числа. Это не одно и то же и работает по-разному.

Почитать тут:

1. Типы данных
   
2. про Числа и parseInt()
   
3. Преобразование типов
   

А если не читать?
Чтобы не читать, а разбираться с проблемой на месте, можно смотреть, что именно происходит.
Повсюду навставлять console.log(), через который выводить значения и типы. Или дебаггером в Инструментах разработчика в браузере останавливать в каждой строчке и смотреть в какой переменной что лежит.

Ключевые вопросы:

• что возвращает prompt() – какой тип
  
• что происходит если к строке прибавить строку "тос" + "тер"
  
• что будет если в строке лежит число "2" + "2"
  
• чем отличается от деления "2" / "2"
  
  

Поздравляю, вы на верном пути!

p.s. на чём летаешь? )

работать с dom напрямую плохая практика

Не всегда. Зависит от задачи.

Пусть компонент табов принимает в качестве параметров массив значений, описывающих табы и значение, обозначающее активный таб:

props: [ 'items', 'value' ],

В данные компонента положим стили для элемента, изображающего подчёркивание активного таба:

data: () => ({
  sliderStyles: null,
}),

Создадим сами табы и элемент подчёркивания:

<ul class="tabs">
  <li
    v-for="n in items"
    :key="n.value"
    @click="$emit('input', n.value)"
    class="tabs-item"
  >{{ n.text }}</li>
</ul>
<div
  class="tabs-slider"
  :style="sliderStyles"
></div>

Элементу подчёркивания (.tabs-slider) зададим абсолютное позиционирование и transition.

Настроим слежение за текущим значением - узнаём его индекс среди доступных для выбора значений, записываем в стили элемента подчёркивания позицию и размер таба с соответствующим индексом:

mounted() {
  this.$watch(
    'value',
    value => {
      const index = this.items.findIndex(n => n.value === value);
      const el = this.$el.querySelectorAll('.tabs-item')[index];
      this.sliderStyles = el
        ? {
            left: `${el.offsetLeft}px`,
            width: `${el.offsetWidth}px`,
          }
        : null;
    },
    {
      immediate: true,
    }
  );
},

https://jsfiddle.net/vsr5tLue/

У тебя 1 картинка только весит 2мб: https://sto-tonn.com/wp-content/uploads/sto-tonn.jpg
Открой Network и смотри что грузит долго.

Так же возможно в JS что-то. Частые ошибки:
В цикле вешают куча обработчиков, что-то с элементами производят и в большом объёме