ВАЙЛТ™ on Telegram: “#Интересно Часть 1. О XSS Часть 2. XSS Типы + пр…”

#Интересно

Часть 1. О XSS

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

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

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

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

function escapeHtml(unsafe) { 
    return unsafe 
        .replace(/&/g, "&amp;") 
        .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

WE BIK | @gki_webik_ru