Безпека TypeScript: Шаблони типів для очищення вхідних даних для надійних додатків

У сучасному взаємопов'язаному світі створення безпечних та надійних веб-додатків є надзвичайно важливим. Зі зростанням витонченості кіберзагроз розробники повинні впроваджувати надійні заходи безпеки для захисту конфіденційних даних та запобігання шкідливим атакам. TypeScript, завдяки своїй системі сильних типів, надає потужні інструменти для підвищення безпеки додатків, зокрема через шаблони типів для очищення вхідних даних. Цей комплексний посібник розглядає різні шаблони типів TypeScript для очищення вхідних даних, що дозволяє створювати більш безпечні та стійкі додатки.

Чому очищення вхідних даних є критично важливим

Очищення вхідних даних – це процес очищення або модифікації даних, наданих користувачем, щоб запобігти їхньому завданню шкоди додатку чи його користувачам. Недовірені дані, незалежно від того, чи надходять вони з форм, запитів API, чи будь-якого іншого зовнішнього джерела, можуть створювати вразливості, такі як:

• Міжсайтовий скриптинг (XSS): Зловмисники вставляють шкідливі скрипти у веб-сторінки, які переглядають інші користувачі.
• SQL-ін'єкція: Зловмисники вставляють шкідливий SQL-код у запити до бази даних.
• Ін'єкція команд: Зловмисники виконують довільні команди на сервері.
• Перехід по шляху: Зловмисники отримують доступ до несанкціонованих файлів або каталогів.

Ефективне очищення вхідних даних зменшує ці ризики, гарантуючи, що всі дані, які обробляє додаток, відповідають очікуваним форматам і не містять шкідливого вмісту.

Використання системи типів TypeScript для очищення вхідних даних

Система типів TypeScript пропонує кілька переваг для реалізації очищення вхідних даних:

• Статичний аналіз: Компілятор TypeScript може виявляти потенційні помилки, пов'язані з типами, під час розробки, до виконання.
• Типова безпека: Забезпечує типи даних, зменшуючи ризик несподіваних форматів даних.
• Чіткість коду: Покращує читабельність та підтримуваність коду завдяки явним оголошенням типів.
• Підтримка рефакторингу: Полегшує рефакторинг коду, зберігаючи типову безпеку.

Використовуючи систему типів TypeScript, розробники можуть створювати надійні механізми очищення вхідних даних, які мінімізують ризик вразливостей безпеки.

Поширені шаблони типів для очищення вхідних даних у TypeScript

1. Очищення рядків

Очищення рядків включає очищення та валідацію рядкових вхідних даних для запобігання XSS та іншим атакам ін'єкцій. Ось деякі поширені техніки:

a. Екранування HTML-сутностей

Екранування HTML-сутностей перетворює потенційно шкідливі символи на їхні відповідні HTML-сутності, запобігаючи їх інтерпретації як HTML-код. Наприклад, < стає <, а > стає >.

