Category : javascript

javascript
Обходим CSP nonce через дисковый кеш браузера

Суть атакиДанное исследование описывает способ обхода Content Security Policy на основе nonce-значений в реалистичном сценарии. Автор создал небольшой таск на XSS для демонстрации уязвимости и подробно разбирает все этапы эксплуатации.Если вас интересует только решение, то краткая суть такова: можно добиться повторного использования nonce-значения через bfcache с откатом на дисковый кеш после его утечки, а затем заставить HTML-инъекцию быть загруженной заново путем её изменения и запроса без ке…

  • пятница, 11 июля 2025 г. в 00:00:05
javascript
ЭКСПЕРТЫ ШОКИРОВАНЫ: язык программирования на основе кликбейтных заголовков

Кликбейтные заголовки, давайте признаемся, надоели всем. Сейчас они встречаются даже на Хабре. Программист Линус Ли, судя по всему, испытывал те же чувства и решил действовать по принципу «не можешь победить — доведи до крайности». В результате он создал Tabloid — полноценный язык программирования, где весь код пишется в стиле сенсационных заголовков. Представьте язык, где вместо привычного function hello() вы пишете DISCOVER HOW TO HELLO WITH (англ. «узнайте, как сделать... с помощью»), а вмес…

  • пятница, 11 июля 2025 г. в 00:00:04
javascript
Быстрый старт: пишем фреймворк для фронтенда

Привет, Хабр. Меня зовут Марат Исаев. В этой статье кратко рассмотрю устройство самописного микрофреймворка и его применение для написания приложения‑планировщика, чтобы вы могли написать свой фреймворк, для своих приложений. Подчеркну: статья образовательная и не охватывает enterprise‑разработку.Чтобы мой рассказ был более предметным, сразу покажу код фреймворка и приложения. Можете скопировать его прямо в консоль, запустить и по мере чтения статьи тестировать, разбираться и исследовать.Код фр…

  • четверг, 10 июля 2025 г. в 00:00:09
javascript
Слайдер с бесконечной плавной прокруткой на JavaScript

В этой статье разберем компонент, представляющий собой бесконечный плавный слайдер с автоматической прокруткой, а также добавим его замедление при наведении. Похожие блоки часто используются для информационной ленты логотипов, фотогалерии и других подобных визуальных компонентов.Приблизительный результат следующий (только без дерганий контента):Бесконечная лентаРазметкаПо HTML все достаточно просто. Мы имеем общий статичный родительский компонент, внутри которого лежит контейнер, который мы и б…

  • среда, 9 июля 2025 г. в 00:00:06
javascript
Сотворение мира за 20 минут на JavaScript, или минималистичная модель эволюции

Впервые про моделирование эволюции я прочитал в 13 лет в статье «Жить и умереть в компьютере» (Техника — Молодежи, №5 1993 год). Она произвела на меня столь неизгладимое впечатление, что я тут же загорелся идеей создать что-то подобное.Однако никак не удавалось проработать законы мира. Как организмы будут «смотреть» на окружающий мир? Как общаться? Как атаковать? Как кушать друг друга? Наконец, как будет устроен их «мозг»? Реализовать виртуальную машину, как в статье из журнала, или использоват…

  • среда, 9 июля 2025 г. в 00:00:05
javascript
Организация селекторов для тестирования

Всем привет, я являюсь тимлидом команды Frontend-разработки в компании Firecode.В решениях, которые мы разрабатываем, часто используются E2E-тесты, поэтому я решил поделиться одной из самых используемых практик внутри наших проектов - дата-селекторы.Зачастую обычные веб-приложения не покрывают E2E тестами, однако, когда разговор заходит об административных панелях, формах биллинга и разнообразных конструкторах, то данная потребность быстро возникает. В этой статье мы рассмотрим, как правильно о…

  • среда, 9 июля 2025 г. в 00:00:04
javascript
Введение в WebRTC

WebRTC - это технология, которая позволяет браузерам и мобильным приложениям обмениваться аудио и видео в реальном времени без необходимости использования промежуточных серверов. Это делает WebRTC идеальным выбором для приложений, которым необходим функционал видеозвонков, стриминга, и аудиовызовов.По сути, WebRTC состоит из двух основных частей:Методы захвата видео и аудио потоков;Методы передачи этих потоков между клиентами;Разберем эти части подробнее.Захват потоковВ целом про аудио- и видео…

  • вторник, 8 июля 2025 г. в 00:00:05
javascript
Нюансы кроссплатформенной разработки на Vue и React

Этот документ — не просто список, а выжимка боли, шишек и неожиданных открытий, с которыми сталкивается почти каждый фронтендер. Неважно, Vue ты выбрал или React, если твое приложение должно работать в браузере на айфоне пятилетней давности — добро пожаловать в клуб. Здесь будет всё: от странностей с Safari до неожиданных проблем с синтетическими событиями. Нюансы мобильных браузеров и PWAiOS Safari не поддерживает Notification API без установки PWAПроблема: На iOS ты не можешь просто вызвать n…

  • вторник, 8 июля 2025 г. в 00:00:04
javascript
Магия чисел в System Design: эти формулы спасут вас от банкротства и помогут оптимизировать вашу си…

При решении реальных задач по System Design или при прохождении собеседования, обязательным этапом является расчет нагрузки и стоимости на вашу IT-Систему. Давайте разберемся что это за этап и почему он так важен?Зачем нужен расчет нагрузки?1. Определение требований к инфраструктуреСколько серверов, ядер CPU, оперативной памяти, дискового пространства и пропускной способности сети потребуется.Пример:Если система должна обрабатывать 10000 RPS, а один сервер выдерживает 1000 RPS, то нужно 10+ сер…

  • понедельник, 7 июля 2025 г. в 00:00:05