Keamanan TypeScript: Pola Jenis Sanitasi Input untuk Aplikasi yang Kuat

Di dunia yang saling terhubung saat ini, membangun aplikasi web yang aman dan andal adalah hal yang terpenting. Dengan meningkatnya kecanggihan ancaman siber, pengembang perlu menggunakan langkah-langkah keamanan yang kuat untuk melindungi data sensitif dan mencegah serangan jahat. TypeScript, dengan sistem pengetikan yang kuat, menyediakan alat yang ampuh untuk meningkatkan keamanan aplikasi, khususnya melalui pola jenis sanitasi input. Panduan komprehensif ini mengeksplorasi berbagai pola jenis TypeScript untuk sanitasi input, yang memungkinkan Anda membangun aplikasi yang lebih aman dan tangguh.

Mengapa Sanitasi Input Sangat Penting

Sanitasi input adalah proses membersihkan atau memodifikasi data yang disediakan pengguna untuk mencegahnya menyebabkan kerusakan pada aplikasi atau penggunanya. Data yang tidak tepercaya, baik dari pengiriman formulir, permintaan API, atau sumber eksternal lainnya, dapat menimbulkan kerentanan seperti:

• Cross-Site Scripting (XSS): Penyerang menyuntikkan skrip berbahaya ke dalam halaman web yang dilihat oleh pengguna lain.
• SQL Injection: Penyerang memasukkan kode SQL berbahaya ke dalam kueri database.
• Command Injection: Penyerang menjalankan perintah arbitrer di server.
• Path Traversal: Penyerang mengakses file atau direktori yang tidak sah.

Sanitasi input yang efektif mengurangi risiko ini dengan memastikan bahwa semua data yang diproses oleh aplikasi sesuai dengan format yang diharapkan dan tidak mengandung konten yang berbahaya.

Memanfaatkan Sistem Jenis TypeScript untuk Sanitasi Input

Sistem jenis TypeScript menawarkan beberapa keuntungan untuk menerapkan sanitasi input:

• Analisis Statis: Kompiler TypeScript dapat mendeteksi potensi kesalahan terkait jenis selama pengembangan, sebelum runtime.
• Keamanan Jenis: Menegakkan tipe data, mengurangi risiko format data yang tidak terduga.
• Kejelasan Kode: Meningkatkan keterbacaan dan kemudahan perawatan kode melalui deklarasi jenis eksplisit.
• Dukungan Refactoring: Mempermudah refactoring kode sambil mempertahankan keamanan jenis.

Dengan memanfaatkan sistem jenis TypeScript, pengembang dapat membuat mekanisme sanitasi input yang kuat yang meminimalkan risiko kerentanan keamanan.

Pola Jenis Sanitasi Input Umum di TypeScript

1. Sanitasi String

Sanitasi string melibatkan pembersihan dan validasi input string untuk mencegah XSS dan serangan injeksi lainnya. Berikut adalah beberapa teknik umum:

a. Melarikan Diri dari Entitas HTML

Melarikan diri dari entitas HTML mengubah karakter yang berpotensi berbahaya menjadi entitas HTML yang sesuai, mencegahnya ditafsirkan sebagai kode HTML. Misalnya, < menjadi <, dan > menjadi >.

Contoh:

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

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

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

            

              
                Copy
              
            
          

b. Validasi Ekspresi Reguler

Ekspresi reguler dapat digunakan untuk memvalidasi bahwa sebuah string sesuai dengan format tertentu, seperti alamat email atau nomor telepon.

Contoh:

            
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. Alias ​​Jenis untuk Format String Tertentu

Alias ​​jenis TypeScript dapat digunakan untuk menentukan format string tertentu dan menegakkannya pada waktu kompilasi.

Contoh:

            
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. Sanitasi Angka

Sanitasi angka melibatkan validasi bahwa input numerik berada dalam rentang yang dapat diterima dan sesuai dengan format yang diharapkan.

a. Validasi Rentang

Pastikan bahwa sebuah angka berada dalam rentang tertentu.

Contoh:

            
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. Penjaga Jenis untuk Tipe Angka

Gunakan penjaga jenis untuk memastikan bahwa suatu nilai adalah angka sebelum melakukan operasi padanya.

Contoh:

            
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. Sanitasi Tanggal

Sanitasi tanggal melibatkan validasi bahwa input tanggal dalam format yang benar dan dalam rentang yang dapat diterima.

a. Validasi Format Tanggal

Gunakan ekspresi reguler atau pustaka penguraian tanggal untuk memastikan bahwa string tanggal sesuai dengan format tertentu (misalnya, YYYY-MM-DD).

Contoh:

            
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. Validasi Rentang Tanggal

Pastikan bahwa tanggal berada dalam rentang tertentu, seperti tanggal mulai dan tanggal akhir.

Contoh:

            
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. Sanitasi Array

Sanitasi array melibatkan validasi elemen-elemen di dalam array untuk memastikan mereka memenuhi kriteria tertentu.

