Təhlükəsizlik və yaxşı təcrübələr

Saytında şərh xanası var. Kimsə şərh kimi <img src=x onerror="stealCookies()"> yazır. Kodun şərhləri innerHTML ilə əlavə edirsə, bu skript hər ziyarətçinin brauzerində, onun sessiyası ilə işləyəcək. Veb üçün ən ciddi riskləri sadalayan OWASP Top 10 siyahısında inyeksiya (injection) hücumları var və XSS də onlara daxildir. Təhlükəsizlik sonda əlavə olunan funksiya deyil — gündəlik vərdişlər toplusudur.

XSS: saytlararası skript

XSS o zaman baş verir ki, etibarsız verilən səhifəyə HTML kimi daxil edilir və hücumçunun skripti sənin saytının adından işləyir: kukiləri oğurlayır, istifadəçinin adından əməliyyat edir. Müdafiə: istifadəçi mətnini textContent ilə yaz; HTML həqiqətən lazımdırsa, onu DOMPurify kimi kitabxana ilə təmizlə; React {value}-nu özü ekranlaşdırır (dangerouslySetInnerHTML istisna olmaqla); Content-Security-Policy başlığı skriptlərin haradan yüklənə biləcəyini məhdudlaşdırır.

const comment = '<img src="x" onerror="stealCookies()">';

// dangerous: the text is parsed as HTML and onerror runs
list.innerHTML += `<li>${comment}</li>`;

// safe: the text stays text
const item = document.createElement('li');
item.textContent = comment;
list.append(item);

HTML sətri qurmaq məcburiyyətindəsənsə (məsələn, serverdə şablon), xüsusi simvolları ekranlaşdır: < işarəsi <, & isə & olur və brauzer onları teq kimi yox, mətn kimi göstərir.

