Скринридер — это специальная программа, которая озвучивает всё, что происходит на экране и чаще всего используется незрячими пользователями.

Пример работы скринридера в видео

Краткий итог:

— NodeJS - это зрелая платформа с обширной экосистемой и большим сообществом
— Deno - альтернатива NodeJS с улучшенной безопасностью, поддержкой TypeScript и другими плюшками
— Bun - новая и перспективная платформа с упором на скорость и интеграцию различных инструментов

Представим, что вы находитесь на каком-нибудь some-bank.com и переходите на другой сайт с вредоносным кодом без noopener. Тогда новая вкладка может получить доступ к pathname откуда вы перешли и к API навигации по старой вкладке, и, уже абсолютно невидимо для вас, средиректить старую вкладку с some-bank.com на some-bauk.com (подмена символа в слове bank). Вернувшись на старую вкладку, вы увидите тот же сайт, но проблема в том, что он уже подменён на фишинг-страницу. Входите через эту страницу в личный кабинет банка и все данные улетают злоумышленникам.

Такая атака, кстати, называется tabnabbing

Referer: https://some-bank.com/login

Если кратко:

- noopener — блокирует доступ на новой вкладке к информации и навигации на старой
- noreferrer — noopener + удаляет заголовок Referrer

Основное отличие от ручного способа заключается лишь в том, что все эти процессы выполняются не на компьютерах разработчиков, а где-то там далеко на серверах GitHub или типа того, всё зависит от архитектуры вашей системы контроля версий.

Если коротко:
CI — процессы, связанные с интеграцией кода в репозиторий
CD — процессы, связанные с доставкой готовой сборки на окружение

Если вы думали, что адаптивная верстка для всех браузеров — это сложно, попробуйте сверстать email, который одинаково выглядит в Gmail, Outlook, Yahoo и десятках других почтовых клиентов...

@font-face { src: url(...) }
background-image: url(...)
list-style-image: url(...)

<form action="https://.../steal.php" method="get">

Но самое главное, что всё реально развивается и стало лучше!

const user = { name: "Денис", age: 23 };

const proxyUser = new Proxy(user, {
  get(target, key) {
    return key in target ? target[key] : "Не найдено";
  }
});

proxyUser.name // "Денис"
proxyUser.city // "Не найдено"

const reactive = (obj, callback) => {
  return new Proxy(obj, {
    set(target, key, value) {
      target[key] = value; // обновляем значение
      callback(key, value); // вызываем реакцию
      return true;
    }
  });
};

// Используем:
const state = reactive({ count: 0 }, (key, value) => {
  console.log(`Свойство "${key}" изменилось:`, value);
});

state.count = 1; // Лог: "Свойство 'count' изменилось: 1"
state.count = 5; // Лог: "Свойство 'count' изменилось: 5"

Прикрутить сюда типы и рекурсивный вызов функции reactive на каждый вложенный объект и у вас почти получится свой vue.js 🗿

Если кратко:

— Proxy — обёртка, которая позволяет переопределить реакцию на операцию для объекта
— Переопределение поведения происходит при помощи "ловушек"

При помощи XSS зачастую можно потерять cookies, localStorage, а также получить подмену содержимого страницы (например, на страницу встроится какая-нибудь фишинговая форма)

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

Итог: с вашим токеном можно украсть деньги, данные или сделать что-угодно от вашего имени. И это лишь один из тысячи примеров

Content-Security-Policy: default-src 'self' https://trusted.ru;

Эта запись означает, что ресурсы можно загружать только с домена приложения либо с trusted.ru

unsafe-inline — это директива CSP, которая позволяет браузеру выполнять инлайн-скрипты, вставленные в дом на лету. Это может быть удобно, но сильно ослабляет защиту сайта в целом.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline';

Ну и так же помните, что фреймворки не защищают вас полностью

<div>Результаты поиска: <?php echo $_GET['query']; ?></div>

https://a.com/search?query=<script>alert('Я украл твою почку!')</script>

Звучит как ужасная продажная реклама, но это, к сожалению, не так. Очень жаль))

Пока этим приложением у меня нет времени заниматься, оно в подвешенном состоянии, но когда нибудь оно будет сиять

Не обязательно всё время быть сильными. Иногда достаточно просто жить дальше, держаться за принципы и не давать обстоятельствам нас сломать — и этого уже достаточно🥰