Безопасное использование target="_blank"

Когда страница открыта с помощью target="_blank" - она имеет доступ к window.opener, это может быть использовано мошенниками

Пример:

1. Вы делитесь страницей на facebook
2. На ней присутствует код - window.opener.location = 'https://phishingwebsite'
3. Этот код перезагружает открытый таб на копию facebook, которая просит повторно авторизоваться

Вуаля - пользователь вводит учетные данные на фишинговой странице

Как избежать:

Реализуйте ссылки в таком виде (noreferrer - для старых браузеров)

<a href="/share" rel="noopener noreferrer" target="_blank">Перейти</a>

В таком случае у отрытой страницы не будет доступа к открывшему ее табу браузера

#seniorFrontHTML

#CSS #tips

Эффект складывания журнала на CSS

https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/

#js #jwt #tips

https://vuejsdevelopers.com/2019/04/15/api-security-jwt-json-web-tokens/

#js #deno #course

Полное руководство по управлению JWT во фронтенд-клиентах

Знакомимся с JWT и отвечаем на самые острые вопросы, включая его преимущества перед токенами сессии, противодействие атакам CSRF и XSS, а также продолжительное сохранение сессий при выходе пользователя.

https://nuancesprog.ru/p/8460

@nuancesprog #статьи #GraphQL

#CSS #tips

CSS свойство white-space

Оно говорит браузеру, как работать с множественными пробелами и переносами строк.

Пример:
<p>I have multiple spaces
and a line break</p>

white-space: normal
Строки будут переноситься, если в строке не будет хватать места

white-space: nowrap
Повторяющиеся пробелы игнорируются, переводы строк не используются.

white-space: pre
Повторяющиеся пробелы и переводы строк выводятся так же как и в исходной разметке, естественные переводы строк не работают.

white-space: pre-line
Повторяющиеся пробелы игнорируются, переводы строк обрабатываются.

white-space: pre-wrap
Обрабатываются повторяющиеся пробелы и явные переводы строк, а также естественные переводы строк.

#CSS #tips

CSS-анимация: основные концепты и многое другое

https://dev.to/petrepan_/css-animation-the-basic-concept-and-more-2aki

#js #tips

Коллекции JavaScript – Set, Map, WeakMap и WeakSet

Обычные массивы уже всем надоели - давайте посмотрим на свежее пополнение в JavaScript: сеты, мапы и их "слабые" версии.

Читать: https://prglb.ru/57wxq

В статье описан интерфейс каждой коллекции и приведены полезные кейсы использования.

#javascript #core

Как улучшить производительность сайта с помощью мониторинга реальных пользователей

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

https://nuancesprog.ru/p/8508

@nuancesprog #статьи #JavaScript

#js #tips

Управление памятью в JavaScript, утечки памяти и как с ними справляться

Перевод третьей статьи из цикла How JavaScript works - на этот раз про утечки памяти, о которых мы всегда забываем.

Читать: https://prglb.ru/4s21z

#vue #book #english

Building Progressive Web Applications with Vue.js: Reliable, Fast, and Engaging Apps with Vue.js

Автор: Carlos Rojas
Год издания: 2020

Скачать книгу

#vue #english

В чём разница между CSS Grid и Flexbox

Если коротко, CSS Grid — для разметки, Flexbox — для компонентов. Если наглядно, то посетите замечательный сайт, где на пальцах объясняются главные отличия:

https://tprg.ru/NXsD

Почувствуйте себя официантом, расставляющим тарелки, но перед этим обязательно покушайте: от такого интерактива текут слюнки.

#фронтенд #css

ES6 - шаблонные строки

Шаблонные строки заключены в обратные кавычки () .
Они могут содержать подстановки, обозначаемые знаком доллара и фигурными скобками (${выражение}).

Возможности:

1. Многострочность

console.log(`string text line 1
string text line 2`);
// "string text line 1
//  string text line 2"

2. Интерполяция выражений

 a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."

3. Сырые строки

 tag(strings) {
  return strings.raw[0];
}

tag`string text line 1 \\n string text line 2`;
// выводит "string text line 1 \\n string text line 2",
// включая 'n' и два символа '\'

4. Вложенные шаблоны

 classes = `header ${ isLargeScreen() ? '' :
`icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;