Коли JavaScript створювався, він мав інше ім’я – «LiveScript». Однак, мова Java була дуже популярна в той час, і було вирішено, що JavaScript як «молодшого брата» Java буде корисним. З часом JavaScript став повністю незалежною мовою зі своєю власною специфікацією, що називається ECMAScript, і зараз не має жодного відношення до Java. Спочатку JavaScript був створений, щоб зробити веб-сторінки живими. Програми на цьому мові називаються скриптами. Вони можуть вбудовуватись у HTML та виконуватися автоматично під час завантаження веб-сторінки та відправляти мережеві запити на віддалений сервер та завантажувати файли на особистий ПК так і на сервер. При чьому ви можете додавати новий html код, змінювати та модифікувати існуючий вміст сторінки, змінювати стилі (взаємодія за DOM). Скрипти розповсюджуються та виконуються як простий текст. Їм не потрібна спеціальна підготовка чи компіляція для запуску. Взаємодія з користувачем відображає повідомлення, ставить запитання, ділитися місцезнаходженням, вмикає мікрофон або камеру.
Отже, JavaScript – динамічна, прототипна мова програмування , яка дозволяє створення інтерактивності на сторінці користувача та також зберігає дані на стороні клієнта (local storage, local storage, indexedDB, Cookies). Класифікується як прототипна підмножина об’єктно-орієнтованої, але також підтримує інші парадигми програмування, імперативну та функціональну. Вивчення JavaScript дозволить вам розширити свої можливості в розробці веб-додатків та веб-сайтів, додати анімацію, інтерактивність та багато іншого. Вона є необхідним інструментом для сучасних веб-розробників та може допомогти вам створити веб-проекти.
- Створення бекенду веб-застосунку за допомогою node.js
- Створення десктопних програмних продуктів за допомогою Electron
- Створення кросплатформенних мобільних застосунків за допомогою React Native, Ionic
- Створення динамічних веб-застосунків на стороні клієнта за допомогою бібліотек React, Vue, Angular поєднану
Наступні розділи важливі за причиною, що розробники зазнають на даних етапах помилки, що в свою чергу може бути потенційною загрозою, яку кіберзлочинці можуть спробувати скористатися.
В минулому, а саме приблизно 10 років тому веб-застосунки створювались за допомогою серверних фреймворків, відправивши клієнту сторінку з базовим набором файлів, зовнішньої частини сайту(html, css, js). Взаємодія клієнта і сервера відбувалася наступним чином, користувач (клієнт) хоче перейти до галереї сайту для цього він запитував із сервера іншу сторінку(галареї), яка генерувалася та передавалася по HTTP, а за успішності операції користувач отримував результат у браузері.
Згодом розробники почали використовувати технологію AJAX (Asynchronous JavaScript And XML) з комбінацією бібліотекою jquery. Одна з основних проблем, яку вирішує AJAX динамічне зміна змісту сторінки, де це необхідно, без перезавантаження сторінки. З появою нового стандарту ECMAScript 6 (2015), мова js значно змінилася що дало початок створенню нових фреймворків Angular 2.0, React, Vue.js
⦁ // глобальна область видимості
nameUser = ”Ivan”;
⦁ // область видимості всередині функції
var nameUser = “Ivan”;
⦁ // блокова область видимості
let nameUser = “Ivan”;
⦁ // блокова область видимості, яку не підлягає змінам
const nameUser = “Ivan”;
Різниця між перерахованих способах ініціалізації змінних зараховує змінну в глобальну область(window) видимості, яку можна буде знайти в різних методах. Також даний спосіб може спричинити зміну властивостей глобальної області видимості. Професіональними розробниками не використовується
Змінна, визначена з ключовим словом var, прив’язана до найближчої функції або якщо блок функції не заданий, виявляється глобальною. Спосіб ініціалізації змінної в блоковій системі (яку можна переприсвоїти)
Помилка з’являється тому що за межами умовного оператора if змінна nameUser невідома тому буде помилка.
Спосіб ініціалізації змінної в блоковій системі аналогічний з let, але даним способом переприсвоїти зміст примітивного типу даних неможливо.
⦁ function () {};
⦁ foo = function() {};
⦁ var foo = function() { };
⦁ let foo = function () {};
⦁ const foo = function () {};
⦁ () => {};
⦁ function foo(){};
⦁ (function() { })();
Перша функція анонімна. В неї немає ім’я тому викликати її не можна. Далі від другої до п’ятої йдуть функції виду function definition expression їх особливість полягає що вони також анонімні, але їх можна викликати. Шоста функція називається стрілочною різниця між попередніми записами в тому що контекст (this) вона має глобальний тоді як минилі приклади мають контекст в області видимості функції. Сьома функція виду function declaration statement, особливість методу ініціалізації в тому що вона може бути піднята (hosting). Восьмий метод називається IIFE(immediately invokеd function expression). Такі функції запускаються відразу після завантаження та виконуються всередині власного простору імен. Вони застосовуються для інкапсуляції блоків коду із сторонніх джерел.
Як вже було зазначено в js функції це об’єкт, у об’єкта і свої параметри ці параметри і контекстом. Також і в функціях всі дані які знаходяться в функції називається контекстом функції. Контекст можна міняти під час виконання коду. Для посилання на об’єкти, що зберігаються в контексті функції, використовується ключове слово this. Повідомлення undefined свідчить проте що виклик this.userName звертається в глобальний контекст додатка, а в нього немає такого параметра на відміну від функції tempFunc.
Серверні мови програмування використовують спадкування (наслідування) на основі класів. На жаль такої механіки немає в JS, є синтаксичний цукор, який імітує прототипне спадкування. В системі успадкування, що застосовується в мові JavaScript, будь-який створений об’єкт має властивість prototype. До нього додається властивість constructor, що вказує на функцію, що має властивість prototype. В результаті для створення нових екземплярів об’єктів може використовуватись будь-який об’єкт, адже конструктор вказує на об’єкт, що містить прототип, який, у свою черга містить конструктор.
Браузерам на регулярній основі доводиться обмінюватися даними із серверами, причому час між запитом та отриманням відповіді може відрізнатися, тому що залежить від таких факторів, як розмір корисного навантаження, час затримки тa час обробки даних на сервeрі. Для контролю цієї варіативності частo застосовується асинхронне виконання коду.
Різниця між синхронним та асинхронним викликом полягає в тому що відповідь синхронного буде незмінною, а в асинхронного може відрізнятися приклад як у варіанту відповіді 2.
Спочатку викликаємо об’єкт congigUser, далі після виконання виклику, викликаємо дані юзера getUser, послідовно після успішного закінчення виклику задаєм конфігурацію юзера також асинхронно.
Поставлене ключове слово async перетворює її на проміс, інше ключове слово await змушую інтерпретатор зупиниться і почекати виконння проміса. При цьому код поза асинхронною функцією буде виконуватись звичайним чином.
1) DOM document object model – об’єктна модель документа. Це структуроване представлення даних, яке використовується браузером для керування станом. На рис. нижче вказаний об’єкт window — одне із стандартних об’єктів верхнього рівня, визначених специфікацією DOM. Модель DOM допомагає при пошуку вразливостей та тестування веб застосунку на рівні frontend.
2) Детальний приклад, як можна маніпулювати dom елементами за допомогою консолі веб-розробника (dev tools).
Заходимо на довільний сайт, наприклад wikipedia.org (Натиснути).
3) В контексті цього завдання, нам потрібно знайти всі блоки з мовами статей, які доступні на сторінці та змінити фоновий колір в довільному черзі.
Як за допомогою dev tools знайти необхідні dom елементи?
4) Переводимо курсор на розділ з мовою, натискаємо правою клавішею миші на вибраний розділ, в контексному меню знаходимо розділ “Перевірити”.
5) ВІдкривається режим веб-розробника.
6) Аналізуємо html розмітку та знаходимо схожі назви класів dom елементів.
7) На скріншоті вище видно що кожен розділ має спільний назву класу “central-featured-lang”. Переходимо в консоль та за допомогою коду шукаємо необхідні елементи.
8) Створюємо змінну “getAllSecton” та присвоюємо їй node list з dom елементів розділами сайту вікіпедії. Далі викликаємо змінну для уточнення, що список з елементів не порожній.
9) Далі викликаємо метод, який буде кожні дві мілісекунди змінювати фоновий колір розділу сайту. Ви самі зрозумієте, якщо у вас все вийшло.
Cross-site request forgery (CSRF) – це атака, яка змушує користувача виконувати небажані дії на веб-застосунку в якій вона зараз є авторизована. За допомогою соціальної інженерії, зловмисник може обдурити користувачів на виконання запланованих дій. Якщо жертва є звичайним користувачем, успішна атака CSRF може змусити користувача виконувати запити, що змінюють стан, такі як передача коштів, зміна їх електронної адреси тощо.
Cross-Site Scripting(XSS) – це вид атаки, де зловмисник додає код, який буде працювати, коли жертва завантажить сторінку веб-сайту. Більш детальний сценарій використання вразливості. Зловмисник на вразливому веб-сайті додає в поле вводу коментаря, в складі якого буде код. Користувач під час подорожі мережею інтернет не підозрюючи небезпеку заходить на вже вразливий сайт та після повної загрузки сторінки шкідливий код заражає користувача.
- ⦁ Створення шкідливого посилання зловмисником
- ⦁ Пошук жертви
- ⦁ За допомогою соціальної інженерії жертва переходить за посиланням
- ⦁ Жертва завантажує веб-сторінку, і шкідливий код копіює файли cookie користувача
4.1⦁ Потім код надсилає HTTP-запит на один або на декілька веб-серверів зловмисника з викраденими файлами cookie в тілі запиту.
4.2⦁ Потім зловмисник може використовувати ці файли cookie, щоб представити себе користувачем на цьому веб -сайті з метою нападу соціальної інженерії або навіть для доступу до номерів банківських рахунків або інших конфіденційних даних.
JS має доступ до деяких конфіденційний даних, які можуть бути використані для крадіжки ідентичності. Наприклад js має доступ до файлів cookie тоді зловмисник може використати атаку XSS, щоб вкрасти файли cookie користувача та продати їх третій стороні або використовувати у власних цілях. JS також може створювати запити http, що в свою чергу може надсилати всі дані до серверів зловмисника. На стороні клієнта в шкідливому може отримати доступ до API налаштувань браузера користувача, що містять координати геолокації дані веб-камери та іншу конфіденційну інформацію.
Код додається до кінця URL посилання.
Приклад використання:
Користувачу приходить електронний лист від банку з запитом пройти перевірку особи або оцінити новий інтерфейс сайту банку (текст може бути довільний). За необхідністю зловмисник за допомогою соціальною інженерії може зателефонувати та представитися працівником банку, після стандартної маніпуляції зловмисник невимушено дає вказівки відкрити лист з посиланням далі після переходу дані користувача будуть вкрадені.
Код додається на сторінці веб сайту (в полях воду даних). Цей вид атаки може бути застосований на специфічних сайтах де дозволено залишати коментарі або заповнювати форму користувача для подальшого перегляду іншими користувачами веб-сайту(сайт знайомств). Якщо сайт вразливий до даної атаки, то зловмисник може в профілі залишити наступний допис. Приклад шкідливого допису: Привіт, мене звати Степан, бажаю знайти
Якщо веб-застосунок був створений за допомогою GET запитів для передачі транзакцій коштів в банку та передачі параметрів в URL Наприклад GET http://privat24.com.ua/transfer.do?acct=STEPAN&amount=100 HTTP/1.1 Далі зловмисник отримує оригінальне посилання де в свою чергу змінює параметри на власні реквізити банківського рахунку http://privat24.com.ua/transfer.do?acct=THIEF&amount=100000 За допомогою соціальної інженерії жертва (користувач банку) переходить за посиланням, що в свою чергу перераховує свої кошти зловмиснику.
1. Користувач бажає перерахувати свої гроші до карти свого товариша
2. Зловмисник дізнався про цю операцію (наприклад телефон користувача вже був заражений шкідливим ПЗ)
3. До користувача приходить електронний лист з банку, який створив зловмисник з запитом підтвердження особи користувача (текст може бути довільний)
4. Далі зловмисник телефонує і представляється співробітником банку, далі входить в довіру та маніпулятивними шляхами змушує перейти за посиланням,яке прийшло йому на електронний лист
5. Користувач переходить за посиланням
6. Де потрапляє на веб-сайту свого банку, де вже посилання на транзакцію змінені на адресу зловмисника, але це приховано від користувача
7. Користувач вводить реквізити товариша та натискає відправити кошти, які були успішно відправлені шахраям