Introducing masonry-gridlanes-wc — нативный веб-компонент для masonry раскладки. Скалк Нитлинг создал веб-компонент для masonry-раскладки в соответствии с display: grid-lanes из спецификации CSS Grid Level 3. В браузерах с нативной поддержкой grid lanes компонент полностью уступает место браузеру. В остальных случаях используется JavaScript-фолбек для раскладки по колонкам и строкам с настраиваемыми отступами и шириной колонок. #webcomponents #layout

https://schalkneethling.com/posts/introducing-masonry-gridlanes-wc-a-native-first-masonry-web-component/

Минутка нашего:

бюробукв

Плагин Figma

AI Content Generator Rewre генерирует текст для макетов с помощью GPT-4. Создает текст нужной длины под конкретное поле

Ссылка

#materials_nd

Шрифт «BERLIN» by wir.berlin

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



#latin #cyrillic #free

Шрифт Atelier

💾 Скачать и использовать
https://disk.yandex.ru/d/7RSUWXXRwpRpPw

🔎 Посмотреть описание
https://creativemarket.com/imoodev/92076650-Atelier-Clean-Modern-Display-Font

#font #paid #latin

🧰 3D Illustration Library — набор из более чем 60 стильных 3д иконок, выполненных в едином стиле

Dezzigners

🛠 Fitty - это простая JavaScript-библиотека, которая изменяет размер шрифта текста, чтобы он помещался в контейнер фиксированной ширины. Она работает со всеми стандартными веб-шрифтами, увеличивая или уменьшая их размер, чтобы они оптимально занимали доступное пространство без разрывов строк - идеально подходит для заголовков и других рубрик.

🌍 Сайт

Daily Coding #инструменты #JavaScript

CSP, CORS и security headers — что фронтендер обязан понимать глубже

Принято считать, что безопасность — это зона бэкенда.
Фронтенд «просто отправляет запросы и рендерит UI».

На практике фронтенд напрямую влияет на то,
будет приложение безопасным или нет.

CORS — это не про «разрешить запрос»

CORS часто воспринимают как настройку:
«чтобы запросы не падали из браузера».

Но по сути это механизм, который говорит:
кто имеет право читать ответ.

Важно понимать:

👉 сервер может обработать запрос
👉 но браузер может не дать прочитать ответ

Именно поэтому:

👉 Access-Control-Allow-Origin: * — не «фикс», а потенциальная дыра
👉 credentials + wildcard — запрещённая комбинация

CORS — это про контроль доступа, а не про обход ошибок.
CSP — ваш последний рубеж

Content Security Policy — это защита от XSS,
даже если у вас уже есть уязвимость.

Пример:

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

Что это даёт:

👉 запрещает выполнение inline-скриптов
👉 блокирует загрузку скриптов с чужих доменов
👉 режет целый класс атак

Но есть нюанс.

Если CSP выглядит так:

script-src * 'unsafe-inline' 'unsafe-eval'

Это не защита. Это иллюзия.
Security headers, которые реально важны

👉 X-Content-Type-Options: nosniff
Браузер не пытается угадать тип файла. Меньше атак через подмену.

👉 X-Frame-Options / frame-ancestors
Защита от clickjacking.

👉 Strict-Transport-Security (HSTS)
Принудительный HTTPS. Без вариантов.

👉 Referrer-Policy
Контроль того, какие данные уходят при переходах.

Где фронтендер влияет напрямую

👉 какие скрипты подключаются
👉 есть ли inline JS
👉 используются ли eval-подобные вещи
👉 как работают сторонние виджеты
👉 как обрабатываются пользовательские данные

Можно иметь идеальный бэкенд и сломать всё на уровне UI.
Частая ошибка

«Мы включили CSP — значит всё ок».

Но:

👉 нет nonce / hash
👉 разрешены любые источники
👉 подключены сторонние скрипты без контроля

В итоге защита есть только на бумаге.
Главная мысль

CSP, CORS и заголовки — это не чекбокс в настройках.
Это часть архитектуры.

Если фронтенд не понимает, как они работают,
безопасность становится случайностью.

Приложение магазина дронов

Категория: #магазин
Язык: #en.