Приклад:

            
function escapeHtml(str: string): string {
  const map: { [key: string]: string } = {
    '&': '&',
    '<': '<',
    '>': '>',
    '"': '"',
    "'": '''
  };

  return str.replace(/[&<>"']/g, (m) => map[m]);
}

const userInput: string = '';
const sanitizedInput: string = escapeHtml(userInput);
console.log(sanitizedInput); // Output: <script>alert("XSS");</script>

            

              
                Copy
              
            
          

b. Валідація за допомогою регулярних виразів

Регулярні вирази можна використовувати для валідації того, що рядок відповідає певному формату, наприклад, адресі електронної пошти або номеру телефону.

Приклад:

            
function isValidEmail(email: string): boolean {
  const emailRegex: RegExp = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
  return emailRegex.test(email);
}

const email1: string = 'test@example.com';
const email2: string = 'invalid-email';

console.log(isValidEmail(email1)); // Output: true
console.log(isValidEmail(email2)); // Output: false

            

              
                Copy
              
            
          

c. Псевдоніми типів для специфічних форматів рядків

Псевдоніми типів TypeScript можна використовувати для визначення специфічних форматів рядків та забезпечення їх на рівні компіляції.

Приклад:

            
type Email = string & { readonly __email: unique symbol };

function createEmail(input: string): Email {
  if (!isValidEmail(input)) {
    throw new Error('Invalid email format');
  }
  return input as Email;
}

try {
  const validEmail: Email = createEmail('test@example.com');
  console.log(validEmail); // Output: test@example.com (with type Email)

  const invalidEmail = createEmail('invalid-email'); //Throws error
} catch (error) {
  console.error(error);
}


            

              
                Copy
              
            
          

2. Очищення чисел

Очищення чисел включає валідацію того, що числові вхідні дані знаходяться в допустимих діапазонах і відповідають очікуваним форматам.

a. Валідація діапазону

Переконайтеся, що число потрапляє у певний діапазон.

Приклад:

            
function validateAge(age: number): number {
  if (age < 0 || age > 120) {
    throw new Error('Invalid age: Age must be between 0 and 120.');
  }
  return age;
}

try {
  const validAge: number = validateAge(30);
  console.log(validAge); // Output: 30

  const invalidAge: number = validateAge(150); // Throws error

} catch (error) {
  console.error(error);
}


            

              
                Copy
              
            
          

b. Охоронці типів для числових типів

Використовуйте охоронці типів, щоб переконатися, що значення є числом перед виконанням операцій над ним.

Приклад:

            
function isNumber(value: any): value is number {
  return typeof value === 'number' && isFinite(value);
}

function processNumber(value: any): number {
  if (!isNumber(value)) {
    throw new Error('Invalid input: Input must be a number.');
  }
  return value;
}

try {
  const validNumber: number = processNumber(42);
  console.log(validNumber); // Output: 42

  const invalidNumber: number = processNumber('not a number'); // Throws error
} catch (error) {
  console.error(error);
}

            

              
                Copy
              
            
          

3. Очищення дат

Очищення дат включає валідацію того, що вхідні дані дат мають правильний формат і знаходяться в допустимих діапазонах.

a. Валідація формату дати

Використовуйте регулярні вирази або бібліотеки для парсингу дат, щоб переконатися, що рядок дати відповідає певному формату (наприклад, YYYY-MM-DD).

Приклад:

            
function isValidDate(dateString: string): boolean {
  const dateRegex: RegExp = /^\d{4}-\d{2}-\d{2}$/;
  if (!dateRegex.test(dateString)) {
    return false;
  }

  const date: Date = new Date(dateString);
  return !isNaN(date.getTime());
}

function parseDate(dateString: string): Date {
  if (!isValidDate(dateString)) {
    throw new Error('Invalid date format: Date must be in YYYY-MM-DD format.');
  }
  return new Date(dateString);
}

try {
  const validDate: Date = parseDate('2023-10-27');
  console.log(validDate); // Output: Fri Oct 27 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

  const invalidDate: Date = parseDate('2023/10/27'); // Throws error
} catch (error) {
  console.error(error);
}

            

              
                Copy
              
            
          

b. Валідація діапазону дат

Переконайтеся, що дата потрапляє у певний діапазон, наприклад, між початковою та кінцевою датою.

Приклад:

            
function isDateWithinRange(date: Date, startDate: Date, endDate: Date): boolean {
  return date >= startDate && date <= endDate;
}

function validateDateRange(dateString: string, startDateString: string, endDateString: string): Date {
  const date: Date = parseDate(dateString);
  const startDate: Date = parseDate(startDateString);
  const endDate: Date = parseDate(endDateString);

  if (!isDateWithinRange(date, startDate, endDate)) {
    throw new Error('Invalid date: Date must be between the start and end dates.');
  }
  return date;
}

try {
  const validDate: Date = validateDateRange('2023-10-27', '2023-01-01', '2023-12-31');
  console.log(validDate); // Output: Fri Oct 27 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

  const invalidDate: Date = validateDateRange('2024-01-01', '2023-01-01', '2023-12-31'); // Throws error
} catch (error) {
  console.error(error);
}

            

              
                Copy
              
            
          

4. Очищення масивів

Очищення масивів включає валідацію елементів у масиві, щоб переконатися, що вони відповідають певним критеріям.

a. Охоронці типів для елементів масиву

Використовуйте охоронці типів, щоб переконатися, що кожен елемент масиву має очікуваний тип.

Приклад:

            
function isStringArray(arr: any[]): arr is string[] {
  return arr.every((item) => typeof item === 'string');
}

function processStringArray(arr: any[]): string[] {
  if (!isStringArray(arr)) {
    throw new Error('Invalid input: Array must contain only strings.');
  }
  return arr;
}

try {
  const validArray: string[] = processStringArray(['apple', 'banana', 'cherry']);
  console.log(validArray); // Output: [ 'apple', 'banana', 'cherry' ]

  const invalidArray: string[] = processStringArray(['apple', 123, 'cherry']); // Throws error
} catch (error) {
  console.error(error);
}

            

              
                Copy
              
            
          

b. Очищення елементів масиву

Застосовуйте техніки очищення до кожного елемента масиву, щоб запобігти атакам ін'єкцій.

Приклад:

            
function sanitizeStringArray(arr: string[]): string[] {
  return arr.map(escapeHtml);
}

const inputArray: string[] = ['<script>alert("XSS");', 'normal text'];
const sanitizedArray: string[] = sanitizeStringArray(inputArray);
console.log(sanitizedArray);
// Output: [ '<script>alert("XSS");</script>', 'normal text' ]

            

              
                Copy
              
            
          

5. Очищення об'єктів

Очищення об'єктів включає валідацію властивостей об'єкта, щоб переконатися, що вони відповідають певним критеріям.

a. Припущення типів для властивостей об'єкта

Використовуйте припущення типів для забезпечення типів властивостей об'єкта.

Приклад:

            
interface User {
  name: string;
  age: number;
  email: Email;
}

function validateUser(user: any): User {
  if (typeof user.name !== 'string') {
    throw new Error('Invalid user: Name must be a string.');
  }
  if (typeof user.age !== 'number') {
    throw new Error('Invalid user: Age must be a number.');
  }
  if (typeof user.email !== 'string' || !isValidEmail(user.email)) {
      throw new Error('Invalid user: Email must be a valid email address.');
  }

  return {
    name: user.name,
    age: user.age,
    email: createEmail(user.email)
  };
}

try {
  const validUser: User = validateUser({
    name: 'John Doe',
    age: 30,
    email: 'john.doe@example.com',
  });
  console.log(validUser);
  // Output: { name: 'John Doe', age: 30, email: [Email: john.doe@example.com] }

  const invalidUser: User = validateUser({
    name: 'John Doe',
    age: '30',
    email: 'invalid-email',
  }); // Throws error
} catch (error) {
  console.error(error);
}

            

              
                Copy
              
            
          

b. Очищення властивостей об'єкта

Застосовуйте техніки очищення до кожної властивості об'єкта, щоб запобігти атакам ін'єкцій.

Приклад:

            
interface Product {
  name: string;
  description: string;
  price: number;
}

function sanitizeProduct(product: Product): Product {
  return {
    name: escapeHtml(product.name),
    description: escapeHtml(product.description),
    price: product.price,
  };
}

const inputProduct: Product = {
  name: '<script>alert("XSS");',
  description: 'This is a product description with some HTML.',
  price: 99.99,
};

const sanitizedProduct: Product = sanitizeProduct(inputProduct);
console.log(sanitizedProduct);
// Output: { name: '<script>alert("XSS");</script>', description: 'This is a product description with some <b>HTML</b>.', price: 99.99 }

            

              
                Copy
              
            
          

Найкращі практики очищення вхідних даних у TypeScript

• Очищайте рано: Очищайте дані якомога ближче до джерела вхідних даних.
• Використовуйте підхід "оборона в глибину": Поєднуйте очищення вхідних даних з іншими заходами безпеки, такими як кодування вихідних даних та параметризовані запити.
• Підтримуйте логіку очищення в актуальному стані: Будьте в курсі останніх вразливостей безпеки та відповідно оновлюйте логіку очищення.
• Тестуйте логіку очищення: Ретельно тестуйте свою логіку очищення, щоб переконатися, що вона ефективно запобігає атакам ін'єкцій.
• Використовуйте перевірені бібліотеки: Використовуйте добре підтримувані та надійні бібліотеки для поширених завдань очищення, замість того, щоб винаходити велосипед. Наприклад, розгляньте використання бібліотеки, як-от validator.js.
• Враховуйте локалізацію: При роботі з вхідними даними від користувачів з різних регіонів пам'ятайте про різні набори символів та стандарти кодування (наприклад, UTF-8). Переконайтеся, що ваша логіка очищення правильно обробляє ці варіації, щоб уникнути вразливостей, пов'язаних з проблемами кодування.

Приклади глобальних міркувань щодо вхідних даних

При розробці додатків для глобальної аудиторії надзвичайно важливо враховувати різноманітні формати вхідних даних та культурні звичаї. Ось кілька прикладів:

• Формати дат: Різні регіони використовують різні формати дат (наприклад, MM/DD/YYYY у США, DD/MM/YYYY у Європі). Переконайтеся, що ваш додаток може обробляти кілька форматів дат та надавати відповідну валідацію.
• Формати чисел: Різні регіони використовують різні роздільники для десяткових крапок та тисяч (наприклад, 1,000.00 у США, 1.000,00 у Європі). Використовуйте відповідні бібліотеки для парсингу та форматування для обробки цих варіацій.
• Символи валют: Символи валют відрізняються залежно від країни (наприклад, $, €, £). Використовуйте бібліотеку форматування валют для коректного відображення значень валют на основі локалі користувача.
• Формати адрес: Формати адрес значно відрізняються по країнах. Надайте гнучкі поля введення та логіку валідації для розміщення різних структур адрес.
• Формати імен: Формати імен відрізняються між культурами (наприклад, західні імена зазвичай мають ім'я, за яким слідує прізвище, тоді як у деяких азіатських культурах порядок зворотний). Розгляньте можливість дозволити користувачам вказувати бажаний порядок імен.

Висновок

Очищення вхідних даних є критично важливим аспектом створення безпечних та надійних додатків TypeScript. Використовуючи систему типів TypeScript та впроваджуючи відповідні шаблони типів для очищення, розробники можуть значно зменшити ризик вразливостей безпеки, таких як XSS та атаки ін'єкцій. Пам'ятайте очищати рано, використовувати підхід "оборона в глибину" та залишатися в курсі останніх загроз безпеки. Дотримуючись цих найкращих практик, ви можете створювати більш надійні та безпечні додатки, які захищають ваших користувачів та їхні дані. Під час створення глобальних додатків завжди враховуйте культурні звичаї, щоб забезпечити позитивний досвід користувача.

Цей посібник надає міцну основу для розуміння та впровадження очищення вхідних даних у TypeScript. Однак безпека – це галузь, що постійно розвивається. Завжди будьте в курсі останніх найкращих практик та вразливостей, щоб ефективно захищати свої додатки.