a. Penjaga Jenis untuk Elemen Array

Gunakan penjaga jenis untuk memastikan bahwa setiap elemen dalam array adalah dari tipe yang diharapkan.

Contoh:

            
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. Sanitasi Elemen Array

Terapkan teknik sanitasi ke setiap elemen dalam array untuk mencegah serangan injeksi.

Contoh:

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

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

            

              
                Copy
              
            
          

5. Sanitasi Objek

Sanitasi objek melibatkan validasi properti sebuah objek untuk memastikan mereka memenuhi kriteria tertentu.

a. Aserasi Jenis untuk Properti Objek

Gunakan asersi jenis untuk menegakkan jenis properti objek.

Contoh:

            
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. Sanitasi Properti Objek

Terapkan teknik sanitasi ke setiap properti sebuah objek untuk mencegah serangan injeksi.

Contoh:

            
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");</script>',
  description: 'This is a product description with some <b>HTML</b>.',
  price: 99.99,
};

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

            

              
                Copy
              
            
          

Praktik Terbaik untuk Sanitasi Input di TypeScript

• Sanitasi lebih awal: Sanitasi data sedekat mungkin dengan sumber input.
• Gunakan pendekatan pertahanan berlapis: Gabungkan sanitasi input dengan langkah-langkah keamanan lainnya, seperti pengkodean output dan kueri terparameterisasi.
• Jaga agar logika sanitasi tetap mutakhir: Tetap terinformasi tentang kerentanan keamanan terbaru dan perbarui logika sanitasi Anda yang sesuai.
• Uji logika sanitasi Anda: Uji secara menyeluruh logika sanitasi Anda untuk memastikan bahwa ia secara efektif mencegah serangan injeksi.
• Gunakan pustaka yang sudah ada: Manfaatkan pustaka yang dikelola dengan baik dan tepercaya untuk tugas sanitasi umum, daripada menemukan kembali roda. Misalnya, pertimbangkan untuk menggunakan pustaka seperti validator.js.
• Pertimbangkan Lokalisasi: Saat berurusan dengan input pengguna dari berbagai wilayah, waspadalah terhadap karakter set yang berbeda dan standar pengkodean (misalnya, UTF-8). Pastikan logika sanitasi Anda menangani variasi ini dengan benar untuk menghindari memperkenalkan kerentanan yang terkait dengan masalah pengkodean.

Contoh Pertimbangan Input Global

Saat mengembangkan aplikasi untuk audiens global, penting untuk mempertimbangkan berbagai format input dan konvensi budaya. Berikut adalah beberapa contoh:

• Format Tanggal: Berbagai wilayah menggunakan format tanggal yang berbeda (misalnya, MM/DD/YYYY di AS, DD/MM/YYYY di Eropa). Pastikan aplikasi Anda dapat menangani banyak format tanggal dan memberikan validasi yang sesuai.
• Format Angka: Berbagai wilayah menggunakan pemisah yang berbeda untuk titik desimal dan ribuan (misalnya, 1,000.00 di AS, 1.000,00 di Eropa). Gunakan pustaka parsing dan pemformatan yang sesuai untuk menangani variasi ini.
• Simbol Mata Uang: Simbol mata uang bervariasi di berbagai negara (misalnya, $, €, £). Gunakan pustaka pemformatan mata uang untuk menampilkan nilai mata uang dengan benar berdasarkan lokal pengguna.
• Format Alamat: Format alamat sangat bervariasi di berbagai negara. Sediakan bidang input yang fleksibel dan logika validasi untuk mengakomodasi struktur alamat yang berbeda.
• Format Nama: Format nama berbeda antar budaya (misalnya, nama Barat biasanya memiliki nama yang diberikan diikuti dengan nama keluarga, sementara beberapa budaya Asia membalik urutannya). Pertimbangkan untuk mengizinkan pengguna untuk menentukan urutan nama yang mereka sukai.

Kesimpulan

Sanitasi input adalah aspek penting dari membangun aplikasi TypeScript yang aman dan andal. Dengan memanfaatkan sistem jenis TypeScript dan menerapkan pola jenis sanitasi yang sesuai, pengembang dapat secara signifikan mengurangi risiko kerentanan keamanan seperti XSS dan serangan injeksi. Ingatlah untuk melakukan sanitasi lebih awal, gunakan pendekatan pertahanan berlapis, dan tetap terinformasi tentang ancaman keamanan terbaru. Dengan mengikuti praktik terbaik ini, Anda dapat membangun aplikasi yang lebih kuat dan aman yang melindungi pengguna dan data mereka. Saat Anda membangun aplikasi global, selalu ingat konvensi budaya untuk memastikan pengalaman pengguna yang positif.

Panduan ini memberikan dasar yang kuat untuk memahami dan menerapkan sanitasi input di TypeScript. Namun, keamanan adalah bidang yang terus berkembang. Selalu tetap diperbarui tentang praktik dan kerentanan terbaru untuk melindungi aplikasi Anda secara efektif.