Использование излучателей в проектах
Хорошо-хорошо, достаточно кода класса; давайте посмотрим, как со всем этим работать. Для создания излучателя необходимо создать экземпляр класса излучателя так:
Теперь вызовите функцию Create излучателя, чтобы поместить излучатель в центр трехмерного мира. Также задайте используемый тип излучателя.
Emitter.Create(pDevice, \ &D3DXVECTOR3(0.0f, 0.0f, 0.0f), \ EMITTER_CLOUD);
После того как вы создали излучатель, можно начинать добавлять в него частицы с помощью функции Add, или можете вызвать функцию Update, которая добавит частицы за вас.
Emitter.Add(PARTICLE_SMOKE, \ &D3DXVECTOR3(0.0f, 0.0f, 0.0f), \ 10.0f, 0xFFFFFFFF, 2000, \ &D3DXVECTOR3(0.0f, 1.0f, 0.0f));
После того как вы добавили частицы в сцену, необходимо обновить их с помощью функции Update и визуализировать частицы.
Это является, в каком то роде, полупопыткой показать, как использовать классы частиц, но я рекомендую посмотреть демонстрационные программы, располо-
женные на компакт-диске книги. Эти демонстрационные программы намного лучше показывают, что вы можете делать с помощью частиц в своих проектах.
Создание движков частиц в вершинных шейдерах
Хорошо, вы знали, что кто-то должен был создать их! На самом деле существует способ создать движок частиц, который бы полностью выполнялся внутри вершинного шейдера. Вы можете найти этот вершинный шейдер на сайте Nvidia http://developer.nvidia.com/view.asp?IO=Particle_System.
В основе работы этого вершинного шейдера лежит то, что вы определяете структуру вершин, содержащую скорость частицы; используя эту скорость, вы определяете, на сколько переместить частицу, основываясь на прошедшем времени. Для визуализации частицы используются точечные спрайты, т. е. вы можете представить каждую частицу одной вершиной (находящейся в буфере вершин).
Я не хочу изобретать колесо, но при помощи информации, полученной в этой главе, вы должны понять, что происходит в вершинном шейдере частиц. Для каждой частицы, которую получает для визуализации шейдер (точечный спрайт), вычисляются положение, цвет и размер. Эти вычисления основываются на переменной прошедшего времени, устанавливаемой через константы шейдера. Вы уже видели, как перемещать частицы, основываясь на их скорости — это простое умножение вектора скорости на величину прошедшего времени. То же самое происходит для цвета и размера — они вычисляются умножением соответствующих величин на количество прошедшего времени.
Посмотрите демонстрационные программы
На компакт-диске этой книги вы обнаружите три проекта, которые я создал для иллюстрации управления частицами. Эти проекты содержат код для добавления, удаления, визуализации частиц разнообразных типов, который вы можете использовать в собственных проектах для получения привлекательных эффектов частиц.
Результат выполнения всех трех программ одинаков (см. рис 12.8). Вертолет пролетает над лесом и группой людей. В этой демонстрационной программе используются частицы: пучки дыма, выдуваемые с земли перед вертолетом, деревья и люди. На самом деле используются три различных типа деревьев и два типа людей. Излучатель частиц имеет несколько дополнительных функций, которые добавляют частицы дыма и изменяют внешний вид людей во время выполнения демонстрационной программы. Как только вертолет пролетает над человеком, частица, представляющая человека, меняет свой тип. Когда вертолет отлетает от
человека, частица опять меняется на другую. Посмотрите демонстрационную программу, чтобы понять, что я имею ввиду.
Как вы можете видеть, использование частиц зависит от проекта. То, что подходит для одного проекта, может не сработать для другого. По этой причине в этой главе было дано не так много, за исключением основной теории и основных знаний. Небольшое пожелание: убедитесь, что посмотрели демонстрационные программы, содержащиеся на компакт-диске.
Рис. 12.8. Apache пикирует над головами любителей деревьев
Программы на компакт диске
В директории главы 12 компакт-диска книги, вы обнаружите три проекта, которые иллюстрируют использование трех методов рисования частиц, показанных в этой главе. Этими проектами являются:
• Particles. Этот проект иллюстрирует рисование частиц, использующих квадраты, основанное на первой рассмотренной в этой главе технологии. Он расположен в \BookCode\Chap12\Particles.
• ParticlesPS. Этот проект иллюстрирует использование точечных спрайтов для рисования частиц. Он расположен в \BookCode\Chap12\ParticlesPS.
• ParticlesVS. Этот последний проект иллюстрирует использование вершинного шейдера для визуализации частиц. Он расположен в \BookCode\Chap12\ParticlesVS.
Все про Node.js: зачем писать бэкенд на JavaScript и сколько за это платят
Вы читаете обновленную и улучшенную версию нашей старой статьи.
Что такое Node.js и где применяется эта технология
Node.js — среда выполнения кода JavaScript вне браузера, которая позволяет писать серверный код для веб-страниц и веб-приложений, а также для программ командной строки. С помощью Node.js реализуется парадигма «JavaScript для всего». Она предполагает использование одного языка программирования для разработки веб-приложений вместо применения разных языков для работы над фронтендом и бэкендом.
Node.js — не отдельный язык программирования, а платформа для использования JavaScript на стороне сервера. Если говорить о языке, то как для фронтенда, так и для бэкенда используется один и тот же JavaScript. Разница только в наборе API, которые используют фронтендеры и бэкендеры.
Браузерный JavaScript использует Web API, которые обеспечивают доступ к DOM и пользовательскому интерфейсу страниц и веб-приложений. Серверный JavaScript использует API, обеспечивающие доступ к файловой системе приложений, http-запросам, потокам.
То есть Node.js — это технология для использования JS на бэкенде. С особенностями и перспективами развития языка JavaScript можно ознакомиться в соответствующей статье, а здесь речь идёт об одной из технологий данного языка.
Экскурс в историю: с 2009 до 2019
Node.js была представлена в 2009 году — её создал инженер Райан Дал, а спонсором разработки выступила компания Joyent. Она известна поддержкой опенсорсных проектов, включая Node.js, Illumos, SmartOS.
Райан Дал использовал для создания Node.js движок V8. Платформа реализована с низкоуровневой неблокирующей моделью ввода/вывода, которая построена на событийно-ориентированной модели. В конце 2014 года инженер Фёдор Индутный, который входил в основную команду разработчиков платформы, создал популярный форк Node.js — io.js. Форк появился из-за недовольства разработчиков политикой компании Joyent.
Платформа io.js превосходила Node.js в производительности, но создатели форка уже в 2015 году решили воссоединиться с Node.js, чтобы влиять на развитие основной платформы. В настоящее время разработкой формально руководит Node.js Foundation.
Сфера применения: где используют Node.js
Node.js применяется для бэкенд-разработки на JavaScript. И если в браузере JavaScript тотально доминирует, и конкурентов этого языка на фронтенде не видно даже на горизонте, то в бэкенд-разработке ситуация другая. Здесь JS конкурирует с PHP, Python и другими языками.
Выбор серверного JavaScript для бэкенда обеспечивает проекту ряд преимуществ:
- Рост эффективности разработки благодаря использованию одного языка для фронт- и бэкенда и возможности переиспользования кода
- Возможность использовать npm — самый большой пакетный менеджер
- Более простой по сравнению с другими стеками поиск исполнителей, так как JavaScript входит в число самых популярных языков программирования.
Node.js хорошо подходит для разработки RTA — веб-приложений, реагирующих на действия пользователя в режиме реального времени. Например, это может быть онлайн-редактор типа Google Docs, который позволяет работать над одним документом нескольким пользователям одновременно.
Node.js vs PHP и Python
Node.js уступает PHP в популярности. Достаточно вспомнить, что на PHP написаны самые популярные системы управления контентом, включая WordPress, Joomla!, Drupal. Только на WordPress работает около трети всех сайтов в интернете.
Инфраструктура PHP скорее превосходит инфраструктуру Node.js. Например, разработчики на PHP могут выбирать между несколькими достойными веб-фреймворками.
Python считается одним из лучших языков для изучения программирования. Но главная разница между Python и Node.js заключается в сферах применения. Python более универсальный: его используют как в веб-разработке, так и в Data Science, Machine Learning и других сферах. Node.js скорее «заточен» под веб-разработку. Благодаря Electron эта технология также применяется для разработки десктопных приложений.
Тем не менее инфраструктура Node.js зрелая, и у разработчиков есть качественные и удобные инструменты. Например, выше упоминались пакетный менеджер npm и фреймворк Electron для создания десктопных приложений. Также стоит упомянуть фреймворки Express и Nest.js, предназначенные для разработки веб-приложений.
На Хекслете есть большая профессия на Node.js-программиста с нуля: В процессе обучения вы получите фундаментальные знания: научитесь программировать на JavaScript, использовать современные инструменты для создания бэкенд-приложений, включая Express.js, Koa, PostgreSQL. Первые курсы в профессии доступны бесплатно. Регистрируйтесь и начинайте учиться
Зарплата Node.js-разработчика: сколько платят и есть ли вакансии
По данным сервиса «Хабр Карьера» на первую половину 2022 года, медианная зарплата JavaScript разработчика составляет 150 тыс. рублей в месяц. Нужно понимать, что в эту статистику входят зарплаты как фронтенд-, так и бэкенд-разработчиков на JS. Разработчики на Python зарабатывают 140 тыс. рублей в месяц, а PHP-программисты — тоже порядка 150 000 рублей в месяц.
В августе 2022 года при запросе Node.JS в сервисе HeadHunter выдавалось 1548 вакансий на территории России. Из них 533 вакансии предлагали зарплату от 100 тыс. рублей до 200 тыс. рублей. Еще 316 вакансий — с зарплатой до 300 тыс. рублей, 134 вакансии — до 400 тыс. рублей, 45 — до 500 тыс. рублей и 19 вакансий — с заработной платой более 500 тыс. рублей в месяц.
Игорь Камышев: судя по тенденциям, Node.js будет становиться только популярнее
Игорь Камышев, разработчик веб-приложений и техлид в «Самокате». Разрабатывает экосистему библиотек для Node.js Solid Soda. Автор телеграм-канала kamyshev.code
— Почему стоит изучать Node.js?
— Node.js — необычная технология. Современная экосистема JavaScript создавалась непрограммистами, из-за этого в ней очень много свежих и необычных идей. Начать писать приложения на Node.js проще, чем на Java, Ruby или PHP. Плюс, это достаточно зрелая платформа, многие проблемы уже решены, а лучшие подходы известны и описаны.
— Какие перспективы у бэкенда на JavaScript по сравнению с другими языками и технологиями?
— Любой бэкенд может быть написан на любом языке. Вопрос только в скорости разработки и надежности этого решения. Приложения для Node.js можно быстро писать, но для обеспечения надежности нужно постараться. Важно понимать, что JavaScript — это язык со слабой динамической типизацией, чтобы это компенсировать нужно заранее продумать архитектуру приложения и потратить больше времени на написание тестов. С другой стороны, можно взять TypeScript и получить гарантию типобезопасности (не полную, конечно, но лучше чем ничего).
На мой взгляд, Node.js подойдет для очень широкого класса бэкендов. Начиная от интернет-магазинов и заканчивая образовательными сервисами.
— Будет ли бэкенд на JS востребован в будущем?
— Судя по тенденциям роста, Node.js будет становиться только популярнее. Сложно оценить, когда этот рост прекратится, но сейчас — это факт.
— Сколько времени нужно учиться бэкенд-разработке на JS с нуля до джуниора?
— Node.js — супер-минималистичная платформа. По сути, чтобы разобраться с ней, достаточно выучить JavaScript и прочитать 10 страниц документации Node.js. Я полагаю, если вы никогда прежде не сталкивались с программированием, то за 5-6 месяцев можно освоить все что необходимо и стать полноправным членом команды.
Андрей Мелихов: мне кажется, рынок сейчас остро нуждается в грамотных сильных разработчиках с бэкграундом из других языков
Андрей Мелихов, программист-эксперт в компании «Яндекс.Деньги», ведущий подкаста «Девшахта»
— Почему стоит изучать Node.js и обратить внимание на бэкенд-JS?
— Как бы не хотели многие, сайты всё ещё требуют серверного рендеринга. Это не только SEO-задачи, но и мобильный трафик. Если мы не хотим усложнять себе жизнь и используем один и тот же код на сервере и клиенте, то наш практически единственный выбор — это JavaScript. Конечно, есть и различная экзотика, компилируемая в JS, но, за исключением TypeScript, всё это пока достаточно сложно воспринимать серьёзно. Итак, нам нужен JS на сервере, и тут основной игрок — Node.js. Да, стоит напомнить, что есть и другие решения, позволяющие исполнять JS за пределами браузера, но на фоне Node.js их доля незаметна.
Это первое. Второе — в какой-то момент приходит необходимость работать с данными, хранимыми на сервере. Мне кажется, что любой веб-разработчик хотя бы на базовом уровне должен понимать, как это всё устроено. И здесь Node.js отличный выбор, он позволяет создать полноценный веб-сервер с минимальным порогом вхождения.
Третье. Несмотря на все насмешки и недоверие, Node.js дорос до состояния практически взрослого инструмента и продолжает развиваться. Сегодня мы наконец-то имеем приличный инструментарий, статическую типизацию и даже один хороший фреймворк (Nest). Можно смело рекомендовать Node.js в качестве серверного решения для больших долгоживущих нагруженных проектов.
— Какие перспективы у языка и технологии?
— Если говорить именно о языке, то мы видим, что JS постепенно становится целью сборки, а не языком, на котором пишут код. И в случае Node.js главная причина тут TypeScript, так как в отличие от браузера нам не нужно транспилировать JS в JS — мы полностью контролируем среду исполнения. Однако те возможности, которые нам даёт TypeScript, гораздо больше, чем просто синтаксический сахар.
И если взять современные инструменты, такие как Nest, то они эти возможности активно используют. Современный проект на Node.js — это статическая типизация, Dependency Injection, паттерны проектирования. Возможно, за этим теряется простота и лёгкость JavaScript, но вместо этого приходит надёжность и упрощение разработки и поддержки в больших проектах.
— Какие перспективы у разработчиков на Node.js? Будут ли они востребованы, какие задачи будут решать?
— Неожиданно, но JavaScript стал языком для всего. Сервер, браузер, мобильные телефоны, десктопные приложения, IoT — везде JavaScript неплохо себя чувствует. Совершенно новым направлением оказались AWS-лямбды (serverless), в которых JavaScript тоже отлично себя проявил. Так что да, разработчики будут востребованы. Но если говорить о сервере, то мне кажется, рынок сейчас остро нуждается в грамотных сильных разработчиках с бэкграундом из других языков.
— Дайте совет новичкам: с чего начать, что изучать, на что обратить внимание?
— Начать стоит с изучения UNIX и в целом основ работы компьютерных сетей. После этого можно попробовать написать простое приложение на Node.js, лучше без фреймворков (в том числе без Express). Поняв, что такое TCP/UDP и HTTP/HTTPS, можно уже попробовать написать полноценный бэкенд на Express, отдающий данные по AJAX и шаблонизирующий HTML. Также, конечно, придётся разобраться с Nginx или HAProxy, понять, что такое балансировка. Очень неплохо хотя бы на минимальном уровне понять, что такое Docker и зачем он нужен.
Следующим шагом я бы порекомендовал погрузиться в TypeScript и попробовать Nest. Неплохим вариантом является изучение связки Angular + Nest, так как Nest создан под сильным влиянием Angular и реализует сходные концепции.
Строго рекомендую книгу Node.js Design Patterns от Mario Casciaro.
Алексей Золотых: на рынке труда не хватает разработчиков на Node.js
Алексей Золотых, тимлид в Infobib, соорганизатор конференции HolyJS
— По вашему мнению, почему стоит изучать Node.js?
— В последнее время Node.js становится все более взрослой технологией. Появляются серьезные инструменты для отладки, трейсинга и выявления других проблем. В сообществе накапливается экспертиза. Движение в сторону микросервисов нивелирует недостатки в отсутствие статической типизации путем уменьшения сложности. И да, для больших проектов у нас все еще есть TypeScript.
Думаю, что у Node.js точно есть будущее, и точно есть куда расти. Вместе с тем порог входа очень низкий. Это позволяет не думать про технологии и сложность, а просто сосредоточиться на продукте.
— Какие перспективы у бэкенд JavaScript по сравнению с другими языками и технологиями?
— Я изначально против привязки к технологиям. Хороший инженер должен выбирать технологию под задачу а не пытаться быть парнем с молотком, для которого все вокруг гвозди. На данный момент у ноды приличная скорость в некоторых аспектах, низкий порог входа, высокая популярность и куча библиотек для всего. С другой стороны, не решены многие вопросы. Но думаю, что это звучит как вызов 😉
— Сколько времени нужно учиться бэкенд-разработке на JS с нуля до джуниора?
— Все индивидуально. Если вы любопытны и въедливы, то думаю, что не менее полугода.
Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях
Визуализация с Web Audio API
Одна из самых интересных фич Web Audio API — возможность извлекать частоту, форму волны и другие данные из звукового источника, которые могут быть использованы для создания визуализаций. Эта статья объясняет, как это можно сделать, и приводит несколько базовых примеров использования.
Примечание: вы можете найти рабочие примеры всех фрагментов кода в нашей демонстрации автоизменения голоса.
Основные концепции
Чтобы извлечь данные из вашего источника звука, вам понадобится AnalyserNode , созданный при помощи метода AudioContext.createAnalyser() (en-US), например:
Затем этот узел подключается к вашему источнику звука где-то между получением звука и его обработкой, например:
Примечание: вам не нужно подключать вывод анализатора к другому узлу для его работы, пока его ввод подключён к источнику, либо напрямую, либо через другой узел.
Затем анализатор захватит аудиоданные, используя быстрое преобразование Фурье (БПФ) в определённой частотной области, в зависимости от того, что вы укажете как значение свойства AnalyserNode.fftSize (en-US) (если свойство не задано, то значение по умолчанию равно 2048).
Примечание: вы так же можете указать значения минимума и максимума для диапазона масштабирования данных БПФ, используя AnalyserNode.minDecibels (en-US) и AnalyserNode.maxDecibels (en-US), и разные константы усреднения данных с помощью AnalyserNode.smoothingTimeConstant (en-US). Прочтите эти страницы, чтобы получить больше информации о том как их использовать.
Эти методы копируют данные в указанный массив, поэтому вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них — числа типа float32, второй и третьей — uint8, поэтому стандартный массив JavaScript не подойдёт для их хранения — следует использовать массивы Float32Array (en-US) или Uint8Array (en-US), в зависимости от нужных вам данных.
Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение AnalyserNode.frequencyBinCount (en-US), равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведём для данного размера fft.
Чтобы собрать данные и копировать их в массив, мы вызываем подходящий метод сбора данных, с массивом в качестве аргумента. Например:
Теперь в массиве хранятся данные, описывающие звук в данный момент времени, и мы можем визуализировать их любым удобным образом, например с помощью холста HTML5: <canvas> .
Давайте рассмотрим конкретные примеры:
Создание формы волны/осциллографа
Чтобы визуализировать осциллограф (спасибо Soledad Penadés за код в Voice-change-O-matic), мы сначала следуем шаблону, описанному в предыдущей секции, для создания буфера:
Затем, мы очищаем холст:
И определяем функцию draw() :
Здесь мы используем requestAnimationFrame() чтобы многократно вызывать эту функцию:
Затем мы копируем данные в наш массив:
Устанавливаем заливку холста
Затем устанавливаем ширину линий и цвет волны, которую мы хотим нарисовать, и начинаем рисовать путь
Мы определяем ширину каждого отрезка в линии, деля длину холста на длину массива (равную FrequencyBinCount), затем определяем переменную x, задающую позицию, в которую необходимо перенести каждый отрезок.
В цикле, мы задаём позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:
Наконец, мы заканчиваем линию в середине правой стороны холста и рисуем, используя установленные цвет и ширину линий:
В конце концов, мы вызываем функцию draw() , запускающую весь процесс:
Мы получаем изображение волны, обновляющееся несколько раз в секунду:
Создание частотной гистограммы
Ещё одна визуализация, которую можно создать, — это частотные диаграммы (такие, как строит Winamp). В проекте Voice-change-O-matic есть реализация такой диаграммы. Давайте посмотрим на неё.
Сначала мы снова создаём анализатор и массив для данных, затем очищаем холст при помощи clearRect() . Единственное отличие от того, что мы делали раньше — ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядеть как столбец, а не как тонкая полоска.
Затем мы запускаем функцию draw() и задаём цикл при помощи requestAnimationFrame() таким образом, чтобы в каждом кадре анимации данные обновлялись.
Затем мы устанавливаем значение barWidth , равное ширине холста, делённой на количество столбцов (длину буфера). Однако, мы домножаем ширину на 2.5, поскольку на большинстве частот звука не будет, поскольку большинство звуков, которые мы слышим в повседневной жизни, находятся в определённых, достаточно низких, диапазонах частот. Нам нет смысла показывать множество пустых частот, поэтому мы просто сдвигаем столбцы, соответствующие наиболее распространённым частотам.
Мы также устанавливаем значение переменных barHeight и x , задающей то, где на холсте должен быть размещён каждый столбец.
Как и раньше, мы в цикле проходим по каждому значению в dataArray . Для каждого значения мы устанавливаем высоту barHeight на уровне значения в массиве, устанавливаем заливку в зависимости от barHeight (Чем выше столбец, тем он ярче), и рисуем столбец в x пикселях от левой стороны холста. Ширина столбца равна barWidth , а высота — barHeight/2 (чтобы столбцы помещались на холсте, мы уменьшили высоту в два раза)
Одна переменная, требующая объяснения, — это вертикальный сдвиг, с которым мы рисуем каждый столбец: HEIGHT-barHeight/2 . Это делается для того, чтобы столбцы начинались в нижней части холста, а не в верхней, как было бы, если бы вертикальное положение было установлена в 0 0. Поэтому мы каждый раз устанавливаем вертикальное положение в разность высоты холста и barHeight/2 , чтобы столбцы начинались где-то между верхом и низом холста и заканчивались снизу.
3 способа JavaScript может нарушить вашу конфиденциальность и безопасность
Вы, наверное, слышали, что JavaScript опасен. Ну, это отчасти правильно. JavaScript может быть опасным, если не будут приняты надлежащие меры предосторожности. Его можно использовать для просмотра или кражи личных данных, даже не подозревая, что это происходит. А поскольку JavaScript так широко распространен в Интернете, мы все уязвимы.
Все сводится к тому, как на самом деле работает JavaScript по большей части хорош, но он настолько гибок и силен, что держать его под контролем может быть сложно. Вот что вам нужно знать.
Преимущества JavaScript
Перво-наперво, JavaScript это хорошо . Согласно W3Techs, примерно 88,1% всех сайтов так или иначе используют JavaScript . Большинство известных сайтов, таких как Amazon и YouTube, не были бы столь полезными, если бы Интернет был зоной без JavaScript.
Например, JQuery — это популярная библиотека JavaScript, которая позволяет легко создавать интерактивные веб-сайты с элементами, которые могут изменяться без необходимости перезагружать вся страница Такие сайты, как Facebook и Twitter, используют такие технологии, как AJAX чтобы обновлять веб-страницы (например, отметки времени, количество лайков и т. Д.), Не обновляя страницу каждую секунду.
Но, как мы скоро увидим, JavaScript не идеален. Этим злоупотребляют, и это злоупотребление приводит к сценариям, которые позволяют отслеживать вашу активность в Интернете и нарушать вашу конфиденциальность.
Один из распространенных, но ошибочных советов — полностью отключить JavaScript, но мы его не рекомендуем. Вы бы потеряли множество потрясающих веб-функций, таких как функция «бесконечной прокрутки», которая существует во многих блогах, социальных сетях и новостных сайтах.
Более того, некоторые браузерные эксплойты все еще возможны, даже если вы отключите JavaScript. Таким образом, отключение JavaScript из-за проблем безопасности похоже на ношение костюма-пузыря каждый раз, когда вы выходите на улицу, потому что вы боитесь получить травму. Это на самом деле не защитит вас от многих, но сделает вашу жизнь несчастной.
Snooping слова, которые вы вводите
В июле 2012 года пара исследователей взяла данные от 5 миллионов пользователей Facebook в Америке и Великобритании. Что они искали? Самоцензура. В частности, они хотели знать, как часто пользователи начнут писать сообщения, но в конечном итоге удалят их до того, как они будут опубликованы .
Они сделали это, внедрив немного JavaScript, который отслеживал текстовые поля, где пользователи могли делать обновления статуса, писать комментарии на стене и т. Д. Исследователи ясно дали понять, что они записывают только «наличие или отсутствие введенного текста», а не «нажатия клавиш или контент». », Но суть очевидна.
Можно было отслеживать нажатия клавиш и контент. Они просто решили не делать этого.
Понятие страшно. Простой фрагмент встроенного JavaScript — это все, что нужно для записи любого вида активности на веб-странице — даже если вы на самом деле ничего не отправляете ! Веб-прокрутка, движения мыши, нажатия клавиш: все это можно отслеживать и записывать против вашей воли или знаний.
Отслеживание ваших привычек просмотра
Возможности отслеживания JavaScript не ограничиваются только текстовыми полями. С помощью магии файлов cookie браузера , компании могут хранить все виды пользовательской информации: тип браузера, предпочтения, местоположение и т. Д. Утверждение заключается в том, что этот вид отслеживания делается для обеспечения лучшего взаимодействия с пользователем (например, релевантный реклама), но это все еще похоже на нарушение.
Файлы cookie являются постоянными, то есть они продолжают существовать даже после того, как вы покинете веб-страницу или закроете браузер (если срок их действия не истек или вы не удалили их вручную). Вы видите растущую проблему? Если файл cookie сохраняется с веб-страницы на веб-страницу, компания может увидеть, какие веб-сайты вы посещаете.
Это лучше всего объяснить на примере: кнопки социальных сетей. Рассмотрим кнопку «Нравится» Facebook, которая использует JavaScript для выполнения своих действий. Когда ваш браузер загружает страницу, он должен загрузить кнопку. Загрузка кнопки означает запрос в Facebook необходимого файла JavaScript. Этот запрос включает в себя такие данные, как ваш IP-адрес, веб-страницу, на которой вы находитесь, файлы cookie Facebook в вашей системе и т. Д.
Просто чтобы быть понятным, вам не нужно нажимать кнопку, чтобы отслеживать вас. Акт загрузки достаточно, чтобы эти общие виджеты собирали данные о вас.
При этом кнопки социальных сетей — это лишь один из многих способов, с помощью которых компании могут отслеживать ваши привычки просмотра. Другие примеры включают в себя профили онлайн-знакомств, комментарии Disqus и веб-сайты, которые используют бесплатные веб-шрифты .
Инъекция вредоносного кода
Одно из самых коварных применений JavaScript происходит в форме межсайтовых сценариев (XSS). Проще говоря, XSS — это уязвимость, которая позволяет хакерам встраивать вредоносный код JavaScript в легитимный веб-сайт, который в конечном итоге исполняется в браузере пользователя, который посещает сайт.
Если это происходит на веб-сайте, который обрабатывает конфиденциальную информацию пользователя, такую как финансовые данные, злонамеренный код может потенциально отследить и украсть эту информацию. Иными словами , XSS можно использовать для распространения вирусов и вредоносных программ. Именно это произошло, когда Twitter был заражен червем StalkDaily .
XSS также можно использовать для чего-то, называемого отравлением поисковой системы. отравление . Короче говоря, производители вредоносного ПО могут использовать JavaScript для заражения веб-сайтов с высоким рейтингом результатов поиска таким образом, что вместо этого пользователи, которые пытаются посетить эти сайты, перенаправляются на зараженные вредоносным ПО веб-сайты.
И еще есть нечто, называемое подделкой межсайтовых запросов (CSRF), которое является противоположностью XSS. Этот вид вредоносного кода JavaScript может использовать браузер пользователя, файлы cookie и разрешения безопасности для выполнения действий на отдельном веб-сайте.
Что вы можете сделать для защиты от атак на основе JavaScript?
В конечном счете, ответственность за обеспечение чистоты и безопасности веб-сайтов лежит на веб-разработчиках. Однако, как конечному пользователю, вы всегда должны поддерживать свои браузеры в актуальном состоянии и регулярно проверять их на наличие вредоносных программ.
При этом я могу рассчитывать с одной стороны, сколько раз я сталкивался с вышеуказанными проблемами. JavaScript является важной частью современного Интернета. Это принесло нам больше пользы, чем вреда, и оно здесь, чтобы остаться. Заинтересованы в том, чтобы стать разработчиком JavaScript, ? Начните использовать эти бесплатные учебные ресурсы
Вы когда-нибудь сталкивались с проблемами JavaScript? Вы практикуете безопасные привычки для безопасности и конфиденциальности? Расскажите нам о своем опыте в комментариях ниже!