function escapeHtml(text) {
  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
  return String(text).replace(/[&<>"']/g, (char) => map[char]);
}

console.log(escapeHtml('<img src=x onerror="stealCookies()">'));
console.log(escapeHtml('Tom & Jerry say "hi"'));

<img src=x onerror="stealCookies()">
Tom & Jerry say "hi"

CSRF: saytlararası sorğu saxtakarlığı

İstifadəçi bankın saytına daxil olub, sessiya kukisi brauzerdədir. Sonra o, başqa saytı açır və həmin səhifə gizli formanı bankın /transfer ünvanına göndərir. Brauzer kukini sorğuya avtomatik əlavə edir, bank isə elə bilir ki, əməliyyatı istifadəçi özü edib. Müdafiə: SameSite atributlu kukilər (Chrome bu atributu olmayan kukiləri Lax kimi qəbul edir), formadakı gizli təsadüfi CSRF tokeni (hücumçunun saytı onu oxuya bilmir), Origin başlığının yoxlanması və verilənləri heç vaxt GET sorğusu ilə dəyişməmək.

Set-Cookie: session=8f3a2c91; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=3600

Verilənləri yoxla, sirləri qoru

Müştəriyə etibar etmə: brauzerdən gələn hər şey — formalar, URL, başlıqlar, JSON — saxtalaşdırıla bilər; hücumçu sənin interfeysini ötüb API-yə birbaşa sorğu göndərir. Ona görə verilənləri serverdə yoxla: tip, uzunluq, format və icazə verilən qiymətlər (qadağan siyahısı yox, icazə siyahısı). Brauzerdəki yoxlama yalnız istifadəçinin rahatlığı üçündür. SQL sorğularını sətirləri birləşdirərək qurma — parametrli sorğular işlət. Böyük layihələrdə sxem kitabxanaları (məsələn, zod) kömək edir.

function validateOrder(input) {
  const errors = [];
  const allowedSizes = ['S', 'M', 'L'];

  if (typeof input.email !== 'string' || !/^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i.test(input.email)) {
    errors.push('email: invalid format');
  }
  if (!Number.isInteger(input.quantity) || input.quantity < 1 || input.quantity > 10) {
    errors.push('quantity: must be an integer 1-10');
  }
  if (!allowedSizes.includes(input.size)) {
    errors.push(`size: must be one of ${allowedSizes.join(', ')}`);
  }
  return errors.length ? { ok: false, errors } : { ok: true };
}

console.log(validateOrder({ email: 'leyla@mail.az', quantity: 2, size: 'M' }));
console.log(validateOrder({ email: 'not-an-email', quantity: '100', size: 'XXL' }));

{ ok: true }
{ ok: false, errors: [ 'email: invalid format', 'quantity: must be an integer 1-10', 'size: must be one of S, M, L' ] }

Sirlər (API açarları, parollar, tokenlər) brauzer koduna düşən kimi açıq olur — istənilən istifadəçi DevTools-da onları görür. Pullu API-yə sorğunu sənin serverin göndərməlidir, brauzer isə yalnız sənin serverinlə danışır. Sirləri .env faylında saxla və faylı .gitignore-a əlavə et. Vite-də VITE_ prefiksli dəyişənlər müştəri koduna daxil edilir — deməli, onlar ictimaidir.

Kod keyfiyyəti: ESLint, Prettier, TypeScript

ESLint kodu işə salmadan səhvləri və pis şablonları tapır: istifadə olunmayan dəyişənlər, ==, elan olunmamış adlar. Prettier kodu avtomatik formatlayır, ona görə komanda üslub haqqında mübahisə etmir. Hər ikisini redaktorda faylı saxlayanda və CI-də işə sal. Layihəyə ESLint əlavə etmək üçün npm init @eslint/config@latest, Prettier üçün npm install -D prettier kifayətdir.

// eslint.config.js
import js from '@eslint/js';
import globals from 'globals';

export default [
  js.configs.recommended,
  {
    languageOptions: { globals: globals.browser },
    rules: {
      eqeqeq: 'error',
      'no-unused-vars': 'warn',
      'no-console': ['warn', { allow: ['warn', 'error'] }],
    },
  },
];

const user={name:"Aysel",age:15,city:'Baku'}
function greet(u){return "Hi, "+u.name}
if(user.age>=14){console.log(greet(user))}

const user = { name: 'Aysel', age: 15, city: 'Baku' };
function greet(u) {
  return 'Hi, ' + u.name;
}
if (user.age >= 14) {
  console.log(greet(user));
}

TypeScript JavaScript-ə statik tiplər əlavə edir: səhvlər kod işə düşməzdən əvvəl, redaktorda görünür. Böyük layihəni bir günə köçürmək lazım deyil — keçid tədricən aparılır:

1. 1
   tsconfig.json əlavə et

   allowJs və checkJs seçimləri ilə — TypeScript mövcud JS fayllarını da yoxlamağa başlayır.

2. 2
   JSDoc tipləri yaz

   /** @param {number} price */ kimi şərhlər faylın adını dəyişmədən tip verir.

3. 3
   Faylları bir-bir .ts-ə çevir

   Ən sadə, asılılığı az olan modullardan başla.

4. 4
   strict rejimini aç

   Sonda "strict": true ən çox səhvi tutur, məsələn, null ola biləcək qiymətləri.

// shop.ts
interface Product {
  id: number;
  title: string;
  price: number;
}

function total(products: Product[]): number {
  return products.reduce((sum, p) => sum + p.price, 0);
}

total([{ id: 1, title: 'Pen', price: '2' }]);
total([{ id: 2, title: 'Notebook' }]);

shop.ts(12,31): error TS2322: Type 'string' is not assignable to type 'number'.
shop.ts(13,8): error TS2741: Property 'price' is missing in type '{ id: number; title: string; }' but required in type 'Product'.

function escapeHtml(text) {
  // replace & < > " ' with HTML entities
}

const comments = ['<b>Hello</b>', 'Tom & Jerry', '<img src=x onerror="steal()">'];
for (const comment of comments) {
  console.log(escapeHtml(comment));
}

<b>Hello</b>
Tom & Jerry
<img src=x onerror="steal()">

function isSafeRedirect(target) {
  // 1) relative path: /^\/(?![\/\\])/
  // 2) otherwise parse with new URL() inside try...catch
  return true;
}

const targets = [
  '/lessons/42',
  '//evil.example/login',
  '/\\evil.example',
  'https://app.example.com/profile',
  'https://app.example.com.evil.example/',
  'javascript:stealCookies()',
];
for (const target of targets) {
  console.log(`${target} -> ${isSafeRedirect(target)}`);
}

/lessons/42 -> true
//evil.example/login -> false
/\evil.example -> false
https://app.example.com/profile -> true
https://app.example.com.evil.example/ -> false
javascript:stealCookies() -> false